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

Запрос должен быть не менее 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.

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

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

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

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

 

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


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


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

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

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

GudzonPartner.com

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


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

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

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

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

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


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

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

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

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

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

Книги

Украшения

Сайт от А до Я

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

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

Охрана труда

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

PHP УРОКИ

Услуги

Скрипты

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

SEO

jQuery

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

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

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

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

Видео Курсы

Видео Курс по созданию собственного Информационного Бизнеса в Интернете
Видео Курс по созданию
Информационного Бизнеса в Интернете
Узнать сейчас >>>


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

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


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

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

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

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

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

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

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

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

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

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

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


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

 

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