Question

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

我想要的是：在首页上，有一堆图像微缩模型..当你点击其中一个时，你会看到一个新的页面，其中包含Flexslider中显示的alle图像，并选择了图像用户在首页上选择了。

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

<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属性（您不再需要）相同。在目标页面上，您将添加一个逻辑来获取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.

jQuery FlexSlider - 链接到特定图像

1 个答案: