|
|
|
|
Слайд шоу изображений 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. Контент - лучший двигатель для продвижения сайта. Как зарабатывают в Интернете? Специальный отчет. Рекомендации по созданию сайта. С чего начать? Скрипт: Приветствие в зависимости от времени суток.
Просмотров: 6173 Поделитесь этой информацией со своими друзьями! Комментарии к этой статье (уроку): Добавить Ваш комментарий: |
Новости сайта Домены 
Google Adsense |
Навигация
Видео Курсы
Последние заметки
Новости сайта
Архив 2016 год: 2015 год: 2014 год: 2013 год: 2012 год: 2011 год: 2010 год: 2009 год: 2008 год: Сайты друзей Наши ссылки
Если Вам понравился  Наши Аттестаты
|
|
Разрешается полное или частичное копирование материалов сайта с обязательным |