Сайт
Елисеева
Вячеслава
Четверг, 28.03.2024, 23:58
Приветствую Вас Гость | RSS
Взрослеем!

          


Поиск по сайту

Меню сайта

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Погода
          

Мои школы
СШ №1 г. Ефремова МВИЗРУ ПВО

ГРТУ ПВО

Facebook
Вячеслав Елисеев


Праздники Беларуси
Праздники Беларуси

Главная » ПК и ПО » Мои справки по ucoz » Ucoz и не только

Галерея изображений с эффектом слайд шоу
11.01.2012, 20:55

Интересная статья для сайтостроителей uCoz

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

Дата: 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 (как у меня), то лучше перестраховаться и написать все эти слова английскими символами, иначе иногда могут возникнуть ошибки в виде "кракозябр", что согласитесь не очень красиво.

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

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

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



Поделитесь с друзьями


Категория: Ucoz и не только | Добавил: elislav | Теги: Галерея изображений с эффектом слай
Просмотров: 12167 | Загрузок: 0 | Комментарии: 8
Всего комментариев: 8
1 Иван  
0
Помогите пожалуйста,как сделать комментарии на ucoz?
Ответ: Функцию "Комментарии" может активировать пользователь, имеющий доступ (пароль) к "Панели управления" сайтом (как правило - только админ)

После входа на сайт в качестве админа вверху страницы сайта открывается
админ-бар с функциями: Общее-Управление-Добавление-Пользователи-Мультимедиа-Конструктор-?
Кликаете по "Общее" >> "Вход в панель управления" >> вводите Пароль и Код безопасности.
В левой колонке "Панели управления" расположены все активированные модули. Функция "Комментарии" доступна для модулей: "Новости сайта", "Блог", "Каталог статей", "Каталог сайтов", "Каталог файлов", "Фотоальбомы" и "Доска объявлений".
Включение функции "Комментарии" - на примере "Новости сайта":

Клик по "Новости сайта" >> "Настройки модуля" >> "Использовать функцию "Комментарии" для данного модуля: поставить галочку"

Там же:
Количество комментариев на странице: от 1 до 50
Новые комментарии выводятся: внизу - вверху

Аналогично - для остальных модулей!

2 lusa  
0
Скажите пожалуйста, а как в эту галерею добавить ссылку на изображение в реальном размере, которое открывалось бы в новом окне? Или сделать фото ссылкой? Добавляю и вся галерея слетает..(((
Ответ:
Quote
Добавляю и вся галерея слетает..(((

lusa, логично, ибо в описанных Вами случаях галерея перестаёт быть галереей изображений. smile
P.S. Если сомневаетесь, обратитесь к автору - Андрею Краснокутскому

3 ksevica  
0
А у меня как раз полноразмерное изображение открывается в новом окне, а не там, где должно быть (над миниатюрами окошко остается пустым).
Ответ: elislav
ksevica, дайте, пожалуйста, ссылку на Вашу галерею для проверки правильности кода.

4 ksevica  
0
http://dachnyekhlopoty.ru/load/51-1-0-225. Посмотрите пожалуйста. Я думала, что библиотеки jquery конфликтуют, пыталась отключать одну, ничего не меняется. У вас, смотрю, тоже ucoz-ская библиотека подключена.... Заранее спасибо.
Ответ: elislav ksevica, у Вас ошибки в коде изображений. Внимательно посмотрите Листинг 2 на этой странице.
У Вас для каждого изображения в коде д.б. такие строки:

<li>
<a href="http://dachnyekhlopoty.ru/primer/spokojstvie_v_sadu_1.jpg">
<img src="http://dachnyekhlopoty.ru/primer/spokojstvie_v_sadu_1.mini.jpg" title="Спокойствие в саду" longdesc="Изображение 1" class="image0"></a>
</li>

<li>
<a href="http://dachnyekhlopoty.ru/primer/spokojstvie_v_sadu_2.jpg">
<img src="http://dachnyekhlopoty.ru/primer/spokojstvie_v_sadu_2.mini.jpg" title="Спокойствие в саду" longdesc="Изображение 2" class="image1"></a>
</li>
...
и так далее
А сейчас у Вас такая абракадабра:

<li>
<a href="http://dachnyekhlopoty.ru/primer/spokojstvie_v_sadu_1.jpg">
<img src="http://dachnyekhlopoty.ru/primer/spokojstvie_v_sadu_1.mini.jpg" border="0" alt=""class="image0"></a>
</li>

<li>
<a href="http://dachnyekhlopoty.ru/primer/spokojstvie_v_sadu_2.jpg">
<img src="http://dachnyekhlopoty.ru/primer/spokojstvie_v_sadu_2.mini.jpg" border="0" alt=""class="image1"></a>
</li>
...
и так далее
*Примечание: разумеется "title" и "longdesc" на Ваше усмотрение

После исправления у Вас д.б. вот так
http://elislav.my1.ru/index/spokojstvie_v_sadu/0-106

5 ksevica  
0
Ура! Получилось. Исправила коды, как вы написали в ответе выше.. Но есть одно НО. Если код Листинга 1 вставляю между тегами <head> и </head> галерея так и не работает (полноразмерные фото открываются в новом окне). Если код Листинга 1 вставляю между тегами <body> и </body>, тогда все работает. Спасибо! Спасибо! Спасибо!
P.S. Ваш сайт очень понравился. Ставлю в закладки.
Ответ: elislav Ксения, рад, что всё ok!
С Вашим "...одно НО" не совсем ясно. Вот мой пример
http://elislav.my1.ru/index/spokojstvie_v_sadu/0-106
В поле этой странички (см. скрин http://elislav.my1.ru/images/skrin2.jpg ) код "Листинга 1" вставлен между тегами <head> и </head> и всё прекрасно работает - ещё раз см. http://elislav.my1.ru/index/spokojstvie_v_sadu/0-106 biggrin

6 ksevica  
0
Все понятно. Я пыталась вставить код Листинга 1 не на самой странице добавления материала, а в Управлении дизайном каталога статей на странице материала и комментариев к нему в самом верху между тегами <head> и </head> (скрин: http://dachnyekhlopoty.ru/skrin1.jpg ). Тогда галерея не работает (по крайней мере у меня...). Вставляю код ниже между тегами <body> и </body>, не заключая его в теги <head> и </head> - все работает (скрин: http://dachnyekhlopoty.ru/skrin2.jpg ). Пример: http://dachnyekhlopoty.ru/load/7-1-0-227.
P.S. Код Листинга 1 вставляю на страницу материала и комментариев к нему, чтобы не вставлять его каждый раз при создании новой галереи.
Ответ: elislav: логично! smile

7 sandro  
-1
Здраствуйте помогите пожалуста с установкой слайда!!!!! Я новичек в етом деле!! sad ftp настроил папку скинул в корень сайта . Туда скинул и фото , а куда вставлять html код незнаю!!!! Помогите пожалуста может кто знает ссылку на видеоукок!! Зарание
Благодарен за любой ответ!!
Ответ: elislav sandro, о каком html-коде идёт речь?   Для вывода галереи на web-странице (между тегами <body> и </body>), в нужном месте вставляем код Листинга 2.

8 N_programmer  
1
Спасибо за помощь в создании слайд-шоу. Доступно описано. Красиво получилось! tongue

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Переводчик

Форма входа

IP-адрес и прочее
       измерьте скорость интернета

Наши рейтинги
Этот сайт защищен «Site Guard»

Друзья сайта
  • HELP на sonikelf.ru
  • Сайт Ирины Веренчик
  • Сайт СШ №1 г. Ефремова
  • Мои альбомы на gallery.ru
  • ГРТУ ПВО
  • МВИЗРУ ПВО
  • МОА КВИРТУ ПВО
  • Ветераны ВВКУРЭ ПВО
  • ЭВЗРКУ ПВО
  • Одесский музей западного и восточного искусства
  • Одесский историко-краеведческий музей
  • Олег Соколов - художник, поэт, зачинатель одесского авангарда

  • Сайты Ефремова
        Ефремов   Ефремов  
      Сайт Ефремовского Дома-музея И.А. Бунина

    Информспонсоры

    Обмен WebMoney
             

    Слушаем радио

    Яндекс.Метрика
        Основан 22.09.2009    Copyright Елисеев В.И. © 2024      Сейчас на сайте человек(а) Online Casino
    Бесплатный конструктор сайтов - uCoz