First of, this is what I'm trying to achieve: I have a list of objects with a thumb of an image and some basic information. You can click on the image to see the large version of the image, or anywhere else on the object information to unfold a DIV with lots of extra information on the object.
I had this working with a combination of the jquery UI accordion and yoxview, but yoxview was giving me so much pain in several browsers that I decided to replace it with ColorBox.
Now here is the problem, I have this working, but when one clicks on the image, the ColorBox opens as it should, but it also triggers the accordion, which, of course, it should not. Because, for example, if you clicked open the extra information, and then click on the thumb to see the image enlarged, the accordion closes, which really makes it a pain instead of a breeze to navigate and check out these objects.
This is how it's setup:
<div id="list-accordion">
<div class="list-accordion-header">
<span class="list-thumb-container">
<a href="someplace_thumb.jpg" title="some title" class="group1">
<img src="somplace_large.jpg" />
</a>
</span>
<div class="list-basic-details">
The basic explanation comes here
</div>
</div>
<div class="list-extra-detail">
All the rest of the information in the panel of the accordion
</div>
</div>
In the document ready I then have this:
$("#list-accordion").accordion(
{
icons: false ,
autoHeight : false ,
active: false ,
header: '.list-accordion-header' ,
collapsible: true
}
);
and for the ColorBox:
$(".group1").colorbox({rel:'group1'});
(I use rel because it's possible that there are several images for one object, I simplified my html example)
In order to make sure that when the image is clicked, I would normally use code down this line:
$(".group1").click(function(e){ e.stopPropagation(); });
However, I've tried stopPropagation in myriad ways, but each an every attempt sabotages the ColorBox. The large images opens alright, but in the window itself, instead of in the lightbox as it should.
In short, I know have a lightbox that unlike yoxview works cross browser, but I have the unwanted side effect that clicking the image triggers the accordion.
I would really appreciate any help here in making it so that although the image (link) is inside the accordion header, a click on it will trigger ColorBox but not the accordion itself.
Cheers.