Създаване на галерия от снимки от ефекта на слайд шоу с помощта на JQuery библиотеката

Жив пример за галерията на работа на изображението (скрипт gallery.js) можете да видите по-долу. Той съдържа 10 различни снимки, но снимките могат да бъдат неограничен брой, това е по ваша преценка. Използвах снимки на родния си град Смоленск. Така че, да гледате галерия на снимката:

Както и в главния прозорец, и лентата с инструменти на умалените има бутони, за да преминете през снимките. Освен това, обръщане може да управлява с клавиатурата на компютъра, използвайки левия или десния бутон. Началото и края на слайд шоу, можете да използвате бутона S на клавиатурата.

За да инсталирате галерията трябва да качите плъгините JQuery. За да направите това, изтеглете архива. Архивът е пример на файла на библиотека: index.html. ако нещо не разбира този урок, винаги можете да видите изходния код на скрипта.

Така че разопаковането сваления архив. Ние вярваме, че всички файлове, които се намират в главната папка, но слагам всички файлове, които могат в някоя папка на обекта, но не забравяйте да се регистрирате правилния път до файловете.

Файлове: JQuery-1.6.2.min.js. gallery.js. gallery.css - са, съответно, JQuery библиотека. Галерия плъгин и трапезни дизайн стилове. Тези файлове са поставени в основната папка на вашия сайт. Просто сложете в главната папка на всички файлове от архив изображения. фото файлове, които със сигурност ще имат свои собствени.

Това е стандарт за свързване на скриптове и каскадни стилове CSS, докато тук ние ще се активира функцията, която стартира галерията от снимки.

За да се покаже снимката на уеб-страницата (между и ), На точното място, въведете кода в Обява 2.

Тук за пръв път е нормален стил на изходния блок на галерията, а след това се прехвърля на всички снимки, използвани в слайд шоу. За да се намали размера на кода в Обява 2 показва само 3 първите снимки. Както можете да видите на трансфера е обикновени неподредените списъци. Номерацията започва с нула: клас = "Изображение0"

Поставянето на допълнителни снимки и миниатюри се случва само чрез добавяне на блока затворен в таговете

Кодът на Обява 2. Съответно, с промяната на имената на новите файлове: (Снимката) и IMG SRC = "dnepr_mini.jpg" (миниатюра) и последващото номерация: клас = "Изображение0".

Забележка: Всички миниатюри трябва да са на същата височина и за предпочитане със същата ширина, и "големи" образи не трябва да надвишава размера на основния прозорец на уеб-страницата.

Допълнителна конфигурация галерия може да се работи в кода за плъгин (File gallery.js). Тук имаме следните опции:

Всичко ми харесва в този плъгин и галерия izbrazheny, но има един неприятен недостатък. Забелязахте ли, че надписа Start. Стоп. сек. Foto направени на английски език. Ако сайтът Ви използва за кодиране на набор знаци = UTF-8. можете да се регистрирате надписи на руски език (напиши Започнете. Стоп. sek.FOTO). Това се прави с gallery.js файл.

Но ако вашият сайт използва кодиране на набор знаци = прозорците-1251 (като мен), това е най-добре да играят на сигурно и пишат тези думи английски букви, или понякога грешки могат да се появят под формата на "безсмислици", че ще се съгласите, не е много хубаво.

Това е всъщност всичко. Както можете да видите, че е доста проста и работи на всички най-популярните браузъри.

Изтеглете архива с изходния код.

Вижте също другите ни материали.

Как да променя DNS сървъра на домейна?

Как да се създаде реален бизнес модел на работа?

Увеличаване и намаляване на изображенията с помощта на JQuery.

Подобно на практика да регистрират име на домейн.

HTML уроци

CSS класове

статии

инструменти

Уебсайт шаблони

книги

декорация

Сайт от А до Я

Правете пари онлайн

Изневяра в Интернет

охрана на труда

МОДУЛНА ШАБЛОН

PHP ШКОЛИ

услуги

скриптове

SEO

JQuery

Специални условия на труд (югоизток) - ARM

Интернет система за плащане

Photoshop уроци

секретна секция

При нас направи сайта
Детето може дори да!
"Сайт А до Я"
Разберете сега >>>

Искате ли да спечелите?
2 Urovnevaja
Партньорска програма!
Присъединете се сега.

Модулната модел: Луксозен червено кадифе

модулен модел черпене на: Слънчева енергия

Модулната модел: Сини рози

Модулната модел: водопад

Модулната модел: Орхидеи

Регистрация на домейн

"PK" LyuksStroy "

Ако ви харесва
нашия сайт, създаден
Нашата връзка. и
Вземете подаръци.