2

首先，这就是我想要实现的目标：我有一个对象列表，其中包含图像的缩略图和一些基本信息。您可以单击图像以查看图像的大图，或在对象信息上的任何其他位置展开包含有关对象的大量额外信息的 DIV。

我结合使用了 jquery UI 手风琴和 yoxview，但是 yoxview 在几个浏览器中给我带来了极大的痛苦，我决定用 ColorBox 替换它。

现在这是问题所在，我有这个工作，但是当单击图像时，ColorBox 会按原样打开，但它也会触发手风琴，当然，它不应该。因为，例如，如果您单击打开额外信息，然后单击拇指查看放大的图像，手风琴关闭，这确实使导航和检查这些对象变得很痛苦，而不是轻而易举。

这是它的设置方式：

<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>

在准备好的文件中，我有这个：

$("#list-accordion").accordion(
    {
        icons: false ,
        autoHeight : false ,
        active: false ,
        header: '.list-accordion-header' ,
        collapsible: true
    }
);

对于彩盒：

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

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

为了确保单击图像时，我通常会使用以下代码：

$(".group1").click(function(e){ e.stopPropagation(); });

但是，我已经尝试过多种方式 stopPropagation，但每次尝试都会破坏 ColorBox。大图像可以正常打开，但在窗口本身中，而不是在灯箱中。

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

我非常感谢您在此处提供的任何帮助，以便尽管图像（链接）位于手风琴标题内，但单击它会触发 ColorBox，但不会触发手风琴本身。

干杯。

4

1 回答 1

3

好的，我花了一段时间，但我解决了这个问题。我并不是说这个解决方案非常干净，它似乎可以工作，并且可以跨浏览器。

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

这就是我所做的，首先我重建了手风琴。我保留了拇指，但删除了触发它周围的 ColorBox 的链接。然后我将该链接添加到窗格中，但在隐藏的 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 代码准备好了：

$('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，而无需打开手风琴的窗格。

于 2012-02-03T11:08:10.680 回答