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

-1

我已经安装了jquery库的最新版本，只是想要一个简单的灯箱效果（最好不需要安装任何额外的库）。jQuery简单显示/隐藏缩略图的大图片点击

当点击我的旋转木马小部件（jcarousel lite）的缩略图图像时，我想在可关闭的窗口中显示同一图像的全尺寸图像并灰显背景。

我也想将这个相同的行为应用到一个简单的缩略图，它不是传送带小部件的一部分。

任何想法？

来源

2010-07-09 Scott B

我想了解问题是什么？你有代码，你试过这样做，这是行不通的？ – Petrogad 2010-07-09 18:55:27

为什么你认为这与“最好不必安装任何额外的库”？ jQuery没有使用额外的插件是没有意义的，当你可以很容易地找到任何数量的插件，可以做你正在寻找。为什么重新发明轮子？ – 2010-07-09 19:51:14

@charles - 我只想确保自己充分利用我已有的功能，并将更多的代码添加到我的应用中，这样一个小小的功能就像使用关闭框在应用上显示图像一样。 – 2010-07-10 11:56:22

我喜欢jQuery Tools。当然，这是另一个图书馆，但非常值得！我将这个库包含在我的Web项目的大部分内容中。

只需将此行插入到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

高走可定制且非常有用！

来源

2010-07-09 19:33:30 Dutchie432

感谢您深思熟虑的回应:) – 2010-07-10 11:54:18

没问题。让我知道它是如何解决你的。 – Dutchie432 2010-07-12 12:25:58

我会去的jQueryUI的对话框：

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

来源

2010-07-09 18:55:02

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

回答

相关问题