jQuery FlexSlider-链接到特定图像 [英] jQuery FlexSlider - Link to specific image

问题描述

在另一篇文章中( jQuery FlexSlider隐藏滑块但保留了手动控件"的可见性)，用户LJ902回答了您如何链接到Flexslider中的特定图像.仅当链接与图像位于同一页面时，它才能完美运行.

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.

我想拥有的东西:在首页上有一堆图像缩影..当您单击其中一个时，您将进入一个新页面，其中包含在Flexslider中显示的alle图像，并且选择的是图像用户在首页上选择.

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.

这是链接和图像的代码.注意链接中的"rel":

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> 

这是脚本:

<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在同一页面中，则上述方法可以正常工作.

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

谢谢

V.

推荐答案

您需要做的是在两个页面之间传递参数:

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>

此处的参数名称为 img ，其值与rel属性相同(不再需要).在目标页面上，您将添加逻辑以获取url参数，例如:

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.

这篇关于jQuery FlexSlider-链接到特定图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！