I've set up an Artist gallery on a site that I'm building using FlexSlider. It works great except that there's this really strange issue where the large image is not matched to the thumbnail navigation.

The thumbnails are in the correct order but the large images displayed are off by one. i.e. the first image displayed should be displayed second with the final image being the first one. Really weird.

My EE code is:

  {exp:channel:entries channel="exhibition|artist" limit="1"}

  <div class="flexslider">
    <ul class="slides">
        <li data-thumb="{artist_gallery:art_image:100square}"><img src="{artist_gallery:art_image:570x470}" alt="{artist_gallery:art_title}" /></li>


And on the front end the source code is:

  <div class="flexslider">
    <ul class="slides">

        <li data-thumb="http://domain.com/uploads/general/_100square/test14.jpg"><img src="http://domain.com/uploads/general/_570x470/test14.jpg" alt="" /></li>

        <li data-thumb="http://domain.com/uploads/general/_100square/test4.jpeg"><img src="http://domain.com/uploads/general/_570x470/test4.jpeg" alt="" /></li>

        <li data-thumb="http://domain.com/uploads/general/_100square/test5.jpg"><img src="http://domain.com/uploads/general/_570x470/test5.jpg" alt="" /></li>

        <li data-thumb="http://domain.com/uploads/general/_100square/test7.jpg"><img src="http://domain.com/uploads/general/_570x470/test7.jpg" alt="" /></li>

        <li data-thumb="http://domain.com/uploads/general/_100square/test6.jpg"><img src="http://domain.com/uploads/general/_570x470/test6.jpg" alt="" /></li>

        <li data-thumb=""><img src="" alt="" /></li>


I've checked the console and there are no errors. I'm completely flummoxed on this one. Especially considering that in the source view the thumbs and large images line up correctly. Any ideas?

  • What's with the empty image at the end - empty Grid row? Maybe that's throwing the script off? Jan 23 '14 at 22:09
  • Derek, that's generated by flexslider as it's not in the template at all.
    – CreateSean
    Jan 23 '14 at 22:11

So it looks like the issue was with the flexslider zip. I looked at the demo included in the zip and it has the same issue. I resolved the problem by grabbing the js file from the live demo page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.