I've been working on a prototype for a client's web site and I've run into a rather significant snag. You can view the prototype here.
As you can see, the way it works is you can scroll a set of slides horizontally and, by clicking one, open a stack containing yet more slides. If you then click again on an image in that stack it opens up a lightbox. Clicking on another stack or the close button will close that stack (and open another, as case may be).
That all works great. However you get some weird behavior if you do the following:
Click to open any stack.
Click to open an image's light box (this works best if you click on the image that's level with the main list).
Close the light box and the stack either by clicking the close button or clicking on another stack.
Click back to the first stack. Instead of reopening the stack, you get the lightbox.
This confuses me as the light box should only ever be called if there is a class on the containing UL and that class is removed when the lightbox is closed. I've checked and double-checked this, it's definitely missing.
Here are the respective functions:
$("ul.hide a.lightbox").live("click",function(){
$("ul.show").removeClass("show").addClass("hide");
$(this).parent().parent().removeClass("hide").addClass("show");
$("ul.hide").animate({opacity: 0.2});
$("ul.show").animate({opacity: 1});
$("#next").animate({opacity: 0.2});
$("#prev").animate({opacity: 0.2});
return false;
});
$("ul.show a.lightbox").live("click",function(){
$(this).fancybox().trigger("click");
return false;
});
As you can see, in order for the lightbox to be called the containing UL has to have the class of show. However, if you check it with Firebug it won't.
For those who are curious, the added .trigger("click"); is because the lightbox will require a double-click to launch otherwise.
Any idea how I can fix this?
