jQuery FlexSlider - 链接到特定图像

Question

在另一篇文章（jQuery FlexSlider hide Slider but retain visibility of Manual Controls）中，用户LJ902回答了您如何链接到Flexslider中的特定图像。它完美的工作，但只有当链接与图像位于同一页面。

我想要的是：在首页上，有一堆图像缩影..当你点击其中一个，你会看到一个新的页面，在Flexslider中显示的图像，选择是用户在首页上选择的图像。

这是链接和图像的代码。注意链接中的“相对”：

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

这是脚本：

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

}); 

}); 

正如我所说，上述工作正常，如果链接在同一个页面作为Flexslider。

但我想的链接是一个头版，然后链接必须链接到另一个页面，如：

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

但上面的失败，因为我只得到了子页面，没有显示正确的图像（它总是显示第一个）。

如果有人可以给我一个提示如何解决这个问题，我将非常感激:)

感谢，

五

Answer 1

你需要做的是通过之间的参数两页：

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

这里的参数的名称为IMG和值是一样的rel属性（whic你不需要了）。在目标页面上，您将添加一个获取url参数的逻辑，例如：

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.