javascript - 用于显示图像的简单 jquery 灯箱

标签 javascript jquery html css lightbox

我不敢相信我会问这个 - 但我花了最后两个小时寻找一个简单的 jquery 灯箱给我的学生学习如何实现...

我需要的是非常简单的东西:

我有一堆图片,当我点击它们时,我需要一个灯箱来打开我可以指定的(不同的)图片...我只是找不到任何可以做到这一点的东西。当然,灯箱需要表现得像标准灯箱(X- 关闭按钮、缩放到图像大小、有一行标题等)

类似于:

$('.this-image').click(function(){
    awesomelightbox.open('new url');
})

我检查过的大多数灯箱要么打开与点击相同的图像,要么有大量我的学生无法理解的选项。

我试过:

 - LightBox
 - ColorBox 
 - FancyBox 
 - VisualLightbox 
 - Featherlight

没有什么符合我的要求:(

有谁知道有什么简单的灯箱可以实现我提到的功能吗?如果有任何指点,我将不胜感激。

最佳答案

实际上,使用 Fancybox 就可以做到。我去了他们的"How To"他们有一个例子。查看页面上的最后一段代码。如果您只想显示 2 个不同的图像,您可以使用他们的方法。请注意他们有一个 small.jpg 和一个 big.jpg,所以本质上他们使用了 2 个不同的图像。这样他们就可以将一张图片用作缩略图,将一张较大的图片用作实际的花式框。这是您要找的吗?

编辑:或者如果您想使用我的插件,欢迎您从我的网站获取它。这是一个示例,检查源代码以了解用法。

http://tylerteaching.com/coolbox/

关于javascript - 用于显示图像的简单 jquery 灯箱,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31078505/

相关文章:

javascript - CoffeeScripts 类 - 在回调中访问属性

javascript - 使用 Ajax POST 请求将图像和 JSON 数据发送到服务器?

javascript - JS 密码表单检查

javascript - 简单的 React 组件抛出 "too much recursion"错误

javascript - 设置占位符值

javascript - 文本区域可编辑,输入值除外

javascript - 如何在 JQuery 中按日期对 xml 数据进行排序

html - 如何根据浏览器大小设置文字大小?

javascript - HTML5 - Web SQL 数据库文件存储和所有表的创建位置

javascript - 如何使一组水平的 div 具有 flex