Галерия от снимки на сайта си (JQuery)
В този урок ще ви покажа как да създадете онлайн галерия от изображения за вашия сайт за посетителите, като кликнете върху умалено изображение може да видите всяка снимка в голям размер. И без презареждане на страницата! Снимки показват автоматично с Fade!
Ние ще бъдем в района на страницата на галерии с изображения на миниатюрни и област, в която ние ще покаже изображението в по-голям мащаб. Кликвайки върху умаленото изображение, посетителят ще види, съответстваща голямо изображение в тази област. Изображението ще бъде показан за известно време, създаване на анимация ефект, и предишното изображение ще бъде в този момент да се разтвори.
Се справят с подобна задача е проста достатъчно, ако ние прилагаме библиотечните функции на JQuery. По този начин ние ще правим с вас.
Но преди да пишете Java Script код ние трябва да мине през няколко подготвителни стъпки.
На първо място, трябва да се подготви по-голям. Ние ще имаме два вида изображения: миниатюри и големи изображения. Аз създадох папка «IMG», който е създал още 2 папки: «голям» и «малки». В «голям» папката съм спасен големи изображения (аз ги всички имат приблизително със същия размер в ширина и височина, някъде 500px на 500px). В папката «малки» са миниатюри на същите изображения (размерите им също трябва да са едно и също. Когато говоря, това означава, че разликата в 2-3 пиксел не играе много по-важно).
Можете да използвате моя образ, за да изтеглите файл от източник, или да създадете една и съща структура папка и се връща вашите изображения, създаване на вече собствена галерия.
На второ място, ние трябва да се създаде HTML-файл, да създавате в него оформлението на страницата от нашата галерия и се свържете с файл CSS-файл (стил лист).
Нека сега да направите това.
Сега ние пише съдържанието на този файл.
Между тагове «тяло» се съхранява с Разделение «обвивка» идентификатор. Той ще съдържа два основни елемента: заглавна маркери, в който ще се намира на горния и DIV с идентификатор «съдържание», който ще се намира цялата ни галерия.
Div «съдържание» Разделение ще съдържа идентификатор «Основната», който ще се насочи към картината; Разделение с идентификатор «Галерия», където миниатюрата от нашия имидж и друг DIV с идентификатор «снимка на задачите». Div с идентификатор «снимка», докато тя е празна, но ще бъдат показани в галерията в неговите големи изображения, съответстващи на миниатюрите.
Тук, по принцип, и всички. всички по-горе код ще изглежда по следния начин:
Галерия с JQuery
Свързани статии