Nivo-slider: add extra class to the nivo-caption div

Question

in the html i would have something like this

<div id="1" class="nivo-html-caption extraclass1">

and it will still make this once its displayed

<div class="nivo-caption" style="opacity: 0.8;">

its not pushing my class to the nivo-caption div, but i need the extraclass1 to be added, any way to do this? I need to add a different class to each nivo-caption div.

every one of them is going to be placed in different positions? — Y.G.J, Aug 03 '11 at 08:12
I have checked again - it is there! any class you add is not removed, you have probably didn't add it to the right page or didn't upload the file to the server — Y.G.J, Aug 03 '11 at 08:20
Is you markup HTML5? CSS `id` starting with a number is not valid in anything less than HTML5 doctype. — andyb, Aug 03 '11 at 08:31

score 2 · Answer 1 · answered Nov 04 '11 at 16:02

Instead of using jQuery to add the class, you could nest the caption inside another div inside the #htmlcaption div:

<div id="htmlcaption" class="nivo-html-caption extraclass1">

    <div class="extraclass1">

        <em>HTML</em> caption

    </div>

</div>

That's what I would do anyway.

score 1 · Answer 2 · edited May 23 '17 at 11:47

There is actually only one <div class="nivo-caption"> in which the contents are replaced with each image caption if it exists, so it's not trivial to swap classes per image. However… one way to do this is to use the beforeChange() callback to copy the CSS class to the caption before showing the next slide.

I have this working locally and it should give you enough to go on. However because the class is swapped before the image, the timing of the image and class swap is not completely in sync. Also, you may also want to initialize the caption with the correct extra CSS in the afterLoad().

The following code uses the images from the Nivo slider demo and requires jQuery (I used v1.6.2), and the following Nivo JavaScript and CSS to work correctly.

<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

JavaScript:

$('#slider').nivoSlider({
    beforeChange: function(){
        var nivoVars = $('#slider').data('nivo:vars');
        var currentImage = nivoVars.currentImage;
        var htmlCaptionForCurrentImage = $(currentImage.attr('title'));
        var classList = htmlCaptionForCurrentImage.attr('class').split(/\s+/);
        var extraClass = classList[classList.length-1]; // assumes your extra class is always the last one (so may need a "starts with" test here as well if it is not)    

        $('.nivo-caption').removeClass(function(index, classes) {
            return (classes.match(/extraclass\d/) || []).join(' '); // assumes your classes are extraclass1, extraclass2, etc. so again may need changing to match your actual classes
        }).addClass(extraClass);
    }
});

HTML:

<div id="slider">
    <img src="toystory.jpg" id="image1" alt="" title="#htmlcaption" />
    <img src="walle.jpg" id="image2" alt="" title="#htmlcaption2" />
</div>
<div id="htmlcaption" class="nivo-html-caption extraclass1">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
<div id="htmlcaption2" class="nivo-html-caption extraclass2">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>

And CSS:

#slider {
    width:618px;
    height:246px;
}
.extraclass1 {
    color:red !important;
}
.extraclass2 {
    color:lightblue !important;
}

References used in constructing this answer

score 0 · Answer 3 · answered Aug 03 '11 at 09:54

0

try addClass() or css() mebbe

answered Aug 03 '11 at 09:54

Calum

5,308
1
22
27

Nivo-slider: add extra class to the nivo-caption div

3 Answers3