Flexslider: how to show thumbnails of slides before clicking?

Question

I'm trying to replicate the effect on http://residentialbylandsecurities.com/ On their slider, if you hover over the arrows, it shows a thumbnail of the upcoming slide. I've installed the same slider (FlexSlider), but this is a customization. My example site is here (unfinished).

Their script is running in this file, but that's so long and sprawling and doing so much more than I need that I want to just write my own function.

My pseudocode: 1. Mainpulate the next/prev controls to add div.thumbnail to each 2. Locate the slides before and after the currently active slide, and save them in variables (prevSlide, nextSlide) 3. Get the data-thumb attributes from these slide img elements, and save each in variables (prevThumbData and nextThumbData) 4. Locate .next div.thumbnail and .prev div.thumbnail 5. Apply prevThumbData and nextThumbData as CSS background-images to their respective elements. 6. CSS: When hover over the arrow elements, slide in div.thumbnail

I don't need to use the other site's function at all unless it's simpler, I just need to accomplish the above. I've already set up my IMG elements to have the data-thumb attribute, but haven't figured out how to modify the slider to include div.thumbnail.

EDIT: I think I figured out the second and third steps in the procedure:

2. Locate the slides before and after the currently active slide, and save them in variables (prevSlide, nextSlide)

function flexThumbs() { 
var slider = $('.flexSlider div ul')
var slides = new Array(slider.children());
var images = slide.find('img'); 
var currentSlide = $("li.flex-active-slide");
// find next and previous slides
var totalSlides = slider.slides.length;
    var nextSlide = slider.currentSlide + 1;
    if (nextSlide >= totalSlides)
        nextSlide = 0;
    var prevSlide = slider.currentSlide - 1;
    if (prevSlide < 0)
        prevSlide = totalSlides - 1;

3. Get the data-thumb attributes from these slide img elements, and save each in variables (prevThumbData and nextThumbData)

var prevThumbData = $(prevSlide > "img").attr("data-thumb");
var nextThumbData = $(nextSlide > "img").attr("data-thumb");
}

they are actually only moving a background image via css hover from right:88px to right:0 . no need for javascript — Chris L
That's not the tricky part. The tricky part is how they got that background image there. When you slide through, the thumbnail of the next slide is showing. That thumbnail is loaded dynamically through JS since the previous/next slides are always changing. My slider has the slide in and out, you can see, but I can't figure out how to add those thumbnails. — authorandrew
your right. I was only considering what was making the images show. the image itself is being loaded dynamically for each slide. — Chris L
Am I retrieving that information correctly in the code example above? Once I've done so, how do I apply that to my thumbnail arrows? — authorandrew
Actually, I haven't even figured out yet how to manipulate the default arrows for flexSlider. The script injects them dynamically and I can't figure out how to modify that output to add an element (for the thumbnail preview) — authorandrew

badAdviceGuy badAdviceGuy · Accepted Answer · 2014-06-02T15:04:36

It looks like the answer is in their scripts.jsfile.

First in the section where they call on .flexslider() they're passing a after: callback. Which is just one of the default callback options in flexslider.

after callback:

            after: function (slider) {
                if (!isTouch) {
                    mainSlider.setThumbs(slider);
                    flexsliderCopy.fadeIn(300); // Fade text back in
                } else {
                    //mainSlider.removeBulk(slider.currentSlide);
                }
            }

So we see they're calling a .setThumbs() method. A quick ctrl + f reveals:

            mainSlider.setThumbs = function (slider) {
                var totalSlides = slider.slides.length;
                var nextSlide = slider.currentSlide + 1;
                if (nextSlide >= totalSlides)
                    nextSlide = 0;
                var prevSlide = slider.currentSlide - 1;
                if (prevSlide < 0)
                    prevSlide = totalSlides - 1;

                prevThumb.find('div').css({
                    backgroundImage: 'url(' + slider.slides.eq(prevSlide).attr('data-thumb') + ')'
                });
                nextThumb.find('div').css({
                    backgroundImage: 'url(' + slider.slides.eq(nextSlide).attr('data-thumb') + ')'
                });

                prevThumb.animate({
                    opacity: 1
                });
                nextThumb.animate({
                    opacity: 1
                });
            };

Flexslider: how to show thumbnails of slides before clicking?

1 Answers