javascript - 滑动框-单独打开图片而不是图库

我正在寻找Colorbox的移动替代品。 Swipebox似乎是一个很好的选择，但是与colorbox不同，它似乎不允许打开每个单独的图像，而是将所有图像组合成一个图库。添加swipebox的常规方法如下：

$('.class').swipebox();

它将带有该类的所有内容添加到swipebox画廊中。有没有办法单独打开某个类别的每个项目？

最佳答案

看起来您只需要将图像分成“图库”，因为您不想要图库，这看起来似乎很直观。

Check the advanced docs for gallery：


  您可以在链接中添加rel属性，以分隔画廊。


就像我说的那样，这是违反直觉的，但是旨在将图像分组到画廊中的功能可以用来将它们分开。基本上，您是通过为每个画廊添加一个不同的rel属性来建立一个画廊。

Working Example on jsFiddle

$('.swipebox').swipebox();

img {
  width: 500px;/* example only */
}

<link href="http://brutaldesign.github.io/swipebox/src/css/swipebox.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://brutaldesign.github.io/swipebox/src/js/jquery.swipebox.js"></script>

<a href="http://pluggedinwebdesign.com/images/RopesLittlePlanet.jpg" class="swipebox" title="My Caption" rel="gallery-1">
  <img src="http://pluggedinwebdesign.com/images/RopesLittlePlanet.jpg" alt="image" />
</a>

<a href="http://pluggedinwebdesign.com/images/CanopyGround.jpg" class="swipebox" title="My Caption" rel="gallery-2">
  <img src="http://pluggedinwebdesign.com/images/CanopyGround.jpg" alt="image" />
</a>

  

如果向每个swipebox添加rel属性看起来很繁琐，则可以使用以下脚本添加rel属性：

$('.swipebox').swipebox();

var X = 0; // set a global var
$('.swipebox').each(function() { //for each swipebox
  X += 1; //increment the global var by 1
  $(this).attr('rel', 'gallery-' + X); // set the rel attribute to gallery- plus the value of X
});

img {
  width: 500px;/* example only */
}

<link href="http://brutaldesign.github.io/swipebox/src/css/swipebox.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://brutaldesign.github.io/swipebox/src/js/jquery.swipebox.js"></script>

<a href="http://pluggedinwebdesign.com/images/RopesLittlePlanet.jpg" class="swipebox" title="My Caption">
  <img src="http://pluggedinwebdesign.com/images/RopesLittlePlanet.jpg" alt="image" />
</a>

<a href="http://pluggedinwebdesign.com/images/CanopyGround.jpg" class="swipebox" title="My Caption">
  <img src="http://pluggedinwebdesign.com/images/CanopyGround.jpg" alt="image" />
</a>