1

这是我的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>
4

1 回答 1

1

使用 jQuery 你可以从这个开始：

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

看看这个这个小提琴

于 2013-06-27T18:39:27.913 回答