Support

Account

Register Login

Home › Forums › Add-ons › Gallery Field › ACF Gallery + Flexslider – Image order

Solved

ACF Gallery + Flexslider – Image order

  • Hi there,

    I’ve got the ACF Gallery Field up and running, displaying it using Flexslider.

    My code in my template file is:

    <?php 
$images = get_field('gallery'); 
if( $images ): ?>
 <div class="flexslider">
  <ul class="slides">
   <?php foreach( $images as $image ): ?>
    <li data-thumb="<?php echo $image['sizes']['thumbnail']; ?>">
     <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
    </li>
   <?php endforeach; ?>
  </ul>
 </div>
<?php endif; ?>

    The Flexslider controls are defined as:

    <script type="text/javascript">
	$(window).load(function() {
	  $('.flexslider').flexslider({
	    animation: "slide",
	    controlNav: "thumbnails"
	  });
	});
</script>

    The problem I’m having is that when I add the images to the gallery and reorder them via drag and drop in the ACF field, it updates the thumbnail order in the Flexslider but not the main images order.

    This results in the thumbnails not correlating to the main images.

    Is there something I’m doing wrong?
    Am I calling the images incorrectly?

    Many thanks.

    s

  • Hi @sja

    Thanks for the code. Can you please remove the JS, and look at what HTML is generated on the page. Are the images created in the correct order?

    Your above loop shows the image code for flexslider, but not for thumbnails.

    Perhaps you have another loop for this?

    Thanks
    E

  • Hello,

    The generated html is as follows:

    <!-- Start Flexslider -->
<div class="flexslider">
    <ul class="slides">
        	<li data-thumb="http://localhost:8888/wp-testing/wp-content/uploads/2014/02/128387_172_orig_copy-150x150.jpg">
                <img src="http://localhost:8888/wp-testing/wp-content/uploads/2014/02/128387_172_orig_copy.jpg" alt="" />
            </li>
        	<li data-thumb="http://localhost:8888/wp-testing/wp-content/uploads/2014/02/128387_CLS_orig_copy-150x150.jpg">
                <img src="http://localhost:8888/wp-testing/wp-content/uploads/2014/02/128387_CLS_orig_copy.jpg" alt="" />
            </li>
        	<li data-thumb="http://localhost:8888/wp-testing/wp-content/uploads/2014/02/128387_170_orig_copy-150x150.jpg">
                <img src="http://localhost:8888/wp-testing/wp-content/uploads/2014/02/128387_170_orig_copy.jpg" alt="" />
            </li>
        	<li data-thumb="http://localhost:8888/wp-testing/wp-content/uploads/2014/02/128387_30_orig_copy-150x150.jpg">
                <img src="http://localhost:8888/wp-testing/wp-content/uploads/2014/02/128387_30_orig_copy.jpg" alt="" />
            </li>
     </ul>
</div>
<!-- End Flexslider -->

    Which is odd because it looks as if the images and thumbs should match up.

    I was using a Flexslider example and creating the thumbs in this line (from previous posted code)

    <li data-thumb="<?php echo $image['sizes']['thumbnail']; ?>">

    The Flexslider suggested code is as follows:
    JS

    // Can also be used with $(document).ready()
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    controlNav: "thumbnails"
  });
});

    HTML

    <!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
  <ul class="slides">
    <li data-thumb="slide1-thumb.jpg">
      <img src="slide1.jpg" />
    </li>
    <li data-thumb="slide2-thumb.jpg">
      <img src="slide2.jpg" />
    </li>
    <li data-thumb="slide3-thumb.jpg">
      <img src="slide3.jpg" />
    </li>
    <li data-thumb="slide4-thumb.jpg">
      <img src="slide4.jpg" />
    </li>
  </ul>
</div>

    I’ve kinda mashed these together after watching your vimeo video example.

    When I change the order of the thumbnails via the Gallery Field in the WP Post screen, should it (in theory) update the order of the thumbnails and full size images? (I understand it’s mostly likely me, so when I say ‘in theory’ I mean no offence!)

  • Just checked the thumbnail and image, even though the file names match up, the images are actually diffirent.

    I just tried a new post with new media(images). I create new post, click the gallery field, upload 4 images, rearrange them in the gallery field and publish.

    Results in a post with the thumbnails in the order I’ve created and the main images in the order they were uploaded.

    Strange.

    If I take out the JS I end up with a list of 4 original images and no thumbs.

    Personally, I’m stumped (which isn’t saying much!)

  • ok, so it looks as if everything is fine apart from the fact that in my 4 image gallery, the Flexslider is highlighting thumbnail 1 and displaying image 4, then highlighting thumbnail 2 and displaying image 1 etc.

    thumbnail 1 displays image 4
    thumbnail 2 displays image 1
    thumbnail 3 displays image 2
    thumbnail 4 displays image 3
    then it loops around.

    The html that is printed by the php is fine. The images match the thumbnails. When I reorder via the gallery field, the order is correct.

    So it appears to be something to do with the flexslider I guess.
    I’ll struggle on. Thanks for your time and suggestions as to what to check.

  • Turns out it was the latest version of Flexslider (v2.2.2).

    Version 2.2.1 works fine!

    I hate stuff like that, had me going round in circles for ages…

    Cheers,

    S

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

The topic ‘ACF Gallery + Flexslider – Image order’ is closed to new replies.