CODEWITHSUNDEEP
jqueryjquery-pluginsjquery-cycle
Pooja
Pooja

Reputation: 806

add class to links of active slides in jquery cycle plugin

I want to add a class to the current slide's link. My javascript code is 

$(document).ready (function() {
$('#slideshow').cycle({
            fx: 'fade',
            speed: 500,
            timeout: 1000,
            pause: 1,
            cleartype: true,
            cleartypeNoBg: true,
            pager: '#forpager',
            pagerAnchorBuilder: function(idx, slide) {
                return '#forpager li:eq(' + (idx) + ')';
            }
        });


    $('#forpager ul li a').click(function(){
      $('#forpager ul li a').removeClass("active");
      $(this).addClass("active");
    });


});

And the html code for slideshow is

<div id="forslideshow">
        <div id="slideshow">

            <div class="image">
            <center><img src="images/pic1.jpg" alt="Renny"/></center>
            </div>

            <div class="image">
            <center><img src="images/pic2.jpg" alt="Giselle"/></center>
            </div>

            <div class="image">
            <center><img src="images/pic3.jpg" alt="Emma Goldman"/></center>
            </div>

        </div>

        <div id="forpager">
        <ul>
            <li ><a  href="#"><img src="images/menupic.png"/></a></li>
            <li ><a  href="#"><img src="images/menupic.png"/></a></li>
            <li ><a href="#"><img src="images/menupic.png"/></a></li>
        </ul>
        </div>


    </div>

Problem is that with this code when I click on a particular link that slide comes and link has the active class but else as the slides cycle their corresponding links are not don't have active class. Can anyone give me code which can add/change the class of links as the slide show starts and when i am not clicking on the links.

Upvotes: 0

Views: 2928

Answers (2)

Pooja
Pooja

Reputation: 806

The following code is working. But use the updateActivePagerLink function before the applying the cycles. 

$(document).ready (function() {

    $.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) {

                $(pager).find('li').removeClass('active')

                .filter('li:eq('+currSlideIndex+')').addClass('active');


    };



$('#slideshow').cycle({
            fx: 'fade',
            speed: 500,
            timeout: 1000,
            pause: 1,
            cleartype: true,
            cleartypeNoBg: true,
            pager: '#forpager',
        pagerAnchorBuilder: function(idx, slide) {
                return '#forpager li:eq(' + (idx) + ')';
            }

});

Upvotes: 1

Vladimir Kadalashvili
Vladimir Kadalashvili

Reputation: 757

I think you should use "after" option here http://jquery.malsup.com/cycle/options.html

$('#slideshow').cycle({
            fx: 'fade',
            speed: 500,
            timeout: 1000,
            pause: 1,
            cleartype: true,
            cleartypeNoBg: true,
            pager: '#forpager',
            pagerAnchorBuilder: function(idx, slide) {
                return '#forpager li:eq(' + (idx) + ')';
            },
            after: function() {
              $('#forpager ul li a').removeClass("active");
              $(this).addClass("active");
            }
 });

Upvotes: 0

Related Questions