JQuery JCarousel Script

• May 7, 2024

JQuery сделал добавление изображений на веб-сайты легкой задачей. Существует много скриптов jQuery, выпущенных по лицензиям MIT и / или GPL. Большинство из них представляют собой сценарии «plug-and-play» (plug-and-play), которые не требуют каких-либо знаний в области программирования для использования на вашем веб-сайте или установки на сайте вашего клиента. Возможно, вы захотите добавить сценарии jQuery в свои сервисы проектирования.

Одним из таких jQuery-скриптов Яна Соргаллы является jCarousel. Этот плагин может иметь много приложений для графики и текста. Основная функция скрипта - прокрутка контента по горизонтали или вертикали. Контент может быть статическим или динамически загружаться через Ajax, JavaScript, PHP или Flickr. Конечно, этот второй вариант требует знакомства с этими языками. jCarousel также работает с Thickbox 3, так что изображение большого размера открывается в Thickbox при щелчке миниатюрного изображения в карусели.

Большая часть кода для скрипта приведена в разделе «Голова» веб-страницы. Вам понадобится библиотека jQuery, исходный код jCarousel и файлы таблиц стилей. Что приятно в этом плагине, так это то, что он может быть «очищен» от CSS, чтобы иметь много образов. Содержимое, которое будет прокручиваться сценарием, помещается в основной части веб-страницы в основной список UL.

У вас есть несколько вариантов настройки скрипта, включая добавление пользовательской анимации и замедление. Может работать с автопрокруткой или навигационными кнопками. Еще одна приятная особенность заключается в том, что ширина карусели автоматически изменяется в соответствии с окном браузера. Он может быть настроен на отображение большего или меньшего количества изображений в зависимости от размера браузера или настроен на заданное количество изображений с гибким интервалом между изображениями по мере необходимости. Вы можете иметь более одной карусели на странице и дать каждому из них свой скин.

Интеграция с фотопотоком Flickr и Flickr API - хорошая функция, не встречающаяся в большинстве сценариев. Он был протестирован для работы в нескольких браузерах, включая пресловутый Internet Explorer 6.

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

//sorgalla.com/projects/jcarousel/

Видео инструкция: jQuery Tutorial #6 - Building a jQuery Image Slider (May 2024).