Cлайд шоу из фотографий

ГлавнаяJava скрипты → Cлайд шоу из фотографий

А сейчас мы отправимся в "кинозал" для просмотра слайд шоу из фотографий с потрясающими эффектами при смене картинок, где я вам покажу и разложу по полочкам оригинальный и уникальный скрипт для автоматического показа слайд шоу.

Данный скрипт слайд шоу имеет большие плюсы и ряд преимуществ перед своими "собратьями". И сейчас я вам докажу:

  • Легко изменяемые размеры самой оболочки "кинозала", и так же под неё ваши фотографии для слайд шоу.
  • Скрипт имеет 109 различных и красивейших переходов для смены кадров, и даже некоторые из них имеют ещё и свои настройки.
  • Буквально каждое фото настраивается на определённый промежуток времени для просмотра и для него прописывается выбранный из списка переход.
  • В слайд шоу фотки добавляются сколько вам угодно, без всяких ограничений.
  • В панели управления имеется легкий переход с автоматического на ручной просмотр, а так же вывод всех картинок в удобном и миниатюрном режиме.
  • Фото в слайд шоу при желании можно сделать кликабельным, т.е. установить на каждую фотографию свою ссылку для перехода на нужный адрес в сети.
  • На каждую картинку, помимо всего прочего, - можно накладывать свой текст, прописав его в коде.

В своём примере (см. выше) я отключил (вырезал) многие элементы из-за ненадобности, вы же когда скачаете слайд шоу бесплатно (ссылка внизу) получите полный комплект.

В скачанном слайд шоу (архиве) лежат: html файл и три ява скрипта, и я вам сейчас покажу где нужно и для чего делать изменения в данном скрипте.

Изменения в коде html

1. Изменение размеров слайд шоу, а так же оформление кнопок и блоков - производятся в стилях, в самом начале кода html: с 12 по 214 строку, и в коде скрипта на: 307-308 строке.

2. Фото слайд шоу - добавляется (удаляется) в коде скрипта начиная с 243 строки (документ html). И здесь же рассмотрим каждый параметр для отображения фотографии:


{source:'images/backgrnd_a.jpg',delay:8,callbefore:'setOLTOut',callafter:'setOLTIn',argafter:'<var><big>текст</big></var><br/><b><em>текст</em></b><br/><dfn>текст<br/>текст,<br/></dfn><b><em>текст</em></b><dfn>.</dfn>',title:'WYSIWYG-Editor',href:'http://ваш-сайт.ru',target:'_blank',transition:'push_right'}

И теперь по порядку:

  • source:'images/backgrnd_a.jpg' - указываете путь до своей картинки;
  • delay:8 - время показа фото, в данном случае 8 секунд;
  • argafter:'<var><big>текст</big></var><br/><b><em>текст</em></b> <br/><dfn>текст<br/>текст, <br/></dfn><b><em>текст</em></b><dfn>.</dfn>' - здесь прописываете свой текст, который будет отображаться на картинке. Изменить оформление текста можно в стилях (в начале документа);
  • href:'http://ваш-сайт.ru' - указываете ссылку на данное фото, при клике которой, посетитель перейдёт на нужный адрес;
  • target:'_blank' - открытие ссылки в новом окне;
  • transition:'push_right' - и последний параметр, который отвечает за эффект перехода на другую картинку. Какое значение пропишите - такой переход и будет.

На этом всё, что не понятно, - спрашивайте!


Скачать Cлайд шоу бесплатно


Поделись ссылкой с друзьями:

Комментарии к статье

Валентина 28-05-2015

Спасибо хозяину за ваш красивый и полезный сайт.
я побродила по вашему сайту и получила большое удовольствие.
Cлайд шоу в Кинозале очень понравился.