Сегодня мы научимся создавать галерею изображений, с помощью библиотеки 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 (как у меня), то лучше перестраховаться и написать все эти слова английскими символами, иначе иногда могут возникнуть ошибки в виде "кракозябр", что согласитесь не очень красиво.
Вот собственно говоря и все. Как видите все довольно просто и работает во всех распространенных браузерах.
Скачать архив с исходниками.
Всего Вам доброго.
ftp настроил папку скинул в корень сайта . Туда скинул и фото , а куда вставлять html код незнаю!!!! Помогите пожалуста может кто знает ссылку на видеоукок!! Зарание 
