Hello, I have a script that I would like to implement, but the image paths are set on the JS file like so:
$("#example, body").vegas({
slides: [
{ src: "/img/slide1.jpg" },
{ src: "/img/slide2.jpg" },
{ src: "/img/slide3.jpg" },
{ src: "/img/slide4.jpg" }
]
});
I am using a repeater with an image field, so my results would loop inline and output the URL’s. Is there a way to get the results of the loop image path into the JS src?
Thanks!
You do this the same way that you do it with anything else that uses a repeater except that you’re outputting JS instead of HTML. The main difference here is that the JS for this needs to be inline in your template as this cannot be done in a separate JS file.
<?php
if (have_rows('repeater')) {
?>
<script>
jQuery(document).ready(function($) {
$("#example, body").vegas({
sildes: [
<?php
// I'm using an array here and implode later
// to make it easy to exclude a comma after the list item
$images = array();
while (have_rows('repeater')) {
the_row();
$images[] = '{src: "'.get_sub_field('image').'"}';
} // end while have_rows
echo implode(',', $images);
?>
]
});
});
</script>
<?php
} // end if have_rows
?>
Thank you so much, so obvious.
