Плагин Featured Content Glider для jQuery
Еще один плагин для демонстрации слайдов. Содержимое отдельных кадров помещается в контейнер с уникальным ID. Контейнеры для отдельных кадров должны иметь одинаковое значение атрибута class. Для создания панели навигации в еще один контейнер с уникальным ID помещаются ссылки на отдельные кадры слайдшоу.
Для начала подключим в разделе head HTML-страницы три файла:
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="featuredcontentglider.css" />
<script type="text/javascript" src="featuredcontentglider.js">
<link rel="stylesheet" type="text/css" href="featuredcontentglider.css" />
<script type="text/javascript" src="featuredcontentglider.js">
HTML:
<div id="canadaprovinces" class="glidecontentwrapper">
<div class="glidecontent">
Glide content 1 here
</div>
<div class="glidecontent">
Glide content 2 here
</div>
<div class="glidecontent">
Glide content 3 here
</div>
</div>
<div id="p-select" class="glidecontenttoggler">
<a href="#" class="prev">Prev</a>
<a href="#" class="toc">Page 1</a> <a href="#" class="toc">Page 2</a> <a href="#" class="toc">Page 3</a>
<a href="#" class="next">Next</a>
</div>
<div class="glidecontent">
Glide content 1 here
</div>
<div class="glidecontent">
Glide content 2 here
</div>
<div class="glidecontent">
Glide content 3 here
</div>
</div>
<div id="p-select" class="glidecontenttoggler">
<a href="#" class="prev">Prev</a>
<a href="#" class="toc">Page 1</a> <a href="#" class="toc">Page 2</a> <a href="#" class="toc">Page 3</a>
<a href="#" class="next">Next</a>
</div>
JavaScript:
<script type="text/javascript">
featuredcontentglider.init({
gliderid: "canadaprovinces", // ID of main glider container
contentclass: "glidecontent", // Shared CSS class name of each glider content
togglerid: "p-select", // ID of toggler container
remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
selected: 0, //Default selected content index (0=1st)
persiststate: false, //Remember last content shown within browser session (true/false)?
speed: 500, //Glide animation duration (in milliseconds)
direction: "downup", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
autorotate: true, //Auto rotate contents (true/false)?
autorotateconfig: [3000, 2] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})
</script>
featuredcontentglider.init({
gliderid: "canadaprovinces", // ID of main glider container
contentclass: "glidecontent", // Shared CSS class name of each glider content
togglerid: "p-select", // ID of toggler container
remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
selected: 0, //Default selected content index (0=1st)
persiststate: false, //Remember last content shown within browser session (true/false)?
speed: 500, //Glide animation duration (in milliseconds)
direction: "downup", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
autorotate: true, //Auto rotate contents (true/false)?
autorotateconfig: [3000, 2] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})
</script>
Как видите, мы должны определить несколько параметров для управления слайдшоу:
- gliderid - ID контейнера всех кадров
- contentclass - имя класса отдельных кадров
- togglerid - ID контейнера меню навигации
- remotecontent - позволяет загружать кадры слайдшоу из внешнего файла на сервере, используя AJAX
- selected - порядковый номер выбранного по умолчанию кадра (0 - первый кадр)
- persiststate - запоминать (true) или нет (false) последний показанный кадр
- speed - продолжительность в миллисекундах эффекта анимации при смене кадров
- direction - определяет, как кадры будут сменять друг друга: “updown”, “downup”, “leftright” или “rightleft”
- autorotate - разрешает (true) или запрещает (false) автоматическую смену кадров
- autorotateconfig - если autorotate=true, задает интервал в миллисекундах между сменами кадров и количество полных циклов перед остановкой слайдшоу
Можно улучшить внешний вид меню навигации, используя CSS
<link rel="stylesheet" type="text/css" href="cssbuttonstoggler.css" />
и два изображения: square-gray-left.gif и square-gray-right.gif.
Gambler:
А кто знает, что нужно сделать, чтобы кадры не выезжали, а проявлялись?
26 Апрель 2009, 15:00admin:
Gambler, для смены кадров используется jQuery-функция animate():
$target.animate(endpoint, config.speed)
Измените плагин, чтобы использовать другие эффекты.
Функция animate
animate(params, speed, easing, callback);
Здесь:
* params – свойства, которые участвуют в анимации в виде пар {ключ: значение}. Например: {height: “show”} или {opacity: 50, width: 100, height: 200}.
* speed – скорость в миллисекундах.
* easing – замедлениие анимации (замедляется ли к концу, “easein”, или, наоборот, ускоряется, “easeout”. Дополнительные типы доступны в модулях расширения).
* callback – функция, которая будет вызвана после завершения анимации.
Метод animate манипулирует только теми атрибутами, для которых можно выставить числовое значение (такие как height, weight, opacity, top и т.п.).
Метод animate является основой большинства, если не всех, эффектов jQuery и плагинов. Например, jQuery предлагает следующие методы для показа и скрытия элементов:
* show([speed[, callback]]) – показать элемент;
27 Апрель 2009, 11:03* hide([speed[, callback]]) – скрыть элемент;
* fadeIn(speed[, callback]) – показать элемент путем изменения его прозрачности;
* fadeOut(speed[, callback]) – скрыть элемент путем изменения его прозрачности;
* slideDown(speed, callback) – показать элемент, спустив его сверху;
* slideUp(speed, callback) – показать элемент, подняв его снизу;
qpeo:
просматриваю в ИЕ8 этот пример, и тут такая каша..
18 Июнь 2009, 19:44admin:
просматриваю в ИЕ8 этот пример, и тут такая каша..
18 Июнь 2009, 23:09Я не удивлен. MS много лет нарушал стандарты, а потом (вдруг!) решил, что надо бы соблюдать. Думаю, надо посмотреть на официальном сайте плагина последнюю версию.