Question

我正在寻找Colorbox的移动替代品。 Swipebox似乎是一个很好的选择，但与彩盒不同，它似乎并不允许每个单独的图像打开，而是将它们全部组合成一个图库。添加swipebox的传统方式如下：

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

将该类的所有内容添加到一个swipebox库中。有没有办法单独打开某个类的每个项目？

Answer 1

看起来你只需要将你的图像分成＆＃34;画廊＆＃34;，这可能看起来反直觉，因为你不想要画廊......

Check the advanced docs for gallery：

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

就像我说它反直觉一样，但是用于将图像组合到画廊中的功能可以用来分隔它们。基本上，您通过为每个画廊添加不同的rel属性来设置画廊。

<强> Working Example on jsFiddle

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果为每个swipebox添加rel属性看起来很乏味，可以使用一个小脚本添加rel属性：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我的简单解决方案：）

<script type="text/javascript">
;( function( $ ) {
  $( '.swipebox' ).swipebox();
  $( '.swipebox2' ).swipebox();
} )( jQuery );
</script>

<a href="big/1-1.jpg" class="swipebox"><img src="small/1-1.jpg" /></a>
<a href="big/1-2.jpg" class="swipebox"><img src="small/1-2.jpg" /></a>

<a href="big/2-1.jpg" class="swipebox2"><img src="small/2-1.jpg" /></a>
<a href="big/2-2.jpg" class="swipebox2"><img src="small/2-2.jpg" /></a>

Swipebox - 单独打开图像而不是图库

2 个答案: