Home › Forums › Add-ons › Gallery Field › ACF Gallery and Backstrech
Hi,
I am trying to make the ACF Gallery be displayed as a full screen background slideshow with jQuery Backstrech http://srobbin.com/jquery-plugins/backstretch/
The script should be something like:
<script>
$.backstretch([
“NYC-001.jpg”,
“NYC-002.jpg”,
“NYC-003.jpg”
], {
duration: 3000,
fade: 750
});
</script>
How can I get the array of gallery images to be inserted into the script?
Thanks!
Please check this thread regarding PHP and Javascript: http://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming.
Basically, you need to add the PHP code in your JS code. To get the gallery values, please check this page: https://www.advancedcustomfields.com/resources/gallery/.
I hope this helps.
Thanks @James
I am not a programmer and I don’t really understand how this can be done.
The main problem for me is how to get an array of image URLs from the gallery field (it is part of a Options page) and how to make them a variable. I checked how a WP gallery shortcode is done https://www.advancedcustomfields.com/resources/gallery/ but instead of the IDs I need the URL. I also tried using implode to add commas between values, but couldn’t make it work.
Could you please guide me into the right direction to solve this??
My not-working code is below. Thanks!
<!-- trying to get the array of URLs -->
<?php
$images = get_field('slideshow_gallery', 'option');
if( $images ):
foreach( $images as $image ): ?>
<?php echo $image['url']; ?>,
<br>
<?php endforeach; ?>
<?php endif; ?>
</div>
<!-- Put the URLs inside a div -->
<div id="dom-target" style="display: none;">
<?php
$output = "image01", "image02", "image03"; //just a test
echo htmlspecialchars($output); /* You have to escape because the result will not be valid HTML otherwise. */
?>
</div>
<!-- Put the content into a variable -->
<script>
var div = document.getElementById("dom-target");
var myData = div.textContent;
</script>
<script> /* Build backstretch slideshow */
// Duration is the amount of time in between slides,
// and fade is value that determines how quickly the next image will fade in
$.backstretch([
myData
], {
duration: 3000,
fade: 750
});
</script>
Did the <?php echo $image['url']; ?>
code work? I believe you can do it like this:
$.backstretch([
<?php
foreach( $images as $image ) {
echo '"' . $image['url'] . '",';
}
?>
], {
I hope this helps 🙂
AMAZING!
Thanks a lot, I was becoming crazy trying to make it work.
So I guess I don’t need to use anything extra to get the gallery values into the script, right?
And could it be possible to load different image sizes depending on the device? I guess this is a question for Backstrech forum or Zurb Foundation (I use a theme based on Zurb Foundation)
Anyway, this is the working code in case anyone wants to do something similar
Note: This gallery field is part of a options page, and jQuery Backstrech needs to be enqueued.
<?php
// Get the ACF gallery images
$images = get_field('slideshow_gallery', 'option');
?>
<script>
//Backstretch slideshow
// Duration is the amount of time in between slides,
// and fade is value that determines how quickly the next image will fade in
$.backstretch([
<?php
foreach( $images as $image ) {
echo '"' . $image['url'] . '",';
}
?>
], {
duration: 3000,
fade: 750
});
</script>
To get the other sizes of the images, I think you can do it like this:
echo '"' . $image['sizes']['thumbnail'] . '",';
Or:
echo '"' . $image['sizes']['large'] . '",';
If you want to load it depending on the device, I’m afraid you need to ask Backstrech support.
Thanks 🙂
The topic ‘ACF Gallery and Backstrech’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.