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

Это описание скрипта, который позволяет организовать слайдшоу с эффектом вертикальных жалюзи. Скрипт разработал Peter Gehrig.
Страница скрипта: http://www.fabulant.com/downloadcenter/imglamellar3/imglamellar3.html

Конфигурация

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

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

Пример:

var pictures = [
    { src : 'images/image1_big.jpg',
      msg : 'Норвежский остров',
      url : 'http://www.ruseller.com'
    },
    { src : 'images/image2_big.jpg',
        msg : 'Картинг — это классно!',
        url : 'http://www.ruseller.com'
    },
    { src : 'images/image3_big.jpg',
        msg : 'Картинг — лучшее хобби!',
        url : 'http://www.ruseller.com'
    },
    { src : 'images/image4_big.jpg',
        msg : 'Рука на клавиатуре',
        url : 'http://www.ruseller.com'
    },
    { src : 'images/image6_big.jpg',
        msg : 'Шахматы',
        url : 'http://www.ruseller.com'
    }var pictures = [
    { src : 'images/image1_big.jpg',
      msg : 'Норвежский остров',
      url : 'http://www.ruseller.com'
    },
    { src : 'images/image2_big.jpg',
        msg : 'Картинг — это классно!',
        url : 'http://www.ruseller.com'
    },
    { src : 'images/image3_big.jpg',
        msg : 'Картинг — лучшее хобби!',
        url : 'http://www.ruseller.com'
    },
    { src : 'images/image4_big.jpg',
        msg : 'Рука на клавиатуре',
        url : 'http://www.ruseller.com'
    },
    { src : 'images/image6_big.jpg',
        msg : 'Шахматы',
        url : 'http://www.ruseller.com'
    }
];

Опции конфигурации

Данный скрипт имеет следующие опции конфигурации:

  • target_url: в каком окне открывается ссылка, привязанная к изображению("_blank", "_top", "_self", "_parent" или "ИмяВашегоФрейма")
  • x_slices: количество ламелей жалюзи
  • slideshow_width: ширина слайдшоу — все изображения должны быть одного рамера
  • slideshow_height: общая высота слайдшоу
  • message_height : высота строки для подписи под изображением
  • pause: пауза перед переключением на следующее изображение в секундах

Пример:

// способ открытия ссылки ("_blank", "_top", "_self", "_parent" или "ИмяВашегоФрейма")
var target_url="_blank"

// количество ламелей жалюзи.
var x_slices=8

// ширина слайдшоу
var slideshow_width=400

// высота слайдшоу
var slideshow_height=300

// высота строки сообщений
var message_height=17

// пауза перед сменой изображения (секунды)
var pause=1

CSS

Стиль подписи под изображением может быть установлен с помощью CSS

Пример:

<style>
.messagestyle{
	font-family:Arial;
	font-size:11px;
	color:white;
	background-color:#888888;
	text-align:center;
	position:absolute;
	bottom:0px;
	vertical-align:middle;
	margin:0px;
	line-height:15px;
	height:17px;
}

</style>

Включение файла slideshow-lamellar.js

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

Пример:

<script src="/submitted-scripts/slideshow-lamellar/js/slideshow-lamellar.js"></script>

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.dhtmlgoodies.com/index.html?whichScript=slideshow-lamellar
Перевел: Сергей Фастунов
Урок создан: 29 Июля 2010
Просмотров: 41125
Правила перепечатки


5 последних уроков рубрики "Для сайта"

  • Эффекты блочного раскрытия

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

  • 15 полезных .htaccess сниппета для сайта на WordPress

    Если вы хотите существенно повысить уровень безопасности вашего сайта на WordPress, то вам не избежать конфигурации файла .htaccess. Это позволит не только уберечься от целого ряда хакерских атак, но и организовать перенаправления, а также решить задачи связанные с кэшем.

  • 20 бесплатных тем для WordPress в стиле Material Design

    Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.

  • 20 сайтов с креативным MouseOver эффектом

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

  • 45+ бесплатных материалов для веб дизайнеров за август 2016

    Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.

^ Наверх ^