的模式窗口

Question

这里里面打开图像是我JsFiddle

我想创建一个图片库。当有人点击任何图像时，我希望每个图像在模式窗口内打开。我设计了我的模态窗口。我只是不知道如何将我的模式窗口连接到图像库中的图像。我想被点击的图像出现我的模态窗口的img标签内。

这是我第一次我试图做模态窗口的东西。我不知道如何为我的情况编写该点击事件处理程序。我在网上搜索。我没有找到任何匹配的解决方案。所有人都建议使用他们自己的插件。我不想为此使用其他插件。一点帮助，将不胜感激。

这里是我的图片库

<div class="gallery"> 
    <div class="row"> 
    <a href="#"> <img class="normalimage" src=""> </a> 
    <a href="#"> <img class="wideimage" src=""> </a> 
    <!--more images--> 
    </div> 
    <div class="row"> 
    <a href="#"> <img class="normalimage" src=""> </a> 
    <a href="#"> <img class="normalimage" src=""> </a> 
    <!--more images--> 
    </div> 
</div> 

这里是我的模态窗口

<div class="gallery-overlay" style="display: none;"> 
<div class="gallery-imagebox"> 
    <img class="gallery-image" src="#"> 
</div> 

<div class="gallery-captionbox"> 
    <div class="gallery-control gallery-control-previous"> 
    < 
    </div> 
    <div class="gallery-control gallery-control-next"> 
    > 
    </div> 
</div> 
</div> 

Answer 1

使用jQuery你可以用这个启动：

$(function(){ 
    $('.gallery').on('click','a',function(){ 
    $('.gallery-overlay').show() 
     .find('.gallery-image').attr('src',$(this).find('img').attr('src')); 
    return false; 
    }); 
}); 

看一看这个this fiddle