jQuery Cycle Slideshow Startingslide

Имам галерия с миниатюри за зидария и миниатюрите водят до слайдшоу на jQuery Cycle. Бих искал да направя така, че когато щракнете върху миниатюра, тя отива в слайдшоуто, започвайки с тази миниатюра. Опитвам опцията "startinslide" на Cycle. Освен това сайтът е изграден с Wordpress.

Това е в моя шаблон за галерия с миниатюри:

        <div class="m_item">
        <a href="http://paraboladesignstudio.ipage.com/yahaira/fashion/fashion-slideshow/?thumb=2">
            <img src="<?php echo $image['url'];?>" title="<?php echo $image['title'];?>" alt="<?php echo $image['alt']; ?>">
        </a>
        </div>

И това в моя шаблон за слайдшоу:

<script>
$(.slideshow).cycle({startingSlide: <?php echo $_GET["thumb"] ?>})
</script>

В момента кодът изглежда не прави нищо и каквато и миниатюра да щракнете върху слайдшоуто, започва с първия слайд.

Ще се радвам на вашата помощ.


javascript php jquery jquery-cycle
person Jaeeun Lee    schedule 18.03.2014    source източник
comment
Вашето слайдшоу не използва този код в оригиналната ви публикация, ред 277 на /wp-content/themes/yahaira/js/slideshow.js?ver=3.8.1 е мястото, където всъщност се стартира вашето слайдшоу. Опцията за начален слайд тук е 0.   -  person Ryan    schedule 18.03.2014
comment
Тогава трябва ли да заменя този ред с startSlide: ‹?php echo $_GET[thumb] ?›...? Но не съм сигурен как да поставя този php код в javascript файла.   -  person Jaeeun Lee    schedule 18.03.2014

Отговори (1)


arrow_upward
0
arrow_downward

Най-лесното решение би било да използвате Cycle2. Позволява ви да декларирате опциите за слайдшоу в атрибутите на данните на слайд елемента във вашия html. Вашето маркиране на слайдшоу ще изглежда по следния начин:

<div class="cycle-slideshow"
    data-cycle-starting-slide="<?php echo $_GET["thumb"] ?>"
    data-cycle-timeout="5000">
    <img src="http://placehold.it/480x320/ff0&text=Slide 1" />
    <img src="http://placehold.it/480x320/0f0&text=Slide 2" />
    <img src="http://placehold.it/480x320/0ff&text=Slide 3" />
</div>

Имайте предвид, че индексът на слайда започва от нула, така че може да се наложи да коригирате броя си съответно. Ето една цигулка: http://jsfiddle.net/6LAAJ/

Също така се уверете, че избягвате изхода на вашата GET променлива, за да се предпазите от XSS атаки. Вероятно бих изоставил използването на променливата GET и вместо това ще използвам хеш местоположението на прозореца. Вижте демонстрацията на слайдове с отметки и ето примерен код:

<a href="/bg/slideshow/#slide-3">Link to slide 3</a>

<div class="cycle-slideshow">
    <img src="http://placehold.it/480x320/ff0&text=Slide 1" data-cycle-hash="slide-1" />
    <img src="http://placehold.it/480x320/0f0&text=Slide 2" data-cycle-hash="slide-2" />
    <img src="http://placehold.it/480x320/0ff&text=Slide 3" data-cycle-hash="slide-3" />
</div>

Ако трябва да използвате оригиналния приставка Cycle вместо Cycle 2, тук е JavaScript за настройка на постоянни връзки с помощта на хеш на местоположението на прозореца:

$(function() {
var index = 0, hash = window.location.hash;
if (hash) {
    index = /\d+/.exec(hash)[0];
    index = (parseInt(index) || 1) - 1; // slides are zero-based
}

$('#slideshow').cycle({
    startingSlide: index,
    timeout: 3000,
    after: function(curr,next,opts) {
        window.location.hash = opts.currSlide + 1;
    }
});

});

И демонстрация на уебсайта на Cycle.

person Dylan    schedule 29.03.2014