Question

In another post (jQuery FlexSlider hide Slider but retain visibility of Manual Controls), the user LJ902 answered how you link to a specific image in the Flexslider. And it works perfectly, but only if the link is located in the same page as the images.

What I would like to have: On the front page, have a bunch of image miniatures.. and when you click one of them, you get to a new page with alle images shown in the Flexslider, and selected is the image the user chose on the front page.

This is the code for the link and images. Notice the “rel” in the link:

<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> 

And this is the script:

<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);
            }
        });
    }

});

});

And as I said, the above works fine if the links are in the same page as the Flexslider.

But I would like for the link to be on a front page, and the link would then have to link to another page, like:

<a rel="0" class="slide_thumb" href="mySubpage">slide link 1</a>

But the above fails, as I only get to the subpage, without the right image being shown (it always shows the first one).

If anybody could give me a hint how to resolve this, I would be very grateful 🙂

Thanks,

V.

Answer 1

What you need to do is to pass a parameter between the two pages:

<a rel="0" class="slide_thumb" href="yourpage?img=0">slide link 1</a>
<a rel="1" class="slide_thumb" href="yourpage?img=1">slide link 2</a>

the parameter here has the name img and the value is the same as the rel attribute (which you don’t need anymore). On the target page you’ll add a logic to get the url parameter, for example like this:

function getQueryParams(qs) {
    qs = qs.split("+").join(" ");
    var params = {},
        tokens,
        re = /[?&]?([^=]+)=([^&]*)/g;

    while (tokens = re.exec(qs)) {
        params[decodeURIComponent(tokens[1])]
            = decodeURIComponent(tokens[2]);
    }

    return params;
}

// assoziative object the key is the get parameter name
var $_GET = getQueryParams(document.location.search);

// now you only have to modify the line:
// var slideTo = $(this).attr("rel")//Grab rel value from link;
// like this:
var slideTo = (($_GET['img']) ? $_GET['img'] : 0);
// if img parameter is set, you slide to it, fallback is the first one.