CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Al Kush
Al Kush

Reputation: 288

Styling the selected thumnail

I have an images slideshow that will show the big image when the thumnail image is clicked. The code so far works fine. But now I want to give a style to the selected thumnail, such as giving the selected thumnail a black border. How to do this?

Here is my html code:

        <div id="slideshow">        

        <ul id="slide-wrapper">
            <li><img src="http://placekitten.com/120/120"/>         
            <p class="caption-title">Linkin Park's 'The Hunting Party': Track-by-Track Review</p></li>

            <li><img src="http://placekitten.com/120/120"/>         
            <p class="caption-title">Exclusive: The Griswolds Premiere New Song '16 Years' &amp; Talk Debut Album</p></li>

            <li><img src="http://placekitten.com/120/120"/>         
            <p class="caption-title">Bottled Water Comes From the Most Drought-Ridden Places in the Country</p></li>

            <li><img src="http://placekitten.com/120/120"/>         
            <p class="caption-title">Sarah Jaffe Video Premiere Watch The Haunting Lover Girl Clip</p></li>             
        </ul>

        <ul class="thumnails">
            <li class="img-thum">
                <img src="http://placekitten.com/120/120"/>
                <p class="thum-capt">Linkin Park's 'The Hunting Party': Track-by-Track Review</p></li>

            <li class="img-thum">
                <img src="http://placekitten.com/120/120"/>
                <p class="thum-capt">Exclusive: The Griswolds Premiere New Song '16 Years' &amp; Talk Debut Album</p></li>

            <li class="img-thum">
                <img src="http://placekitten.com/120/120"/>
                <p class="thum-capt">Bottled Water Comes From the Most Drought-Ridden Places in the Country</p></li>

            <li class="img-thum">
                <img src="http://placekitten.com/120/120"/>
                <p class="thum-capt">Sarah Jaffe Video Premiere Watch The Haunting Lover Girl Clip</p></li>             
        </ul>

    </div>

And here is my JS

//When we click on thumb img
$('.thumnails li').click(function() {

var
    //SlideShow
    sshow = $(this).closest('#slideshow'),
    //Big
    big = sshow.find('#slide-wrapper'),
    //thumb
    thumb = sshow.find('.thumnails'),
    //Get index
    indx = thumb.find('li').index(this),
    //Current index
    currentIndx = big.find('li').index(big.find('li:visible'));

//If currentIndx is same as clicked indx don't do anything
if(currentIndx == indx) {
    return;
}

big
    //Fadeout current image
    .find('li:visible').fadeOut(0).end()
    //Fadein new image
    .find('li:eq(' + indx + ')').fadeIn(0);
});

Here is my Fiddle

Upvotes: 1

Views: 80

Answers (2)

Miguel
Miguel

Reputation: 20633

Add an active class to the selected thumbnail:

$this.siblings()
     .removeClass('active')
     .end().addClass('active');

JSFiddle example:

http://jsfiddle.net/rj3yuvvy/3/

Upvotes: 1

Viswanath Donthi
Viswanath Donthi

Reputation: 1821

You need to add a border of dotted type. Here's the code that you want.

$('.thumnails li').click(function() {
     $('img').removeClass('selectedThumb');  // removes border from previous selected thumbnail
     $(this).find('img').addClass('selectedThumb'); // Adds border to selected thumbnail

     ----
     ---

});

And, here's the css:

.selectedThumb{
    border: 2px dotted #000;
}

Upvotes: 1

Related Questions