jQuery jCarousel Script

• Може 5, 2024

jQuery направи лесно добавянето на изображения към уебсайтове. Има много скриптове на jQuery, издадени под лицензите на MIT и / или GPL. Повечето от тях са скриптове за плъзгане и възпроизвеждане (plug in), които не изискват познания по програмиране, за да се използват на вашия уебсайт или да се инсталират на сайта на вашия клиент. Може да искате да помислите за добавяне на jQuery скриптове към дизайнерските си услуги.

Един такъв сценарий на jQuery от Ян Соргала е jCarousel. Този плъгин може да има много приложения както за графика, така и за текст. Основната функция на скрипта е да превърта съдържанието хоризонтално или вертикално. Съдържанието може да бъде статично или заредено динамично чрез Ajax, JavaScript, PHP или Flickr. Разбира се, този втори вариант изисква запознаване с тези езици. jCarousel също работи с Thickbox 3, така че изображението с голям размер се отваря в Thickbox, когато щракнете върху миниатюра в карусела.

По-голямата част от кода за скрипта е посочен в секцията Head на уеб страницата. Ще ви трябва библиотеката jQuery и изходния код и файловете за стилове на jCarousel. Това, което е приятно за този plug-in е, че той може да бъде „откъснат“ от CSS, за да има много погледи. Съдържанието, което трябва да се превърта от скрипта, се поставя в основата на уеб страницата в основен UL списък.

Имате няколко опции за конфигуриране на скрипта, включително добавяне на персонализирана анимация и облекчаване. Може да функционира с бутони за автоматично превъртане или навигация. Друга приятна особеност е, че ширината на въртележа се оразмерява автоматично, за да пасне на прозореца на браузъра. Тя може да бъде конфигурирана да показва повече или по-малко изображения в зависимост от размера на браузъра или да бъде конфигурирана да има зададен брой изображения с гъвкаво разстояние между изображенията, ако е необходимо. Можете да имате повече от една въртележка на страница и да дадете на всяка от тях различна кожа.

Интеграцията с фотопоток Flickr и API на Flickr е приятна функция, която не се наблюдава в повечето скриптове. Тествано е да работи в няколко браузъра, включително прословутия Internet Explorer 6.

Може би се питате защо бихте използвали това вместо обикновена gif анимация, която можете да създадете във Photoshop. Основната причина е лекотата на актуализиране на въртележка, след като е инсталирана. По-лесно е да превключвате съдържание в списъка на UL, отколкото да създавате нов gif всеки път, когато трябва да представите различен набор от изображения.

//sorgalla.com/projects/jcarousel/

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