jQuery ColorBox plugin within an UI accordion header

问题

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.

回答1:

Ok, it took me a while, but I solved the issue. I'm not saying this solution is very clean, it seems to be working, and cross browser at that.

The key to my solution was to remove the ColorBox links from the header of the accordion. However, I still wanted a thumb inside that header, that user can click to open an enlarged version of the image (and browse in the ColorBox to other images if available) without the accordion pane opening!

This is what I did, first I reconstructed the accordion. I kept the thumb, but removed the link that triggered the ColorBox around it. I then added that link to the pane instead, but in a hidden div.

<div id="list-accordion">
  <div class="list-accordion-header">
    <span class="list-thumb-container">
        <img src="somplace_thumb.jpg" class="img-thumb" rel="group1"/>
    </span>
    <div class="list-basic-details">
      The basic explanation comes here
    </div>
  </div>
  <div class="list-extra-detail">
    <div class="hidden-img-links">                       
      ** all my  image links in this format **
     <a class="group1" href="somplace_large.jpg" title="some text">name</a>
    </div>
    All the rest of the information in the panel of the accordion
  </div>
</div>

Now I use the following js code in my document ready:

$('a.group1').colorbox( {rel: group1});     

$(".img-thumb").click( function( event ){
    $( '.' + $(this).attr('rel') + ':first' ).click();
    return false;
})

// of het nu items of veilingen bevat, de item accordion moet opgestart
$("#list-accordion").accordion(
    {
        icons: false ,
        autoHeight : false ,
        active: false ,
        header: '.list-accordion-header' ,
        collapsible: true
    }
);

As you can see, I catch the click on the thumb and block it, this way it can't bubble up to the parent. But before I actually block, I send a click to the first image that I would like to open in ColorBox. As these ColorBox links are no longer within the header of the accordion I can click on them without impact on the accordion and hence I can now click on the thumb to open the ColorBox without opening the pane of the accordion.

来源：https://stackoverflow.com/questions/9112511/jquery-colorbox-plugin-within-an-ui-accordion-header