jQuery FlexSlider hide Slider but retain visibility of Manual Controls

I'm effectively trying to have the FlexSlider be hidden, except for some controlling thumbnails. When the thumbnails are clicked, the FlexSlider fades in and slides to the appropriate corresponding slide.

The main problem I'm having is that when the FlexSlider is hidden, the controls are hidden as well. Is there a way to separate the two, so that I can have the controls (represented by a series of dots in the FlexSlider demo) by permanently visible? I could then attach an onClick / fadeIn handler that coul have the slider go to the correct slide.

I'm currently using the 'External Scaffold' method, found on GitHub, to use a custom Manual Controls container, because it seems like it freed slideTo(), which I think is where my problem lies, but I am not 100% sure. This 'External Scaffold' by StephenWil can be found here: https://github.com/stephenwil/FlexSlider/blob/master/jquery.flexslider.js

However, this ManualControls method also works: jquery Flexslider manual controls is not working

Has anyone else been trying to achieve a similar result? I've not found a pop-up slider as I am describing but I think it is a desired functionality for many people (and their clients!).

I've put a running example on this JS Fiddle to check out: http://jsfiddle.net/uxCzq/

You can see the 'dots'/navigation poking out at the bottom-left hand side of the screen, but when you hide the Slider, the navigation also disappears despite living outside the containing Slider div.

Can anyone help me out?? I would be indebted to you!

Solution

I've been doing something on a client site that sounds very similar to the effect that you're trying to achieve. I started off on the same route you have with the external controls method but that didn't give me quite enough flexibility.

My solution was to do the following (sorry - would have forked your jsfiddle but figured this would be quicker and cleaner.

First set up markup:

<a rel="0" class="slide_thumb" href="#">slide link 1</a>
<a rel="1" class="slide_thumb" href="#">slide link 2</a>
<a rel="2" class="slide_thumb" href="#">slide link 3</a>

<div class="flexslider">
    <ul class="slides">
        <li>
            <img src="demo-stuff/inacup_samoa.jpg" />
            <p class="flex-caption">Captions and cupcakes. Winning combination.</p>
        </li>
        <li>
            <a href="http://flex.madebymufffin.com"><img src="demo-stuff/inacup_pumpkin.jpg" /></a>
            <p class="flex-caption">This image is wrapped in a link!</p>
        </li>
        <li>
            <img src="demo-stuff/inacup_donut.jpg" />
        </li>
        <li>
            <img src="demo-stuff/inacup_vanilla.jpg" />
        </li>
        <li>
            <img src="demo-stuff/inacup_vanilla.jpg" />
        </li>
    </ul>
  </div>

Note the rel attribute on the links - we'll use them below. Also note that the values start from 0 - this matches the values for the slides (e.g. the first slide is 0, the second is 1 etc).

You should set the visbility to none on the flexslider div in your css. (a more accessible way to do this would be to hide the slider offscreen using absolute positioning and bring it back into view on request but in the interests of keeping things simple I'll just stick to show/hide)

Next set up your call to the flexslider plugin:

<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function($) {

    $('.flexslider').flexslider({
        animation: "slide",
        slideshow: false,
        animationLoop: false,
        directionNav: true,
        slideToStart: 0,
        start: function(slider) {
            $('a.slide_thumb').click(function() {
                $('.flexslider').show();
                var slideTo = $(this).attr("rel")//Grab rel value from link;
                var slideToInt = parseInt(slideTo)//Make sure that this value is an integer;
                if (slider.currentSlide != slideToInt) {
                    slider.flexAnimate(slideToInt)//move the slider to the correct slide (Unless the slider is also already showing the slide we want);
                }
            });
        }

    });

});
</script>

This should show your slide when the user clicks on one of your links and also move the slider to the right position. This is just a starting point and I should point out this this is a very stripped down version of the code I'm using so this is basically untested as is. Should give you a decent platform to work from though. Shout if you run into problems