单击图像并在灯箱和缩略图中打开相同的图像，jQuery答案

【问题标题】：Click on image and open same image in lightbox and thumbnail , jQuery单击图像并在灯箱和缩略图中打开相同的图像，jQuery
【发布时间】：2015-06-24 23:25:06
【问题描述】：

我使用fancybox在带有缩略图的灯箱中显示图像，我想在点击每个open_fancybox.img后，首先在灯箱中显示，图片被点击。并且不显示第一个的所有图片。

例如：如果我点击灯箱中的2_b.jpg 并缩略图显示（选择）2_s.jpg。
或者
例如：如果我在灯箱中单击 3_b.jpg 并缩略图显示（选择）3_s.jpg。
或者
例如：如果我点击灯箱中的1_b.jpg 并缩略图显示（选择）1_s.jpg。

如何在不使用基于 fancybox 的情况下仅更改我的代码？

观看演示： http://jsfiddle.net/fsfucmhd/

<a class="open_fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>
<a class="open_fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>
<a class="open_fancybox" href="http://fancyapps.com/fancybox/demo/3_b.jpg"><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt=""/></a>

<div class="Img" data-type="http://fancyapps.com/fancybox/demo/1_b.jpg" data-title="manual 1st title">1</div>
<div class="Img" data-type="http://fancyapps.com/fancybox/demo/2_b.jpg" data-title="2nd title"></div>
<div class="Img" data-type="http://fancyapps.com/fancybox/demo/3_b.jpg" data-title="3rd title"></div>


var arr = $('div.Img').map(function (elem) {
    return {
        href: $(this).data('type'),
        title: $(this).data('title')
    }
}).get();
$(".open_fancybox").click(function() {

    $.fancybox.open(arr, {
        nextEffect : 'none',
        prevEffect : 'none',
        padding    : 0,
        helpers    : {
            title : {
                type: 'over'  
            },
            thumbs : {
                width  : 75,
                height : 50,
                source : function( item ) {
                    return item.href.replace('_b.jpg', '_s.jpg');
                }
            }
        }
    });

    return false;
});

【问题讨论】：

标签： javascript jquery fancybox

【解决方案1】：

您应该根据他们的文档使用 fancybox。

$(document).ready(function() {
    $(".fancybox-thumb").fancybox({
        prevEffect  : 'none',
        nextEffect  : 'none',
        helpers : {
            title   : {
                type: 'outside'
            },
            thumbs  : {
                width   : 50,
                height  : 50
            }
        }
    });
});

jsfiddle example

【讨论】：

Özgür Ersil - 如何只更改我的代码，而不使用基于 fancybox 的？
它是基于 fancybox，查看 jsfiddle 示例
Özgür Ersil - 一开始我不想显示所有图像，我只是在灯箱中显示所有图像。