Проблемы с пейджером cycle.js

Я пытаюсь создать пейджер для цикла изображений с помощью этого плагина: http://jquery.malsup.com/cycle/pager3.html

but even tho it looks like Im doing it right, my pager wont work. Here is my code:
    /////////////
    // This is my pager on the left side of my slideshow
    /////////////
        <ul class="imageList">
            <?php foreach ($imgs as $img) : ?>
            <li>
                <a href="#">
                    <img src="<?php echo $img[0]; ?>" height="64" width ="64" alt="<?php echo $title; ?>" />
                </a>
            </li>
            <?php endforeach; ?>
        </ul>
    /////////////
    /// here is the slider    
    /////////////
    <?php $imgs = get_post_images(get_the_ID(), 'full'); ?>
    <div class="imageCycler nextImage">
        <?php foreach ($imgs as $title => $img) : ?>
        <div>
            <img src = "<?php echo $img[0]; ?>" alt = "<?php echo $title; ?>" />
            <p class="imageInfo">                       
                <?php echo $img[3]; ?>                  
            <p>
        </div>
            <?php endforeach; ?>
    </div>
    /////////////
    /// here is my jquery 
    /////////////
       $(.'imageCycler').cycle({ 
            fx: 'fade', 
            speed: 300, 
            next: '.nextImage',
            prev: '.prevImage',          
            timeout: 0,
            pager: '.imageList', 
            pagerAnchorBuilder: function(idx, slide) { 
                // return selector string for existing anchor 
                return '.imageList li:eq(' + idx + ') a'; 
            } 
        });

Это тема WordPress, которую я делаю, так что вот что такое php, я просто извлекаю вложения изображений из сообщения и перечисляю их.


jquery jquery-cycle
person rugbert    schedule 10.03.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Основным элементом пейджера в цикле является один контейнер на слайд-шоу. Вы создаете многие из них в своем цикле, и, кроме того, вы пытаетесь добавить элементы LI к тегу P, который является недопустимым html. Выведите пейджер из цикла и используйте правильную структуру html

person charlietfl    schedule 10.03.2012
comment
элемент .imageCycler является единственным контейнером слайд-шоу, а цикл создает отдельные элементы div, содержащие изображения и теги ‹p›. Слайд-шоу работает нормально, когда я нажимаю изображение или следующую кнопку. но проблема в пейджере, в элементе .imageList. цикл создает ‹li› с миниатюрами внутри них. - person rugbert; 11.03.2012
comment
вы по сути повторили то, на что я указывал... ваша структура неверна - person charlietfl; 11.03.2012
comment
на самом деле эти теги P находятся в другом элементе, чем элементы списка. и цикл создает отдельные изображения внутри основного элемента страницы в слайд-шоу. Я понял проблему, хотя есть два разных файла .js, а другой имел функцию пейджера. - person rugbert; 14.03.2012

arrow_upward
0
arrow_downward

Плохо, похоже, что у cycle.js есть два файла js, один из которых содержит базовые функции, а другой (тот, которого у меня не было) содержит функции пейджера.

person rugbert    schedule 13.03.2012