2

我正在寻找一个库或脚本来在灯箱中打开单个图像。到目前为止，我发现的所有库都需要一个 html-anchor 作为图像的父标签和一个缩略图。

<a href="image.jpg" class="popout"><img src="thmumbnail.jpg"></a>

我没有任何缩略图，因为我直接从在线存储位置以“网络友好”的分辨率/大小加载/嵌入图片。所以我想做的是这样的：

<img class="popout" src="www.photobucket.com/myimage.jpg" height="300" width="500">

而高度/宽度也将在 css 中指定。我想这样做的一个原因是，我已经写了大约 100 张图片的文章。所以我不想将它们全部嵌入锚点......

回到这个问题：是否有一个库或脚本可以让我这样做？

4

4 回答 4

4

从这里获取一个新lightbox.js文件：Lightbox 2 插件在任何编辑器中
打开： 找到以下编写的代码： lightbox.js

Lightbox.prototype.enable = function() {
  var _this = this;
  return $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox]', function(e) {
    _this.start($(e.currentTarget));
    return false;
  });
};

在其中用以下代码替换第三行：

return $('body').on('click', 'img[rel^=lightbox], area[rel^=lightbox]', function(e) {

现在在里面lightbox.js搜索这个词href并将其替换为src. href为该文件中的所有内容执行此.js操作。
将此.js文件包含在您的项目中。
图片的 HTML 代码将变为：

<img class="popout" 
     src="www.photobucket.com/myimage.jpg" 
     rel="lightbox[plants]" 
     title="Say something about this image">

基本上我们正在改变的是

  • 添加rel属性：
    如果两个或多个图像包含相同rel的属性，它们将显示为图像集。
  • 添加标题属性：
    它只会在灯箱上显示您的图像信息。

更新：
如果您的缩略图 src 与您的实际图像 src 不同，那么您可以向<image>as添加一个属性value： 

<img class="popout" 
     src="thumbnail path" 
     value="actual image path"
     rel="lightbox[plants]" 
     title="Say something about this image">

但是要再次添加它，您必须将href关键字从更改lightbox.js为value。
然后你们都完成了。

于 2012-10-25T13:02:25.797 回答
2

您几乎可以使用任何能够手动调用它的类似灯箱的脚本。示例（使用fancybox）：http: //jsfiddle.net/eXaGn/

就像 fancbybox 一样：

$("img").click(function() {    
    $.fancybox.open(this.src);    
    return false;    
});​
于 2012-10-25T13:00:28.827 回答
1

您可以使用彩盒：http ://www.jacklmoore.com/colorbox

然后您的代码可能如下所示：

$(".popout").on("click", showImage);
function showImage(e)
{
    $.colorbox({href:$(e.currentTarget).attr("src")});
}
于 2012-10-25T12:57:04.070 回答
0

我需要类似的功能并决定使用 SimpalModal

http://www.ericmmartin.com/projects/simplemodal/

我喜欢你可以传入一个 html 字符串，它会从中生成模态，我可以以编程方式生成模态，不需要嵌入内容或标签来触发模态

于 2012-10-25T13:00:28.700 回答