What you need is an array of all the images that you can step through with the click event… something like this in your template.
<?php
// Empty array for our images
$images = [];
// Get the urls and wrap each one in single qoutes
foreach ($page->images() as $img) {
$images[] = "'". $img->url() . "'";
}
// Make the comma seperated list that javascript can read
$images = implode(', ', $images)
?>
<script>
function ImageCollection(images) {
this.images = images;
this.i = 0;
this.next = function(img) {
this.i++;
if (this.i == images.length) this.i = 0;
img.src = images[this.i];
};
}
// Use the list of images created above
var imgSet = new ImageCollection([<?= $images ?>]);
</script>
<img src='<?= $page->images()->first()->url() ?>' onclick="imgSet.next(this)">
You say you want it to stop on the last image, however I would argue that that is a poor user experience, since you would need to reload the page and cycle through again to see a picture you went past again. The code above cycles through infinitly.
No worries. You can make the code above safer by wraping the whole thing in hasImages(). It is good practice to check things exist before trying to use them.
<?php if($page->hasImages()) :
// Empty array for our images
$images = [];
// Get the urls and wrap each one in single qoutes
foreach ($page->images() as $img) {
$images[] = "'". $img->url() . "'";
}
// Make the comma seperated list that javascript can read
$images = implode(', ', $images)
?>
<script>
function ImageCollection(images) {
this.images = images;
this.i = 0;
this.next = function(img) {
this.i++;
if (this.i == images.length) this.i = 0;
img.src = images[this.i];
};
}
// Use the list of images created above
var imgSet = new ImageCollection([<?= $images ?>]);
</script>
<img src='<?= $page->images()->first()->url() ?>' onclick="imgSet.next(this)">
<?php endif ?>
Hello I know this is quite old but I’m doing this same thing but trying to also update and display the metadata when the image src is changed. Any idea how to apply similar logic to “grab” the image metadata?
Hi! Thank you so much! This does work but if I try to render $firstImg->title() on the page it doesn’t update from the initial first image info, even though the change is made in the actual image metadata (as I can see in the inspector).
well i dont know how u have set up your blueprint keys. You will need tweak the above a bit to match what you have actually called the alt and titile fields in the file meta.
thank you! yes the blueprints and alt, title etc fields are corresponding but even if I render $firstImg->url() for example it still gives me the url of the first image even when the image has changed. Is there another way to fetch the file that will give me the updated data?
Ok I must be making a silly error so I’m copying my code here. The div class=‘credits’ is where I have the issue. I have tried fetching the data multiple ways but it never changes from the first image’s meta-data when the image changes. However in the div class=‘gallery’ the metadata displays correctly. Thank you for your help!
