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

在模态窗口内打开图像

1 个答案: