Слайд шоу изображений Merging Image Boxes
Автор: Андрей Краснокутский
Дата: 2013-05-07 Merging Image Boxes with jQuery
Довольно часто на сайте требуется (или хочется) развернуть галерею с изображениями (картинками или фотографиями). Это могут быть фотографии друзей или летнего отдыха, виды любимого города, товары интернет-магазина и т.д. Но в тоже время хочется, чтобы картинки не просто тупо менялись, а менялись с каким то эффектом, хочется сделать слайд шоу из имеющихся фотографий.
"Покопавшись" в Интернете можно найти десятки и сотни подобных галерей изображений и слайд шоу. Совсем недавно я наткнулся на один интересный скрипт Merging Image Boxes созданный с помощью всем известной библиотеки jQuery, о котором и расскажу в этом уроке.

Чтобы понять и четко представлять, что мы получим в результате давайте сначала посмотрим демо презентацию работы скрипта Merging Image Boxes.
Далее скачиваем архив с исходниками Merging Image Boxes. И начинаем разбираться с установкой скрипта на сайт.
После распаковки архива получаем три папки:
1-я папка: css - здесь лежит файл каскадной таблицы стилей, который Вы можете корректировать на свое усмотрение (если не нравится внешнее оформление слайд шоу);
2-я папка: images - здесь находятся графические файлы (фотографии) галереи. Обратите внимание, что каждая фотография должна быть представлена в 2-х размерах: 750х500 пикселей (нормальный размер) и 125х125 пикселей (уменьшенный вариант). В данную папку (images) Вы и помещаете свои фотографии, естественно удалив старые, ну и конечно же не забудьте переименовать свои фотографии.
3-я папка: js - здесь как раз и лежат файлы скрипта, их трогать не нужно!
Все три папки (css, images, js) нужно загрузить на свой сервер. По умолчанию загружаем все в корневую папку сайта.
Кроме того еще имеются два файла:
bg.jpg - это файл фонового изображения, его Вы можете заменить на свой фон. Данный файл также загружаете на свой сервер в корень сайта.
index.html - демонстрационный файл скрипта. Откройте данный файл в текстовом редакторе, типа Notepad++, данный редактор нумерует строки кода, поэтому дальше я буду просто указывать номера строк нужного участка кода. Скопируйте отсюда код, вставьте на свою, нужную Вам web-страницу и загрузите на сервер.
Давайте разберем основные моменты кода из файла index.html и возможные настройки.
Между тегами <head> </head> (строки 10 - 40) находится стандартное подключение скрипта к web-странице и код стиля оформления, так что просто копируем и вставляем в свой файл.
Участок кода (строки 46 - 77) отвечает за отображение миниатюрных изображений, а также позицию размещения каждого изображения в отдельности. Корректируя цифры можно смещать каждую фотографию в нужную Вам сторону.
Участок кода (строки 80 - 395) и есть сам скрипт, к которому подключаются внешние файлы из папки js. Здесь трогать (изменять) ничего не нужно, конечно если Вы не очень сильны в программировании - просто тупо скопируйте и вставьте куда требуется.
Вот собственно и все, загружаем обновленные папки и файлы на сервер наслаждаемся слайд шоу.
Всего доброго!!!
Читайте также:
Приближение и отдаление изображений с помощью jQuery.
Контент - лучший двигатель для продвижения сайта.
Как зарабатывают в Интернете? Специальный отчет.
Рекомендации по созданию сайта. С чего начать?
Скрипт: Приветствие в зависимости от времени суток.
Просмотров: 7067
|