代码之家 › 专栏 › 技术社区 › codingbadger

从超链接通过lightbox(或similier)查看图像

css html javascript

codingbadger · 技术社区 · 14 年前

我想通过lightbox(或类似的东西)查看一个图片库。唯一的问题是我需要通过超链接在查看器中显示图像集,而不是显示图像集的缩略图。

有人知道这是否可能吗?如果可能的话,你能告诉我正确的方向吗?

编辑:

我编辑了这个,希望能澄清我的问题。

我要做的是有一个超链接,当单击它时,会打开一个灯箱(或弹出式查看器/库的类型),其中包含用户可以滚动浏览的多个图像。

谢谢

巴里

3 回复 | 直到 14 年前

phoenix24 14 年前

如果您使用的是jquery,那么 FancyBox 是一个很好的lightbox插件来满足您的需要。

在fancybox中,您可以使用的是,当单击超链接时,在lightbox中显示图像的内联模式窗口。

本页底部有为您量身定制的示例: Examples of manual call

Andreas Schuldhaus 14 年前

使用lightbox、shadowbox或类似的东西,使用没有缩略图的链接是没有问题的。

<a rel="lightbox[picturegallery]" href="pic1.jpg" title="Pic1">Pic1</a>
<a rel="lightbox[picturegallery]" href="pic2.jpg" title="Pic2">Pic2</a>
<a rel="lightbox[picturegallery]" href="pic3.jpg" title="Pic3">Pic3</a>

可以找到更多信息和代码示例 here 。

meo 14 年前

这可能是方向。

$('a').click(function(){
var that = $(this)
var html= that.attr('href') // Read the href of the link and use it as reference for your lightbox.
$('body').append('<div id="shadow"><div id="fancybox"><img src="' + html +'" alt="pic" /></div></div>')
    $('#shadow').click(function(){
        $(this).remove()
    })
return false;
})

你可以在这里测试: http://jsfiddle.net/hRcWN/2/