Question

我的想法是使用Swipebox将一个单独的图像显示为图库缩略图，但在图库的“灯箱模式”中显示一组其他图像。似乎工作相当不豁免一些画廊图像在“灯箱模式”重复。

我的HTML

<div class="gallery">
<!-- gallery images -->
<a href="http://s3.amazonaws.com/resized-images-new/40E473CE-9C84-4D7A-A1A5-31B2D8A2A35C" class="swipebox" data-title="Image_1">
<a href="http://s3.amazonaws.com/resized-images-new/C8C44FD6-C258-41B4-B2EA-F2E6057F210B" class="swipebox" data-title="Image_2">
<a href="http://s3.amazonaws.com/resized-images-new/9DDEC32A-1823-4F6B-B8AC-956C7443C9E8" class="swipebox" data-title="Image_3">
<a href="http://s3.amazonaws.com/resized-images-new/78A88D94-1004-4138-8824-2BF7F1C39A6D" class="swipebox" data-title="Image_4">
<!-- thumbnail image-->
<img src="http://s3.amazonaws.com/resized-images-new/F7606CF0-C758-4054-A691-9240192EFB6A">
</div>

我的FIDDLE

http://jsfiddle.net/Zzw7M/

有谁知道为什么会这样？

谢谢你们！

Answer 1

工作示例：http://jsfiddle.net/Zzw7M/1/

您需要使用其中一个<a>标记包装启动器图像。否则，我认为插件会自动使用最后一个图像执行此操作，从而导致库中出现重复图像。

<div class="gallery"> 
    <a href="http://s3.amazonaws.com/resized-images-new/40E473CE-9C84-4D7A-A1A5-31B2D8A2A35C" class="swipebox" data-title="Image_1">
    <a href="http://s3.amazonaws.com/resized-images-new/C8C44FD6-C258-41B4-B2EA-F2E6057F210B" class="swipebox" data-title="Image_2">
    <a href="http://s3.amazonaws.com/resized-images-new/9DDEC32A-1823-4F6B-B8AC-956C7443C9E8" class="swipebox" data-title="Image_3">
    <a href="http://s3.amazonaws.com/resized-images-new/78A88D94-1004-4138-8824-2BF7F1C39A6D" class="swipebox" data-title="Image_4">
        <img class="img-responsive" src="http://s3.amazonaws.com/resized-images-new/F7606CF0-C758-4054-A691-9240192EFB6A">
    </a>
</div>

Swipebox.js图库图片重复

1 个答案: