Question

I am trying to get a jQuery lightbox, Yoxview, to integrate with a Coverflow image gallery called Contentflow. My issue is that I only want the Yoxview lightbox to open when the contentflow image is in the active, centered state. This allows clicking on lateral images to have them flow into the active, center position, so I don’t want every image to open in the lightbox, only the active one.

here is the code I am trying to use:

new ContentFlowAddOn ('yoxview', {
ContentFlowConf: {
    onclickActiveItem: function (item) {
      $('.active').removeClass("yoxview").addClass("yoxview");
      $(".yoxview").yoxview();
    },
    onclickInactiveItem: function (item) {
     $('.active').removeClass("yoxview");
      $('a').click(function (e) {
   e.preventDefault();
});

        }
}
});

The HTML is:

<a class="item" href="pics/pic0.png"><img class="content" src="pics/pic5.png" alt="First" title="The first image" /></a>

It works well initially in that clicking on non active images move the image to the center and clicking on the center active image opens in the lightbox correctly, but after clicking each image once, all images will then open in the lightbox. It seems that removeClass is not happening. Any help would be appreciated.

Answer 1

Is it intentional to only remove the class from active items? You may find that the active item has been set to inactive before that code is called. If you want to reset all other items, you could use

$(".yoxview").removeClass(".yoxview");

Also not sure how necessary that class is anyway – have you tried

$(".active").yoxview();