UI手风琴标题中的jQuery ColorBox插件 [英] jQuery ColorBox plugin within an UI accordion header

问题描述

首先，这是我想要实现的目标：我有一个带有图像拇指和一些基本信息的对象列表。您可以单击图像以查看图像的大版本，或者在对象信息的任何其他位置展开具有关于对象的大量额外信息的DIV。

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.

我使用了jquery UI手风琴和yoxview的组合，但yoxview在几个浏览器中给了我很多痛苦，我决定用ColorBox替换它。

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.

现在问题就在这里，我有这个工作，但是当点击图像时，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.

这就是它的设置方式：

<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
    }
);

和ColorBox：

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

（我使用rel，因为一个对象可能有多个图像，我简化了我的html示例）

(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(); });

然而，我已经尝试过无数种方式的stopPropagation，但每次尝试都会破坏ColorBox。大图像打开正常，但在窗口本身，而不是在灯箱中，而不是在它应该的灯箱。

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.

简而言之，我知道有一个不同于yoxview工作的灯箱跨浏览器，但是我有不必要的副作用，单击图像会触发手风琴。

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.

我真的很感激这里的任何帮助，尽管图像（链接）是在手风琴标题内，单击它会触发ColorBox而不是手风琴本身。

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.

干杯。

推荐答案

好的，我花了一段时间，但我解决了这个问题。我不是说这个解决方案非常干净，似乎工作正常，并在浏览器上进行浏览。

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.

我解决方案的关键是删除ColorBox链接手风琴的标题。但是，我仍然希望在标题内部放一个拇指，用户可以点击打开图像的放大版本（并在ColorBox中浏览其他图像，如果可用的话），而不打开手风琴窗格！

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!

这就是我所做的，首先我重建了手风琴。我保持拇指，但删除了触发ColorBox周围的链接。然后我将该链接添加到窗格中，但是在隐藏的div中。

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>

现在我准备好在我的文件中使用以下js代码：

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
    }
);

正如你所看到的，我抓住拇指上的点击并阻止它，这样就可以'泡到父母。但在我实际阻止之前，我发送一个点击到我想在ColorBox中打开的第一个图像。由于这些ColorBox链接不再位于手风琴的标题内，我可以点击它们而不会对手风琴产生影响，因此我现在可以点击拇指打开ColorBox而不打开手风琴的窗格。

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.

这篇关于UI手风琴标题中的jQuery ColorBox插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！