JQuery Cycle Pager функция с использованием существующих миниатюр для навигации - PullRequest
Новая
       29

JQuery Cycle Pager функция с использованием существующих миниатюр для навигации

2 голосов
/ 01 мая 2011

Я работаю над сайтом портфолио для бизнеса по дизайну освещения моей жены. Плагин jQuery в цикле, кажется, обеспечивает нужную мне функциональность, но даже после просмотра примеров на сайте Майка Алсупа я в тупике. На самом деле, у меня просто нет фона с JavaScript, чтобы справиться с этим самостоятельно.

Я хочу создать слайд-шоу, управляемое функцией пейджера, используя миниатюры для навигации. Основные слайды и миниатюры - это совершенно разные пропорции (для поддержания макета), поэтому я не могу использовать цикл для создания миниатюр для себя. Слайды включают изображение и подпись. Я хотел бы сохранить как можно большую часть существующей разметки.

Вот содержание слайд-шоу: 

<div id="slideshow" />
        <div class="first">
            <img src="../_/img/projects/shootingstar-1.jpg" alt="" />
            <p class="credit">caption here</p>
        </div>
        <div>
            <img src="../_/img/projects/shootingstar-2.jpg" alt="" />
            <p class="credit">caption here</p>
        </div>
        <div>
            <img src="../_/img/projects/shootingstar-3.jpg" alt="" />
            <p class="credit">caption here</p>
        </div>
        <div>
            <img src="../_/img/projects/shootingstar-4.jpg" alt="" />
            <p class="credit">caption here</p>
        </div>
        <div>
            <img src="../_/img/projects/shootingstar-5.jpg" alt="" />
            <p class="credit">caption here</p>
        </div>

Вот миниатюра / навигационный контент. Я попытался использовать согласованное соглашение об именах для изображений: 

<div id="slidenav">
        <li><a href="#"><img src="../_/img/projects/shootingstar-1t.jpg" alt="" /></a></li>
        <li><a href="#"><img src="../_/img/projects/shootingstar-2t.jpg" alt="" /></a></li>
        <li><a href="#"><img src="../_/img/projects/shootingstar-3t.jpg" alt="" /></a></li>
        <li><a href="#"><img src="../_/img/projects/shootingstar-4t.jpg" alt="" /></a></li>
        <li><a href="#"><img src="../_/img/projects/shootingstar-5t.jpg" alt="" /></a></li>
    </div>

И, наконец, мой стиль, на случай, если это поможет каким-то образом: 

#slidenav {display: block; float: right; width: 200px;}
#slidenav li {list-style: none; float: left;}
#slidenav li img {padding: 2px; border: 1px solid #999; margin: 0 0 8px 8px;}
#projectcopy {display: block; float: right; width: 220px;}
#projectcopy p {font-size: 12px; color: #666; line-height: 16px; margin: 0 10px 20px 16px; text-align: right;}
#projectcopy ul {list-style: none; margin: 0 10px 20px 16px;}
 #projectcopy ul li {font-size: 11px; color: #666; line-height: 14px;  text-align: right; margin-bottom: 10px;}

У меня есть пример, размещенный здесь:

http://pritchardlighting.com/nova/portfolio/sample-project.html

Вы можете видеть, что в данный момент у меня просто установлен простой цикл на слайдах. Пожалуйста, игнорируйте беспорядок. Очевидно, это все еще в dev.

Я был бы очень признателен за любую помощь. Это должно быть то, что другие пытались сделать. Мне просто трудно пробираться через примеры, которые я видел до сих пор. Все они предполагают (справедливо) базовое понимание JS, которым я просто не обладаю.

Ответы [ 2 ]

3 голосов
/ 01 мая 2011

см. для демонстрации , чтобы получить ответ на свой вопрос:

1 голос
/ 02 мая 2011
  1. удаляет все div, которые вы обернули вокруг вашего контента, для циклического воспроизведения (дочерние элементы div # слайд-шоу. Они не позволяют циклу работать, так как скрипт циклически повторяет все в ОДНОМ div).
  2. удалить p.credit по той же причине. в противном случае сценарий циклически повторяется, и вы сталкиваетесь с проблемами, если у вас нет соответствующей миниатюры (см. 3.)
  3. убедитесь, что количество миниатюр {* t.jpg} точно соответствует числу img в {div # slideshow}. это то, что заставляет его работать. несоответствие приводит к неработающему сценарию.
  4. используйте именно разметку jquery из демо и замените {pager: '#nav',} на {pager: '#slidenav',}

если все еще не работает, проверьте с помощью firebug, загружается ли скрипт. если да, попробуйте сначала запустить цикл {div # slideshow}, прежде чем переходить к связанным эскизам.

...