如何使用Color box jQuery插件直接用于<img/>元素？

Question

我创建了一个媒体库，我想用 colorbox 来显示图片。
我尝试在其上使用colorbox的HTML结构如下所示：

<div class="image-gallary">
  <img src="/patch_to_image/image_1.png">
  <img src="/patch_to_image/image_2.png">
  <img src="/patch_to_image/image_3.png">
  <img src="/patch_to_image/image_4.png">
</div>

和jQuery intialazation是：

  $('div.image-gallary>img').colorbox({
    rel:'images',
    transition:"fade",
    opacity:0.5 ,
    rel:'group1'
  });

单击图像时，clorbox加载和弹出窗口显示但图像未加载（不显示，仍在加载图像）。

Answer 1

这是因为Colorbox依赖于anchor元素上的href属性来正确加载页面。简单的解决方案是简单地用每个<img src="/path/to/image">元素包装相应的<a href="/path/to/image">，你就可以了。

这背后的原因很简单：从UI的角度来看，图像是要点击的，因此直观地说它们应该包含在一个可交互的元素中（<a>将是你的去元素）。想象一下，如果JS不能在页面上工作：这意味着图像仍然可以点击;）这是一个很好的用户界面！

＆＃13;

＆＃13;

$(function() {
  $('div.image-gallary>a').colorbox({
    rel: 'images',
    transition: "fade",
    opacity: 0.5,
    rel: 'group1'
  });
});

＆＃13;

img {
  width: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox-min.js"></script>

<div class="image-gallary">
  <a href="http://i.imgur.com/YzuqChn.gif"><img src="http://i.imgur.com/YzuqChn.gif"></a>
  <a href="http://i.imgur.com/Am3foce.gif"><img src="http://i.imgur.com/Am3foce.gif"></a>
</div>

＆＃13;

＆＃13;

＆＃13;

如果您不想修改标记，则有另一种解决方案：您只需使用插件的href选项指定URL即可。请注意，在这种情况下，您需要遍历所有图像（而不是将集合传递给.colorbox()方法，因为您需要分别指向每个src属性：

＆＃13;

＆＃13;

$(function() {
  $('div.image-gallary>img').each(function() {
    // Iterate through individual images...
    // because we need access to their 'src' attribute
    $(this).colorbox({
      rel: 'images',
      transition: "fade",
      opacity: 0.5,
      rel: 'group1',
      href: $(this).attr('src')
    });
  });
});

＆＃13;

img {
  width: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox-min.js"></script>

<div class="image-gallary">
  <img src="http://i.imgur.com/YzuqChn.gif" />
  <img src="http://i.imgur.com/Am3foce.gif" />
</div>

＆＃13;

＆＃13;

＆＃13;