Question

我正在创建一个图像框。在图像缩略图出现的正文中，点击它们我想在弹出窗口中显示点击的图像以及下一个和上一个按钮

<html>
<head>
    <style>
       .image_box{height:600px; width: 1000px;}
       .image_1{height: 100px; width: 100px; float: left; margin: 10px 0 0 10px;}
       .my_popUp{top:0; left:0; right:0; bottom: 0; background: rgba(####); 
                  position: absolute;}
       .box_pop_up{float: left; margin-left: 20px;}
    </style>  
    <script>
         function hidePopUp(){
            $('.my_popUp').hide();
         }

         function showPopUp(){
            $('.my_popUp').show();
         }
         $(function(){
               $('.image_1').on('click', function({
                     showPopUp();
               });
               $('.my_popUp').on('click', function({
                      hidePopUp();
               });

          });
    </script>
</head>
<body>
    <div class="image_box">
        <div class="image_1"><img src="......" /></div>
        <div class="image_1"><img src="......" /></div>
        <div class="image_1"><img src="......" /></div>
        <div class="image_1"><img src="......" /></div>
    </div>
    <div class="my_popUp">
        <div class="left_button_box box_pop_up"><img src="prev.png"></div>
        <div class="center_image_box box_pop_up"></div>
        <div class="right_button_box box_pop_up"><img src="next.png"></div>
    </div>
</body>    
</html>

所以我通过点击图像缩略图创建了一个图像查看器框，缩略图图像在弹出的居中图像框中放大显示，图像框的所有下一个图像都应该通过单击next和prev按钮显示出来我希望假设用户点击了四个中的随机图像，因此图像应该在弹出的单击中打开我怎么能这样做？接下来的图像。请帮助我这个以及另外一个问题我喜欢如果我使用标签相册，例如我有四张专辑，每张专辑都是标签式结构，如果我移动到不同的标签相册框，相同的功能所以我需要什么代码添加以定义当前正在使用显示代码的图像的相册

Answer 1

大多数直接解决方案都使用图像灯箱，例如：

http://fancyapps.com/fancybox/

或者谷歌搜索“图像灯箱”。

Answer 2

如果您不想使用在线提供的现有灯箱，可以查看此tutorial 1 , tutorial 2 如何创建一个非常简单的灯箱。但是就像matts的回答一样，您可以简单地下载任何现有的灯箱插件，请查看下面的链接。

http://www.dreamcss.com/2009/03/31-mind-blowing-collection-of-jquery.html

创建一个图像查看器弹出next和prev按钮

2 个答案: