CODEWITHSUNDEEP
javascriptjquery
user240993
user240993

Reputation:

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

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.

Upvotes: 1

Views: 4878

Answers (3)

MrWinfield
MrWinfield

Reputation: 21

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.

Upvotes: 2

andyb
andyb

Reputation: 43823

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

Upvotes: 1

Calum
Calum

Reputation: 5316

try addClass() or css() mebbe

Upvotes: 0

Related Questions