Question

我已经安装了最新版本的jquery库，只需要一个简单的灯箱效果（最好不需要安装任何其他库）。

当点击我的轮播小工具（jcarousel lite）中的缩略图时，我想在可关闭的窗口中显示同一图像的完整尺寸图像并使背景变灰。

我也想将这个相同的行为应用于一个不属于轮播小部件的简单缩略图。

有什么想法吗？

Answer 1

我会选择jqueryui对话框：

http://jqueryui.com/demos/dialog/

Answer 2

我喜欢jQuery Tools。当然，它是另一个图书馆，但非常值得！我将这个库包含在我的网络项目中。

只需将此行弹出到您的HEAD标记中，它还包含jQuery Lib。

<script src="http://cdn.jquerytools.org/1.2.3/jquery.tools.min.js"></script>

完成后，只需使用Overlay库。我用它来弹出图像，表格或其他任何东西。

基本上，你只需创建一个div ：

<div id="image1" class="modalBox">
    <h2>Title</h2>
    content
</div>

设计风格：

.modalBox {
    background-color:#fff;
    display:none;
    width:350px;
    padding:15px;
    text-align:left;
    border:2px solid #600;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    -moz-box-shadow: 0 0 50px #ccc;
    -webkit-box-shadow: 0 0 50px #ccc;
    position:fixed;
    _position:absolute;
}
.modalBox h2 {
    background:url(images/logoac.png) no-repeat;
    margin:0px;
    padding:10px 0 10px 110px;
    border-bottom:1px solid #333;
    font-size:20px;
    color:#600;
    font-family:calibri, hevetica, tahoma, arial;
    text-align:right;
}

创建一个JS函数来弹出div

var api;
function showDiv(v){
    if (api)  //close any pop-ups that might already be open
        if (api.isOpened)
            api.close();

    if (!document.getElementById(v)) return;

    api=$('#'+v).overlay({
        mask: {color: '#000000'},   
        top:'0px',
        api: true           
    }).load();
}

然后当您点击“链接”时，只需致电：

showDiv('image1'); //change image1 to the name of the div with your content

甚至还有一些不错的动画和效果与图书馆一起使用（例如Apple Effect和Drop Effect

高度可定制且非常实用！

jQuery简单显示/隐藏缩略图点击的大图像

2 个答案: