Jquery – Adding classes to multiple elements at once?

2 Views

I’m having issues with jquery and bxslider on my site, i’ve been racking my brain over this for a while but can’t seem to find any way to make it work how i’d like,

I’m building a slider using bxslider and basically i want the current slide to have a class of ‘active’ or an opacity of 1, whereas i’d want all other images on the sliders to have an opacity of 0.7.

Read More

i have a potential ‘infinite’ number of slides on my page and this is where i seem to be running into problems. (it’s being used in a wordpress loop, and each post is coded to pull the images from the post into the slider)

you can see what i’ve got so far at: http://jsfiddle.net/bu5cd/ 

    $(document).ready(function(){
$('.bxslider').bxSlider({
        onSlideBefore: function (currentSlideNumber, totalSlideQty,        currentSlideHtmlObject) {
    $('img.attachment-thumbnail-size').removeClass('active');
    $('img.attachment-thumbnail-size').eq(currentSlideHtmlObject+1).addClass('active')
var current = $('img.attachment-thumbnail-size').attr('id');
     }
});
    });

you can see it works for the first slider somewhat, but it doesn’t carry through to the second slider.

Cheers guys, been racking my brain over this for hours! I’m open to using another slider if that would help achieve the desired result, there doesn’t seem to be an awful lot of documentation around for bxslider.

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. Your first issue is that you have your parameters all wrong in your callback function. The first parameter is a jquery object pointing to the current slide. Then, you are selecting the “n-th” img on the whole page instead of in relation to your current slideshow. Using this current slide jquery object, you can find only the appropriate images instead of affecting all sliders. Try this:

    $(document).ready(function () {
    $('.bxslider').bxSlider({
        onSlideBefore: function ($el) {

            /*  remove the class from all images of this slider only  */
            $el.closest(".bxslider")
                .find('img.attachment-thumbnail-size')
                .removeClass('active');

            /*  add the class to the image within the current slide */
            $el.find('img.attachment-thumbnail-size')
                .addClass('active');
        }
    });
});

    http://jsfiddle.net/bu5cd/3/