Home › Forums › Front-end Issues › Flexslider not syncing with dynamic items
Solving
Flexslider not syncing with dynamic items
-
I have flexslider activated with a ACF for each loop using this code:
$(window).load(function() { // The slider being synced must be initialized first $('#gallerycarousel').flexslider({ animation: "slide", controlNav: false, animationLoop: false, slideshow: false, directionNav: true, itemWidth: 300, itemMargin: 10, animationLoop: true, asNavFor: '#galleryslider' }); $('#galleryslider').flexslider({ animation: "slide", controlNav: false, animationLoop: false, slideshow: false, directionNav: true, sync: "#gallerycarousel" }); }); <div class="flexslider" id="galleryslider"> <ul class="slides"> <?php $gallery = get_field('fullgallery'); foreach( $gallery as $galleryImage ): $image = $galleryImage['url']; ?> <li style="background-image: url('<?php echo $image; ?>')"></li> <?php endforeach; ?> </ul> </div> <div class="flexslider" id="gallerycarousel"> <ul class="slides"> <?php foreach( $gallery as $galleryImage ): $image = $galleryImage['url']; ?> <li style="background-image: url('<?php echo $image; ?>'); background-size: cover;"> <div class="viewImg"> <a class="fancybox" rel="gallery1" href="<?php echo $image; ?>" title="<?php echo $galleryImage['caption']; ?>"><i class="fa fa-search"></i></a> </div> </li> <meta property="og:image" content="<?php echo $galleryImage['url']; ?>" /> <?php endforeach; ?> </ul> </div>My issue is that on click of a thumbnail, it takes me to the wrong large image, I have tried re-downloading flexslider but no luck, I have also tried replacing the for each loop with just static items and, that seems to fix it.
And here is the Static code:
<div id="galleryslider" class="flexslider"> <div class="flex-viewport" style="overflow: hidden; position: relative;"><ul class="slides" style="width: 4200%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);"> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/image1.jpg"); width: 1903px; margin-right: 0px; float: left; display: block;" class="flex-active-slide"></li> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-25.jpg"); width: 1903px; margin-right: 0px; float: left; display: block;"></li> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-4.jpg"); width: 1903px; margin-right: 0px; float: left; display: block;"></li> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-2.jpg"); width: 1903px; margin-right: 0px; float: left; display: block;"></li> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-5.jpg"); width: 1903px; margin-right: 0px; float: left; display: block;"></li> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/image3.jpg"); width: 1903px; margin-right: 0px; float: left; display: block;"></li> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/image2.jpg"); width: 1903px; margin-right: 0px; float: left; display: block;"></li> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-3.jpg"); width: 1903px; margin-right: 0px; float: left; display: block;"></li> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-57.jpg"); width: 1903px; margin-right: 0px; float: left; display: block;"></li> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/room.jpg"); width: 1903px; margin-right: 0px; float: left; display: block;"></li> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-16.jpg"); width: 1903px; margin-right: 0px; float: left; display: block;"></li> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-23.jpg"); width: 1903px; margin-right: 0px; float: left; display: block;"></li> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-30.jpg"); width: 1903px; margin-right: 0px; float: left; display: block;"></li> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-531.jpg"); width: 1903px; margin-right: 0px; float: left; display: block;"></li> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-66.jpg"); width: 1903px; margin-right: 0px; float: left; display: block;"></li> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-681.jpg"); width: 1903px; margin-right: 0px; float: left; display: block;"></li> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-75.jpg"); width: 1903px; margin-right: 0px; float: left; display: block;"></li> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-77.jpg"); width: 1903px; margin-right: 0px; float: left; display: block;"></li> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-81.jpg"); width: 1903px; margin-right: 0px; float: left; display: block;"></li> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-851.jpg"); width: 1903px; margin-right: 0px; float: left; display: block;"></li> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-98.jpg"); width: 1903px; margin-right: 0px; float: left; display: block;"></li> </ul></div><ul class="flex-direction-nav"><li class="flex-nav-prev"><a href="#" class="flex-prev flex-disabled" tabindex="-1">Previous</a></li><li class="flex-nav-next"><a href="#" class="flex-next">Next</a></li></ul></div> <div id="gallerycarousel" class="flexslider"> <div class="flex-viewport" style="overflow: hidden; position: relative;"><ul class="slides" style="width: 4200%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);"> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/image1.jpg"); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;" class="flex-active-slide"> <div class="viewImg" style="display: none;"> <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/image1.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a> </div> </li> <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/image1.jpg" property="og:image"> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-25.jpg"); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;"> <div class="viewImg" style="display: none;"> <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-25.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a> </div> </li> <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-25.jpg" property="og:image"> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-4.jpg"); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;"> <div class="viewImg"> <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-4.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a> </div> </li> <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-4.jpg" property="og:image"> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-2.jpg"); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;"> <div class="viewImg"> <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-2.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a> </div> </li> <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-2.jpg" property="og:image"> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-5.jpg"); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;"> <div class="viewImg"> <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-5.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a> </div> </li> <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-5.jpg" property="og:image"> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/image3.jpg"); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;"> <div class="viewImg"> <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/image3.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a> </div> </li> <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/image3.jpg" property="og:image"> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/image2.jpg"); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;"> <div class="viewImg"> <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/image2.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a> </div> </li> <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/image2.jpg" property="og:image"> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-3.jpg"); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;"> <div class="viewImg"> <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-3.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a> </div> </li> <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-3.jpg" property="og:image"> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-57.jpg"); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;"> <div class="viewImg"> <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-57.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a> </div> </li> <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-57.jpg" property="og:image"> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/room.jpg"); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;"> <div class="viewImg"> <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/room.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a> </div> </li> <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/room.jpg" property="og:image"> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-16.jpg"); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;"> <div class="viewImg"> <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-16.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a> </div> </li> <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-16.jpg" property="og:image"> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-23.jpg"); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;"> <div class="viewImg"> <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-23.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a> </div> </li> <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-23.jpg" property="og:image"> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-30.jpg"); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;"> <div class="viewImg"> <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-30.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a> </div> </li> <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-30.jpg" property="og:image"> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-531.jpg"); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;"> <div class="viewImg"> <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-531.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a> </div> </li> <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-531.jpg" property="og:image"> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-66.jpg"); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;"> <div class="viewImg"> <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-66.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a> </div> </li> <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-66.jpg" property="og:image"> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-681.jpg"); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;"> <div class="viewImg"> <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-681.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a> </div> </li> <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-681.jpg" property="og:image"> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-75.jpg"); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;"> <div class="viewImg"> <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-75.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a> </div> </li> <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-75.jpg" property="og:image"> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-77.jpg"); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;"> <div class="viewImg"> <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-77.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a> </div> </li> <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-77.jpg" property="og:image"> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-81.jpg"); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;"> <div class="viewImg"> <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-81.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a> </div> </li> <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-81.jpg" property="og:image"> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-851.jpg"); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;"> <div class="viewImg"> <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-851.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a> </div> </li> <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-851.jpg" property="og:image"> <li style="background-image: url("http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-98.jpg"); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;"> <div class="viewImg"> <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-98.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a> </div> </li> <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-98.jpg" property="og:image"> </ul></div><ul class="flex-direction-nav"><li class="flex-nav-prev"><a href="#" class="flex-prev">Previous</a></li><li class="flex-nav-next"><a href="#" class="flex-next">Next</a></li></ul></div>I am unsure on how to get it to work with the foreach loop, does anyone have a solution for this?
-
Hi @gab1982
It’s because the HTML code you used is the code that is generated by Flexslider. You need to use the right structure to make it works. Please take a look at these pages to learn more about it: https://www.woothemes.com/flexslider/, https://www.advancedcustomfields.com/resources/gallery/. Looking at those pages, I believe your code should be like this:
<script> jQuery(function($) { $(window).load(function() { // The slider being synced must be initialized first $('#gallerycarousel').flexslider({ animation: "slide", controlNav: false, animationLoop: false, slideshow: false, directionNav: true, itemWidth: 300, itemMargin: 10, animationLoop: true, asNavFor: '#galleryslider' }); $('#galleryslider').flexslider({ animation: "slide", controlNav: false, animationLoop: false, slideshow: false, directionNav: true, sync: "#gallerycarousel" }); $('.flexslider').flexslider(); }); }); </script> <?php $images = get_field('fullgallery'); if( $images ): ?> <div id="galleryslider" class="flexslider"> <ul class="slides"> <?php foreach( $images as $image ): ?> <li> <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /> <p><?php echo $image['caption']; ?></p> </li> <?php endforeach; ?> </ul> </div> <div id="gallerycarousel" class="flexslider"> <ul class="slides"> <?php foreach( $images as $image ): ?> <li> <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" /> </li> <?php endforeach; ?> </ul> </div> <?php endif; ?>I hope this helps.
-
Hi James,
The static code I provided is the code that actually works as I hand coded it and is not the generated code, but the static code works as I expect however when I initiate the foreach loop it as mentioned it jumps to the wrong slide.Thank you for providing your code however that broke the gallery, flexslider can be initiated multiple times as shown here: http://flexslider.woothemes.com/thumbnail-slider.html and by using:
$('#gallerycarousel').flexslider({ animation: "slide", controlNav: false, animationLoop: false, slideshow: false, directionNav: true, itemWidth: 300, itemMargin: 10, animationLoop: true, asNavFor: '#galleryslider' }); $('#galleryslider').flexslider({ animation: "slide", controlNav: false, animationLoop: false, slideshow: false, directionNav: true, sync: "#gallerycarousel" }); -
After some research today I found out this was the culprit:
<meta property=”og:image” content=”<?php echo $galleryCarouselImage[‘url’]; ?>” />
It seems to confuse the flexslider carousel
-
Hi @gab1982
The static code is working because it’s the final code structure that is generated by flexslider from the HTML code generated by the PHP code.
Regarding the broken gallery, I’m sorry I think I left this code
$('.flexslider').flexslider();that may break the gallery.I’ve tested the code I gave you before on my end, and it was working correctly. But I’m glad that you found the main issue of your code 🙂
Thanks!
Viewing 5 posts - 1 through 5 (of 5 total)
The topic ‘Flexslider not syncing with dynamic items’ is closed to new replies.
Welcome
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Forums
Helping Others
Helping others is a great way to earn karma, gain badges and help ACF development!
