Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

Слайд шоу изображений Merging Image Boxes

Автор: Андрей Краснокутский

Дата: 2013-05-07

Merging Image Boxes with jQuery

Довольно часто на сайте требуется (или хочется) развернуть галерею с изображениями (картинками или фотографиями). Это могут быть фотографии друзей или летнего отдыха, виды любимого города, товары интернет-магазина и т.д. Но в тоже время хочется, чтобы картинки не просто тупо менялись, а менялись с каким то эффектом, хочется сделать слайд шоу из имеющихся фотографий.

"Покопавшись" в Интернете можно найти десятки и сотни подобных галерей изображений и слайд шоу. Совсем недавно я наткнулся на один интересный скрипт Merging Image Boxes созданный с помощью всем известной библиотеки 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.

Контент - лучший двигатель для продвижения сайта.

Как зарабатывают в Интернете? Специальный отчет.

Рекомендации по созданию сайта. С чего начать?

Скрипт: Приветствие в зависимости от времени суток.

 

Просмотров: 6099


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

Разработка полного пакета документов по Охране труда под "КЛЮЧ"
с учетом специфики работы вашей организации. СУОТ.
Сопровождение организаций по Охране труда
(очное или дистанционное).

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"




Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

ОХРАНА ТРУДА

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео курс по созданию сайтов: Сайт от А до Я
С нами сделать сайт
сможет даже Ребёнок!
"Сайт от А до Я"
Узнать сейчас >>>


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Когда нужно пересматривать инструкции по Охране труда

Что должна содержать инструкция по охране труда?

Виды инструкций по Охране труда

Статистический отчет Форма № 7-травматизм "Сведения о травматизме на производстве и профессиональных заболеваниях"

Какие отчеты необходимо сдать Специалисту по охране труда за год

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

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

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT