Site icon Vavik96

Слайд-шоу с эффектом жалюзи

admin

Этот скрипт был представлен Питером Джехригом на сайте www.fabulant.com. Исходный скрипт находиться по адресу: http://www.fabulant.com/downloadcenter/imglamellar3/imglamellar3.html. Вы можете скачать сразу весь скрипт Zip file.

Параметры конфигурации.

Массив изображений.

Чтобы использовать этот скрипт, Вы должны создать массив, содержащий изображения с заголовками, а также URL адреса для перехода к ним.

var pictures = [
  { src : 'images/image1_big.jpg',
   msg : 'Picture from a Norwegian island',
   url : 'http://www.dhtmlgoodies.com'
  },
  { src : 'images/image2_big.jpg',
    msg : 'Gokart is fun',
    url : 'http://www.dhtmlgoodies.com'
  },
  { src : 'images/image3_big.jpg',
    msg : 'Gokart is fun',
    url : 'http://www.dhtmlgoodies.com'
  },
  { src : 'images/image4_big.jpg',
    msg : 'Me at the keyboard',
    url : 'http://www.dhtmlgoodies.com'
  },
  { src : 'images/image5_big.jpg',
    msg : 'Somewhere in Europe',
    url : 'http://www.dhtmlgoodies.com'
  },
  { src : 'images/image6_big.jpg',
    msg : 'My chess set',
    url : '#'
  } ];

 

Этот скрипт имеет следующие доступные настройки:

  1. Target_url: В каком окне открывается ссылка на изображения («_blank», «_top», «_self», «_parent» или «ИмяВашегоФрейма»);
  2. X_slices: Количество ламелей (кусочков);
  3. Slideshow_width: Ширина слайд-шоу – обратите внимание, что все фотографии должны быть одинакового размера;
  4. Slideshow_height: Общая высота слайд-шоу;
  5. Message_height: Высота надписи под фотографиями;
  6. Pause: Пауза между показом фотографий в секундах.

Пример:

// target of the picture-links ("_blank", "_top", "_self", "_parent" or "nameOfYourFrame") var target_url="_blank"
// number of lamellas.
var x_slices=8

// width of slideshow
var slideshow_width=400

// height of slideshow
var slideshow_height=320

// height of messagebox
var message_height=17

// pause beween the pictures (seconds)
var pause=1

 

CSS.

Заголовок, расположенный под картинкой, может формироваться с помощью CSS.

Пример:

<style type="text/css">
.messagestyle{
  font-family:Arial;
  font-size:11px;
  color:white;
  background-color:#888888;
  text-align:center;
  position:absolute;
  bottom:0px;
  vertical-align:middle;
  margin:0px;
}

Подключаем файл slideshow-lamellar.js.

После того, как Вы определили файлы с  изображениями, а также параметрами конфигурации, Вы должны подключить файл slideshow-lamellar.js.

Пример:


<script src="/submitted-scripts/slideshow-lamellar/js/slideshow-lamellar.js"></script>
Демо    Скачать

Источник: www.dhtmlgoodies.com.
Перевод:  explorer-soft.com.

Exit mobile version