Support

Account

Register Login

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

  • 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!)