1

別の投稿（jQuery FlexSliderはスライダーを非表示にしますが、手動コントロールの可視性は保持します）で、ユーザーLJ902は、Flexslider内の特定の画像にリンクする方法に回答しました。そしてそれは完璧に機能しますが、リンクが画像と同じページにある場合に限ります。

私が欲しいもの：フロントページにたくさんの画像ミニチュアを持ってください..そしてそれらの1つをクリックすると、Flexsliderに表示されているすべての画像を含む新しいページが表示され、ユーザーが選択した画像が選択されますフロントページにあります。

これは、リンクと画像のコードです。リンクの「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>

しかし、正しい画像が表示されずにサブページにたどり着くだけなので、上記は失敗します（常に最初の画像が表示されます）。

誰かが私にこれを解決する方法のヒントを与えることができれば、私は非常に感謝するでしょう:)

ありがとう、

V。

4

1 に答える 1

0

必要なことは、2 つのページ間でパラメーターを渡すことです。

<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.
于 2013-02-03T15:14:03.237 に答える