Question

我正在一个包含图库的网站上工作。我已经用HTML和CSS制作了我的代码来自定义页面中我的图库的形状。我想点击一下画廊中的每个图像弹出窗口！我在Jquery的知识是非常基础的，所以任何形式的帮助都会非常感激。

<div class="showcase">
    <ul>
        <li class="current"><a href="Gallery/Pic1.jpg"><img 
    src="Thumb/Pic1.jpg" alt="" height="240" width="190"/></a></li>
        <li><a href="Gallery/Pic2.jpg"><img src="Thumb/Pic2.jpg" 
             alt="" height="240" width="190"/></a></li>
        <li><a href="Gallery/Pic3.jpg"><img src="Thumb/Pic3.jpg"   
             alt="" height="240" width="190"/></a></li>
        <li><a href="Gallery/Pic4.jpg"><img src="Thumb/Pic4.jpg"  
             alt="" height="240" width="190"/></a></li>
        <li><a href="Gallery/Pic5.jpg"><img src="Thumb/Pic5.jpg"  
             alt="" height="240" width="190"/></a></li>
    </ul>
</div>

我的样式表：

.showcase
{
    margin: 0 0 25px 0;
}

.showcase ul
{
    list-style: none;
}

.showcase ul li
{
    position: relative;
    display: inline-block;
    background-color: grey;
    width: 200px;
    height: 230px;
    margin: 0 0 25px 25px;
    box-shadow: inset 0px 0px 2px 1px #ffffff, 0px 2px 4px 2px rgba(98, 67, 36,   
    0.5);
}

.showcase ul li.current
{
    margin-left: 0;``
}

.showcase ul li a
{
    position: absolute;
    top: 20px;
    left: 20px;
}

Answer 1

这个Jquery过去曾帮助过我

Simple Modal Popup Window

说明非常简单。您可能必须为每个项目添加唯一标识符。示例Jquery设置为调用一个。您需要修改它以动态更新每个图像。

弹出图像库使用Jquery

1 个答案: