Плагин jQuery Cycle: один пейджер для управления несколькими слайд-шоу на странице - PullRequest
Новая
       5

Плагин jQuery Cycle: один пейджер для управления несколькими слайд-шоу на странице

2 голосов
/ 09 июня 2010

У меня на странице (изображения) установлен плагин цикла с пейджером для управления горизонтальным слайдом. Моя проблема заключается в том, что существует прозрачное наложение, которое должно располагаться над частью изображений для некоторого текста, относящегося к каждому изображению, но скорее будет иметь это с другим эффектом перехода для этого, чтобы оно не скользило слева. Могу ли я настроить показ слайдов, каждый из которых содержит 3 фрагмента соответствующего контента, которые я могу правильно расположить и управлять ими с помощью одного пейджера?

Мой скрипт сейчас выглядит так: 

$(function() {
$('.s4').before('<div id="nav" class="nav">').cycle({
    fx:     'scrollHorz',
    speed:  'slow',
    speedIn: 'slow',  // speed of the 'in' transition 
    speedOut: 'slow',
    timeout: 6000,
    pager:  '#nav'
});

});

Надеюсь, это имеет смысл,

Спасибо

1 Ответ

1 голос
/ 11 июня 2011

@ Awestruck - Вы можете использовать плагин метаданных: http://jquery.malsup.com/cycle/meta2.html Укажите параметры для каждого контейнера слайд-шоу, включив параметры в атрибут класса, например: <div class="slideshow { fx: 'scrollLeft', delay: -2000 }"> Я включил взломанный пример из цикласайт плагинов.Единственная зависимость файла для этого примера - jquery.metadata.js. 

<!doctype html> 
<html> 
<head> 
<title>JQuery Cycle Plugin - One Pager, Two Slideshows - Different Options for each class</title> 
<style type="text/css"> 
body { padding: 30px }
.slideshow { height: 232px; width: 232px; margin: 30px; float: left }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
#nav { text-align: center }
#nav a { padding: 5px; margin: 5px; background: #eee; border: 1px solid #ccc; text-decoration: none }
#nav a.activeSlide { background: #ddd; color: #800 }
</style> 
<!-- include jQuery library --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<!-- include Cycle plugin --> 
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script> 
<script type="text/javascript" src="jquery.metadata.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() {
    $('.slideshow').each(function(index) {
        $(this).cycle({
            pager:  '#nav',
            pagerAnchorBuilder: function(i) {
                if (index == 0)
                    // for first slideshow, return a new anchro
                    return '<a href="#">'+(i+1)+'</a>';
                // for 2nd slideshow, select the anchor created previously
                return '#nav a:eq('+i+')';
            }
        });
    });
});
</script> 
</head> 
<body> 
    <div id="nav"></div> 
    <div class="slideshow { fx: 'scrollLeft', delay: -2000 }"> 
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" /> 
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" /> 
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" /> 
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" /> 
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" /> 
    </div> 
    <div class="slideshow { fx: 'turnDown' }"> 
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" /> 
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" /> 
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" /> 
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" /> 
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" /> 
    </div> 
</body> 
</html>
...