Support

Account

Home Forums Add-ons Gallery Field ACF Gallery and Backstrech

Solved

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!

  • Hi @gomezvalverde

    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>
        
    
  • Hi @gomezvalverde

    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>
        
    
  • Hi @gomezvalverde

    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 🙂

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.