Функция циклического пейджера jQuery, использующая существующие эскизы для навигации

ProgramBox

Функция циклического пейджера jQuery, использующая существующие эскизы для навигации

Post author:admin
Запись опубликована:8 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery #cycle #portfolio

#javascript #jquery #цикл #Портфолио

Вопрос:

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

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

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

 <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

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

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

1. Привет, я не совсем уверен, как вы хотите сделать слайд-шоу. Вы хотите, чтобы основное изображение в DIV «слайд-шоу» менялось при наведении курсора мыши на миниатюру или при каждом нажатии на нее? Предположительно, из вашего описания вы не хотите, чтобы изображение запускалось по таймеру, как это происходит в данный момент.

2. Привет, Нил. Я хочу, чтобы первый слайд отображался при загрузке страницы, а затем продвигался, когда пользователь нажимает на любой из других эскизов. Я хочу, чтобы миниатюре активного слайда присвоили новый класс («активный» или что-то подобное), чтобы я мог оформить его с другой рамкой. И вы правы, я не хочу, чтобы слайды повторялись, как у меня сейчас. Я просто установил это на место, пока устранял некоторые неполадки.

Ответ №1:

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

1. Спасибо, totoff. На самом деле я просмотрел все демо-версии пейджера на сайте malsup. Честно говоря, я могу сделать из них орел или решку. Я полный новичок в jQuery. Я бы хотел, чтобы это заработало, но у меня такое чувство, что это выше моих сил.

Ответ №2:

удалите все разделы, которые вы вложили в свой контент для циклирования (дочерние элементы div#slideshow. они препятствуют работе cycle, поскольку скрипт циклирует все в пределах ОДНОГО div).
удалите p.credit по той же причине. в противном случае скрипт зациклит его, и вы столкнетесь с проблемой, если у вас нет подходящего эскиза (см. 3.)
убедитесь, что количество эскизов {*t.jpg } точно соответствует количеству изображений в {div#slideshow}. в этом суть, благодаря которой это работает. несоответствие приводит к неработоспособности скрипта.
используйте в точности разметку jquery из демонстрации и замените {pager: ‘#nav’,} на {pager: ‘#slidenav’,}

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

1. Totff: Чувак, я не знаю, как тебя отблагодарить. Это работает как чемпион. Мне все еще нужно провести некоторое тестирование IE, и я выясню, что делать с содержимым подписи позже. Должно быть простое исправление. Рабочая страница размещена по указанному выше URL. Серьезно… Спасибо. Это огромно.