Добавление второго пейджера в слайд-шоу Jquery Cycle - PullRequest
Новая
       37

Добавление второго пейджера в слайд-шоу Jquery Cycle

0 голосов
/ 16 марта 2012

Я пытаюсь добавить второй пейджер в мои слайд-шоу в формате 1/3>, поэтому, если есть 3 слайда, он показывает, сколько слайдов и на каком слайде вы продолжаете, и если вы хотите двигаться вперед, просто нажмите стрелку. Это должно быть просто, но я не могу найти никаких примеров там. Вот что у меня есть: 

$(function() {
$('.slideshow').each(function() {
    var $nav = $('<div class="nav"></div>').insertAfter(this);
    var $nav2 = $('<div class="nav2"></div>').insertBefore(this);
    $('<div class="caption">&nbsp;</div>').insertAfter($nav);

    $(this).cycle({
        fx:     'fade',
        speed:   300,
        timeout: 0,
        pager:   $nav,
        after:   onAfter
    });
});

function onAfter(curr, next, opts) {
    var src = '&nbsp;';
    if (next.src)
        src = next.src.match(/([a-zA-Z0-9\.]+$)/)[1];
    $(curr).parent().nextAll('div.caption:first').html(src);
}

Есть идеи?

UPDATE: Спасибо, Джефф Лэм ... Я попробовал это, и это почти там. Поскольку у меня есть 2 слайд-шоу на одной странице, навигационные элементы накладываются друг на друга, поэтому, если я перейду к одному, оба заголовка изменятся. Я попытался просто изменить имена классов, но это все еще накладывает. Что мне здесь не хватает? Вот мой обновленный код: 

$(function() {
$('.slideshow').each(function() {
    var $nav = $('<div class="nav"></div>').insertAfter(this);
    var $nav2 = $('<div class="nav2"></div>').insertBefore(this);

    $('<div class="caption">&nbsp;</div>').insertBefore($nav);
    $('<div class="caption2">&nbsp;</div>').insertAfter($nav2);

    $('.next').click(function() {
        $('.slideshow').cycle('next');
    });
    $('.next2').click(function() {
        $('.two').cycle('next');
    });

    $(this).cycle({
        fx:     'fade',
        speed:   300,
        timeout: 0,
        pager:   $nav,
        after:   onAfter
    });
});

function onAfter() { 
    $('.caption').html('<h3>' + (parseInt($(this).index())+1) + ' / ' + $(".slideshow div").length + '</h3>');
}
function onAfter() { 
    $('.caption2').html('<h3>' + (parseInt($(this).index())+1) + ' / ' + $(".two div").length + '</h3>');
}

Я хочу добавить третий слайд-шоу, если это необходимо. Вот мой HTML: 

<div class="slideshow-container">
<h2>CASE STUDIES</h2>
<input type="button" class="next" value=">" />

<div class="slideshow">
<div> <img src="images/jorge-pensi.png" width="278" height="270" />
  <h1>Jorge<br/>
    <strong>Pensi</strong></h1>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
  <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
 </div>
  <div> <img src="images/jorge-pensi.png" width="278" height="270" />
  <h1>Designer<br/>
    <strong>Two</strong></h1>
   <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
  <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
 </div>
 </div>
 </div>
 <div class="slideshow-container">
 <h2>OUR DESIGNERS</h2>
 <input type="button" class="next2" value=">" />

  <div class="slideshow two">
  <div> <img src="images/jorge-pensi.png" width="278" height="270" />
  <h1>Jorge<br/>
    <strong>Pensi</strong></h1>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
  <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</div>
<div> <img src="images/jorge-pensi.png" width="278" height="270" />
  <h1>Designer<br/>
    <strong>Two</strong></h1>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
  <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</div>

Ответы [ 2 ]

0 голосов
/ 17 марта 2012

Хорошо, вот переписать.Он не добавляет заголовки HTML и кнопки в js, но вы можете изменить это, если хотите.Вы можете сделать это автоматически с помощью следующего: 

$(document).ready(function() {
    var i = 0;
    $('.ss').each(function() {
        i+=1;

        $('#prev'+i).click(function() {
            $('#slideshow'+i).cycle('prev');
        });
    }
}

Однако я чувствую, что пишу все для вас, а не вы сами пишете страницу.Вот рабочая версия, которая явно вызывает каждое слайд-шоу: 

<script type="text/javascript"> 
$(document).ready(function() {
    startShow1();

    $('#prev1').click(function() {
        $('#slideshow1').cycle('prev');
    });
    $('#next1').click(function() {
        $('#slideshow1').cycle('next');
    });


    startShow2();

    $('#prev2').click(function() {
        $('#slideshow2').cycle('prev');
    });
    $('#next2').click(function() {
        $('#slideshow2').cycle('next');
    });
});

function startShow1() {
    $('#slideshow1').cycle({
        fx:       'fade', 
        speed:    0,
        timeout:  600,
        autostop: 1,
        after:    onAfter1
    });
}

function startShow2() {
    $('#slideshow2').cycle({
        fx:       'fade', 
        speed:    0,
        timeout:  600,
        autostop: 1,
        after:    onAfter2
    });
}


function onAfter1() { 
    $('#caption1').html('<h3>' + (parseInt($(this).index())+1) + ' / ' + $("#slideshow1 img").length + '</h3>'); 
}

function onAfter2() { 
    $('#caption2').html('<h3>' + (parseInt($(this).index())+1) + ' / ' + $("#slideshow2 img").length + '</h3>'); 
}

</script> 
</head> 
<table>
    <tr>
    <td colspan="2">
        <div class='ssc' id="ss1_container">
            <div class='ss' id="slideshow1">
                <img src="img1.png">
                <img src="img2.png">
            </div>
        </div>
        </td>
    </tr>
    <tr>
        <td width="50px">
            <div id="caption1">

            </div>
        </td>
        <td>
            <input type="button" id="prev1" value="Prev" />
            <input type="button" id="next1" value="Next" />
        </td>
    </tr>

    <tr>
    <td colspan="2">
        <div class='ssc' id="ss2_container">
            <div class='ss' id="slideshow2">
                <img src="img1.png">
                <img src="img2.png">
            </div>
        </div>
        </td>
    </tr>
    <tr>
        <td width="50px">
            <div id="caption2">

            </div>
        </td>
        <td>
            <input type="button" id="prev2" value="Prev" />
            <input type="button" id="next2" value="Next" />
        </td>
    </tr>
</table>

</body> 
</html>
0 голосов
/ 16 марта 2012

Я не знаю, поддерживает ли API цикла это специально. Это будет работать, хотя. 

<div id="ss">
    <img src="image.png">
    <img src="image.png">
    <img src="image.png">
    <img src="image.png">
    <img src="image.png">
</div>

Укажите after в слайд-шоу 

$('#ss').cycle({
    after:    onAfter
});

Определить onAfter: 

function onAfter() { 
    $('#caption').html('<h3>' + (parseInt($(this).index())+1) + ' / ' + $("#slideshow3 img").length + '</h3>');
}

Определите div под вашими изображениями: 

<div id="caption"></div>

Добавить кнопки и / или стрелки: 

<input type="button" id="prev" value="<" />
<input type="button" id="next" value=">" />

в функции $ (document) .ready, назначьте действия нажатия для кнопок: 

$('#prev').click(function() {
    $('#ss').cycle('prev');
});
$('#next').click(function() {
    $('#ss').cycle('next');
});
...