jQuery FlexSlider - Link to specific image
<p>In another post (<a href="http://stackoverflow.com/questions/9744335/jquery-flexslider-hide-slider-but-retain-visibility-of-manual-controls/">jQuery FlexSlider hide Slider but retain visibility of Manual Controls</a>), 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. </p>

<p>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. </p>

<p>This is the code for the link and images. Notice the "rel" in the link: </p>

<pre><code>&lt;a rel="0" class="slide_thumb" href="#"&gt;slide link 1&lt;/a&gt;
&lt;a rel="1" class="slide_thumb" href="#"&gt;slide link 2&lt;/a&gt;
&lt;a rel="2" class="slide_thumb" href="#"&gt;slide link 3&lt;/a&gt;

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

<p>And this is the script: </p>

<pre><code>&lt;script type="text/javascript" charset="utf-8"&gt;
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);
            }
        });
    }

});

});
</code></pre>

<p></p>

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

<p>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: </p>

<pre><code>&lt;a rel="0" class="slide_thumb" href="mySubpage"&gt;slide link 1&lt;/a&gt;
</code></pre>

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

<p>If anybody could give me a hint how to resolve this, I would be very grateful :) </p>

<p>Thanks, </p>

<p>V. </p>
