Question

I’m using jquery lightbox in a project, and I want to customize it a bit…
Basically, I’m adding a title to the top of each pop-out lightbox enlarged image. Now the Title will change depending on the class of the anchor tag that contains the image. I have 3 classes,and each class will have different text for the title.

Now here is my JSfiddle to see what I’m trying…

As you can see, when the lightbox animation is activated, the ‘My Text’ title does not change when going to an image of different a-tag class…

Any suggestions? Look at my JS code

Answer 1

use hasClass instead of .is. Jquery hasClass is a boolean type

$(function() {
   $('#gallery a').lightBox();

   var A = "Text for A";
   var B = "Text for B";
   var C = "Text for C";   
   $('#gallery').find('a').click(function (){



   if ($(this).haClass('classA')) {
          $('#lightbox-title-data-span1').html(A);
        };
   if ($(this).haClass('classB')) {
             $('#lightbox-title-data-span1').html(B);
        };

   if ($(this).haClass('classC')) {
             $('#lightbox-title-data-span1').html(C);
        };



       })

});​