Слайд-шоу цикла jQuery Startingslide

У меня есть галерея миниатюр каменной кладки, а миниатюры ссылаются на слайд-шоу jQuery Cycle. Я хотел бы сделать так, чтобы когда вы нажимаете на миниатюру, она переходила к слайд-шоу, начиная с этого миниатюрного изображения. Я пробую опцию "startinslide" цикла. Кроме того, сайт создан на 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 ваше слайд-шоу фактически запускается. Опция startSlide здесь равна 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="/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