A Gallery using popover

[ottogal]

Hi All,

I'm trying to create a simple gallery using the popover feature. Clicking (or touching) a thumbnail would show the large picture in the popover.
See this codepen for a (reduced) example.

In this case the triggers are just buttons (of class "trigger") lined up, each having a thumb image as child node.
The popover image property src is populated via the data-full attribute of the button.

This is working fine.

But in my real use case the thumbnails are created in the template via a foreach loop:

<article class="gallery">
	<?php
	foreach ($page->images as $image){
		$thumb = $image->height(180);
		echo "\n
			<button class='trigger' 
				popovertarget='mypopover' 
				popovertargetaction='show'
				data-full=$image->url >
						<img src=$thumb->url alt=$thumb->url />
			</button>
		";
	};	
	?>
	<div id='mypopover' popover>
		<img src='' alt='uups' />
		<button class='close_pop' popovertarget='mypopover' 
			popovertargetaction='hide'>&times;
		</button>  
	</div>
</article>

And here the src attribute results empty, the alt value remains 'uups'. I presume it's a scope issue of the variables in the function initGallery().
What am I doing wrong?
Any hints are very welcome!

Kind regards
ottogal

 

 

[BrendonKoz]

I only have two guesses based on what you've shown:

1. The $page->images isn't actually referring to your images' fieldname? Make sure that the name of your template's multi-image field is actually called "images". If not, change $page->images to whatever the field name is (so if it's named "pictures", use $page->pictures).
2. Enclose the attribute properties in quotes. It may not be a problem for the source, but it would definitely be a problem for a proper ALT value.

BAD:
<img src=http://example.com/image.jpg alt=This will break your HTML />

GOOD:
<img src="http://example.com/image.jpg" alt="This will NOT break your HTML" />

[ottogal]

Thank you, @BrendonKoz.
Indeed, my multi-image field is called "images", and, as you see in my code snippets, all the attribute properties are in quotes (some in single ones, others in double quotes). Same in my real use case.