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

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

RSS-лента

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

Создаем галерею изображений с эффектом слайд шоу используя библиотеку jQuery

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

Дата: 2011-11-22

Как создать галерею изображений используя JavaScript.

Сегодня мы научимся создавать галерею изображений, с помощью библиотеки jQuery, а точнее одну из галерей. Библиотека jQuery просто огромна и содержит в себе великое множество скриптов JavaScript с различными эффектами и множество разных галерей изображений.

Живой пример работы галереи изображений (скрипт gallery.js) Вы видите ниже. Здесь содержится 10 различных фотографий, но фотографий можно сделать любое количество, это на Ваше усмотрение. Я использовал фотографии своего родного города Смоленска. Итак, смотрим работу галереи изображений:

 

Как видите внизу идет ряд миниатюр, а выше выводится большое изображение выбранной миниатюры. Кроме того есть функция просмотра в режиме слайд шоу. Для этого Вы можете воспользоваться кнопками Start и Stop. После запуска слайд шоу активируется отображение отсчета времени смены изображений. Я установил 4 секунды, но Вы можете установить любое время смены изображений в своих сайд шоу. Слева отображается порядок смены фотографий (общее количество и порядковый номер на данный момент).

Как в основном окне, так и в панели миниатюр имеются кнопки для перелистывания фотографий. Кроме того, управлять перелистыванием можно и с клавиатуры компьютера, используя кнопки перемещения Влево или Вправо. Запустить или остановить слайд шоу можно с помощью кнопки S на клавиатуре.

Для установки галереи потребуется подгрузка плагинов jQuery. Для этого скачайте архив. В архиве есть пример работы библиотеки файл: index.html, если что то не поймете в этом уроке, Вы всегда можете посмотреть исходный код работы скрипта.

Итак, распаковываем скачанный архив. Считаем, что все файлы у Вас лежат в корневой папке, хотя положить все файлы Вы можете в любую папку сайта, но при этом не забудьте прописать правильный путь до этих файлов.

Файлы: jquery-1.6.2.min.js, gallery.js, gallery.css - это соответственно библиотека jQuery, плагин галереи и таблица стилей оформления. Эти файлы положите в корневую папку Вашего сайта. Так же в корневую папку положите все файлы картинок из архива. Файлы фотографий у Вас конечно же будут свои.

Между тегами <head> и </head> прописываем код Листинга 1.

Листинг 1.

<link rel="stylesheet" type="text/css" href="gallery.css">
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="gallery.js"></script>
<script type="text/javascript">
$(function() {
var galleries = $('.ad-gallery').adGallery();
});
</script>

Это стандартное подключение скриптов и каскадных таблиц стилей CSS, одновременно здесь же мы активируем функцию запуска галереи изображений.

Для вывода галереи на web-странице (между тегами <body> и </body>), в нужном месте вставляем код Листинга 2.

Листинг 2.

<div id="container" align="center">
<div id="gallery" class="ad-gallery" style="border:1px solid black;padding:2px">
<div class="ad-image-wrapper">
</div><hr />
<div class="ad-controls">
</div><hr style="margin-bottom:2px" />
<div class="ad-nav">
<div class="ad-thumbs">
<ul>
<li>
<a href="dnepr.jpg">
<img src="dnepr_mini.jpg" title="Днепр" longdesc="Набережная реки Днепр." class="image0">
</a>
</li>
<li>
<a href="muzey.jpg">
<img src="muzey_mini.jpg" title="Музей" longdesc="Музей Великой отечественной войны." class="image1">
</a>
</li>
<li>
<a href="vokzal.jpg">
<img src="vokzal_mini.jpg" title="Вокзал" longdesc="Железнодорожный вокзал." class="image2">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>

 

Здесь сначала идет обычный стиль оформления блока вывода галереи, а затем перечисление всех фотографий используемых в слайд шоу. Для уменьшения размера кода в Листинге 2 показаны только 3 первые фотографии. Как видите перечисление идет обычным ненумерованным списком. Нумерация начинается с нуля: class="image0"

Добавление дополнительных фотографий и миниатюр происходит простым добавлением блока заключенного в теги <li> </li>:

<li>
<a href="dnepr.jpg">
<img src="dnepr_mini.jpg" title="Днепр" longdesc="Набережная реки Днепр." class="image0">
</a>
</li>

в код Листинга 2. Соответственно с изменением названия новых файлов: <a href="dnepr.jpg">(полноразмерное изображение) и img src="dnepr_mini.jpg"(миниатюра) и последующей нумерацией: class="image0".

 

Примечание: все миниатюры изображений должны быть одной высоты и желательно одной ширины, а «большие» изображения не должны превышать размеры основного окна web-страницы.

Дополнительную настройку работы галереи можно произвести в коде плагина (файл gallery.js). Здесь нам доступны следующие настройки:

  • в 13-ой строке «start_at_index:» указывается с какого изображения начинать просмотр, по умолчанию 0, индекс указывается в файле index.html в значении атрибута class тега img;
  • в 14-ой строке «thumb_opacity:» указывается прозрачность неактивных миниатюр, значения от 0 до 1;
  • в 16-ой строке «animation_speed:» указывается скорость смены изображений одно на другое (в миллисекундах);
  • в 26-ой строке «speed:» указывается время таймера смены изображений в режиме слайд шоу (в миллисекундах);
  • в 33-ей строке «effect:» указывается стиль смены изображений, slide-vert — снизу вверх, fade — медленно исчезает, resize — изменяется в размере, none — сменяется без эффекта, false — запрещает смену изображения;
  • в 34-ой строке «enable_keyboard_move:» указывается реагировать на команды с клавиатуры или нет, true — да, false — нет.

Все мне нравится в работе этого плагина и галереии избражений, но есть один неприятный минус. Вы заметили, что надписи Start, Stop, sek, Foto выполнены по английски. Если Ваш сайт использует кодировку charset=UTF-8, то Вы можете прописать эти надписи по русски (написать Старт, Стоп, сек. ФОТО). Делается это в файле gallery.js.

Но если на Вашем сайте использована кодировка charset=windows-1251 (как у меня), то лучше перестраховаться и написать все эти слова английскими символами, иначе иногда могут возникнуть ошибки в виде "кракозябр", что согласитесь не очень красиво.

Вот собственно говоря и все. Как видите все довольно просто и работает во всех распространенных браузерах.

Скачать архив с исходниками.

Всего Вам доброго.

 

Читайте так же другие наши материалы.

Как изменить DNS сервера у Домена?

Как создать реально работающую модель бизнеса?

Почтовая Рассылка - Главный инструмент Интернет-Бизнесмена. Создание. Управление Продвижение.

Приближение и отдаление изображений с помощью jQuery.

Как практически зарегистрировать Доменное Имя.

 

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


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


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

Комментарии добавил(а): Олег  Гузь,      
Дата: 2011-11-23

Андрей, спасибо за новый JavaScript. Скажи, пожалуйста, а нельзя ли сделать слайд-шоу исключительно из больших фото, убрав всё остальное: мини-фото и сопровождающие надписи стар-стоп и т.д.? Хотелось бы запустить слайд-шоу, в котором фото автономно и медленно меняются. Если это возможно, то может на каком-нибудь занятии продемонстрируешь это? Заранее спасибо! С уважением, Олег

Комментарии добавил(а): Дмитрий
Дата: 2011-11-23

ссылки "архив" и "архив с исходником не работают"

Комментарии добавил(а): Евгений
Дата: 2011-11-23

Хотел скачать архив, выдает какую-то ошибку.

Комментарии добавил(а): Галина
Дата: 2011-11-23

Да,действительно,не работает.

Комментарии добавил(а): АндрейК
Дата: 2011-11-23

Прошу прощения, произошел не большой сбой при закачке, в результате архив с исходниками был поврежден. В настоящее время все исправил. Все работает, скачивайте и пользуйтесь на здоровье :)

Комментарии добавил(а): Инна
Дата: 2011-11-23

Очень красивые фотографии и полезная программа. Большое СПАСИБО, Андрей !

Комментарии добавил(а): Лариса
Дата: 2011-11-24

Спасибо, Андрей, урок замечательный! Все понятно.

Комментарии добавил(а): АндрейК
Дата: 2011-11-24

Олег, один из вариантов такого сайд шоу мы рассматривали здесь: http://www.luksweb.ru/view_post.php?id=284

Комментарии добавил(а): Дина
Дата: 2011-11-24

Спасибо за урок. У меня установлен Гугл Хром. Ваш Popup спрятался за большой снимок.И его почти не видно.

Комментарии добавил(а): Вячеслав
Дата: 2011-11-28

Андрей, спасибо за очередной урок! Просветите, пожалуйста, какой параметр в коде плагина (файл gallery.js) отвечает за прозрачность страницы, на которой размещаем галерею.

Комментарии добавил(а): Спасибо вам огромнейшее я очень-очень долго и
Дата: 2011-12-04

Спасибо вам огромнейшее за проделаную работу! А я уже было впал в отчаяние, что не сделать мне такого у себя на сайте))))))))

Комментарии добавил(а): sid
Дата: 2012-01-19

Подскажите как убрать полоску с описанием картинки?

Комментарии добавил(а): sid
Дата: 2012-01-19

методом тыка за комментировал строчку в ксс .ad-gallery .ad-image-wrapper .ad-image .ad-image-description вроде помогло описание исчезло, просто если не добавлять в тэге img описание к картинке то она вообще не отображалась

Комментарии добавил(а): АндрейК
Дата: 2012-01-19

SID! Очень странно... если Вы не допустили ошибок в коде Листингов 1 и 2, то все работает без всяких комментариев строк. Не знавши всех Ваших действий - подробнее сказать не могу в чем у Вас проблема

Комментарии добавил(а): sid
Дата: 2012-01-24

Спасибо что ответили. Ну собственно и проблемы то особой не было. Мне просто хотелось чтобы на большом фото не было его описания. например как у ВАС на одном из фото "Днепр Набережная реки Днепр" хотелось чтобы этого текста не было, или он был не на фото или сворачивался и его можно было бы вызвать при необходимости

Комментарии добавил(а): Светлана
Дата: 2012-02-29

Здравствуйте! Вы знаете что то я не все поняла. Корневая папка это wp-contene? А в этой папке я положила в папку gallery,всю информацию,что скачала с вашего сайта. Где и как прописать путь для файла? И еще вопрос ,куда надо вставить Листинг 1. и Листинг 2 Помогите пожалуйста.

Комментарии добавил(а): ksevica
Дата: 2012-08-07

Здравствуйте. У меня полноразмерное изображение открывается в новом окне (окошко над миниатюрами остается пустым). Путь к файлам прописан правильно. Подскажите пожалуйста, в чем может быть причина?

Комментарии добавил(а): Владимир
Дата: 2012-10-17

Спасибо больше за приведенный код и комментарии. Все заработало.

Комментарии добавил(а): Геннадий.
Дата: 2012-12-04

Андрей здравствуйте. Все работает но где кирилица, выдает: "Набережная реки Днепр." Пробовал разные кодировки, не помогает. В чем причина?

Комментарии добавил(а): Оксана
Дата: 2012-12-05

А можно сделать чтобы миниатюры справа, а не внизу были? спс

Комментарии добавил(а): Алла
Дата: 2013-02-22

помоите, пожалуйста! ничего у меня не получается( http://avtcrtd.ucoz.ru/index/sjurpriz/0-72 мой ящик pochta125@inbox.ru

Комментарии добавил(а): Алла
Дата: 2013-02-23

как поменять цвет (зеленый на фиолетовый например)

Комментарии добавил(а): Евгений
Дата: 2014-02-25

Для использования русских надписей для Start/Stop, sec можно попробовать применить картинки например с этими надписями на русском и использловать их как ссылки, заключить в тег <a>

Комментарии добавил(а): Евгений
Дата: 2014-02-26

Отличная галерея. Встала отлично, все параметры можно редактировать под собственный сайт

Комментарии добавил(а): АндрейК
Дата: 2016-06-19

Здравствуйте Сергей! Вероятнее всего, Вам нужно правильно прописать пути для ссылок, скриптов и картинок

Комментарии добавил(а): Сергей (mal_250s@mail.ru)
Дата: 2016-06-19

когда вставляю код на главной странице все работает, а когда на пустой страничке из меню то не работает. Подскажите как исправить?!

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

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

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