Question

我想知道是否有可能有一种缩略图库，其中点击缩略图会在图层中显示完整图像。我想知道是否可以加载所有图层和相应的图像，并使用javascript更改z索引或类似的东西，以避免重新加载或离开页面。我宁愿避免使用服务器端技术，但不知道这是否可行。

编辑：

我不是在“灯箱”解决方案或覆盖页面的任何内容之后，我宁愿想要将图像显示为页面的一部分，并且在不重新加载页面的情况下进行更改，基本上就像下面链接的PIctureSlide一样。但更重要的是，我想知道如果不使用框架就可以轻松编写，如果它能像我上面想的那样工作呢？

Answer 1

是的，你可以在没有框架的情况下做到这一点：

<div id='big' style='width:500px;height:500px'></div>
<a href="javascript://load big image" onclick="document.getElementById('big').style.backgroundImage='url(Big.gif)'"><img border="0" src="images/Thumb.gif" /></a>

以下是使用Prototype库的简单示例：

<div id='big' style='width:500px;height:500px'></div>
<a href="javascript://load big image" onclick="$('big').style.backgroundImage='url(Big1.gif)'"><img border="0" src="thumb1.gif" /></a>

此脚本假设大图像都是500 x 500像素。

这是另一种方法：

<div id='big'></div>
<a href="javascript://load big image" onclick="loadBig('Big1.gif')"><img border="0" src="thumb1.gif" /></a>
<script type="text/javascript">
function loadBig() {
    $('big').innerHTML = "<img src='Big1.gif'>"
}
</script>

Answer 2

除非您有特殊需要，否则周围有很多缩略图画廊可以自己写一个。比如

http://www.huddletogether.com/projects/lightbox/

Answer 3

我会为此推荐GreyBox，它非常小，效果与其他任何灯箱解决方案一样好。

但是，如果您已经在同一页面上使用了JS框架（Mootools / jQuery / Prototype），那么您也可以选择基于它的解决方案，有很多可以用Google搜索。如果您特别需要幻灯片放映功能（GreyBox没有AFAIK），我过去曾使用Slideshow Lightbox（基于原型）成功。

Answer 4

JQuery应该能够制作出你想要的东西。

您有多个缩略图，例如：

Picture-slide
JQuery Popeye（可能与您要找的内容相近）

Answer 5

另一个可能比灯箱更完整（即使没问题），如果您不使用jquery或任何其他库，我建议整体： http://www.mjijackson.com/shadowbox/

Answer 6

这是可能的。您可以将所有图像放在自己的div中，创建一个隐藏内容的CSS类，另一个用您想要的任何其他设置显示图片。当有人点击“旁边”时，更改相应div上的类以显示正确的图像，并隐藏所有其他图像。

也就是说，如果您不介意闪存要求，已经有几种闪存工具可以做到这一点。

如果您使用JavaScript执行此操作，请确保使用jQuery或Scriptaculas等库来帮助处理跨浏览器问题。我曾经使用直接的JavaScript做过类似的事情，这是一场噩梦。

Answer 7

当然可以，但大多数框架都会为您提供您不想要的灯箱

我总是建议让JS更改对象类并让CSS处理它的表示方式，但如果你需要的话，动画需要JS

用javascript操纵css层

7 个答案: