CODEWITHSUNDEEP
jquery
PraviN Kr
PraviN Kr

Reputation: 3

how to highlight the selected thumb image of a image gallery, when we click on it?

Im a beginner in jquery, i created a simple image slider. code is like this

     $(function() {
        $(".specialimage").click(function() {

        var image = $(this).attr("rel");
        $('#specialimage').hide();
        $('#specialimage').fadeIn('slow');
        $('#specialimage').html('<img src="' + image + '"/>');
        return false;
        });
        });

Web site is : http://ymaclub.com/test/special.html

the image gallery is working fine, but its not highlighting the selected thumb image when we click a particular thumb image of the gallery..

Can any one please help me how to highlight the selected thumb image of a image gallery, when we click on it?

Upvotes: 0

Views: 1309

Answers (2)

Pete
Pete

Reputation: 58462

is the thumb the $(".specialimage"), if so you can just add a new class in your click function:

$(document).ready(function() {
    var thumbs = $(".specialimage");

    thumbs.click(function() {
      thumbs.removeClass('selected');
      $(this).addClass('selected');

      var imageUrl = $(this).attr("rel");
      $('#specialimage').hide('fast', function() {
        $(this).html('<img src="' + imageUrl + '"/>').fadeIn('slow');
      });

      return false;
    });
});

Then add your highlight css for the class selected

Upvotes: 0

bipen
bipen

Reputation: 36541

create a css class for selected thumb say thumbSelected.. and add that class when clicked on the thumb...

try this

updated jquery 

    $(".specialimage").click(function() {
      $(".specialimage img").removeClass('thumbSelected'); //first remove existing thumbSelected class
      $(this).find('img').addClass('thumbSelected'); // add class to clicked thumb
      var image = $(this).attr("rel");
      $('#specialimage').hide().fadeIn('slow').html('<img src="' + image + '"/>');
      return false;
    });

CSS

 .thumbSelected{
    border:1px solid red;  //this is just an example.. you can use any css properties here
 }

Upvotes: 1

Related Questions