2008-11-26 34 views
1

我想知道是否有可能有一种缩略图图片库,其中单击缩略图将显示图层中的完整图像。我想知道是否有可能加载所有图层和各自的图像,并使用JavaScript来改变z索引或类似的东西,以避免重新加载或离开页面。我宁愿避免使用服务器端技术,但不知道这是否可行。使用javascript处理css图层

编辑:

我不是在“收藏夹”的解决方案或任何覆盖的页面,我宁愿要一个形象出现在页面的一部分,并且变化无需刷新页面,基本上就像PIctureSlide链接下面。但更重要的是,我想知道如果不使用框架就可以很容易地编写代码,并且它可以像我上面想的那样工作?

+0

没有像jQuery这样的库,没有像它那样容易编写任何东西。您可以做到这一点,但您必须担心所有跨浏览器合规性问题和DOM遍历。 – acrosman 2008-11-26 11:59:44

回答

2

是的,你可以做到这一点没有一个框架:

<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×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> 
1

有大量的缩略图gallerys的(你所寻找的可能是接近的)除非你有特定的需求,否则你一定要自己写一个。如

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

+0

Popeye实际上是灯箱的替代品,在网页 – VonC 2008-11-26 11:45:45

1

我会建议GreyBox此,它非常小,并且与任何其他灯箱解决方案一样好。但是,如果您已经在同一页面上使用了JS框架(Mootools/jQuery/Prototype),那么您最好还是选择一个基于它的解决方案,这里有很多可以搜索的方法。如果您特别需要幻灯片放映功能(GreyBox没有AFAIK),我以前使用Slideshow Lightbox(基于原型)并取得成功。

0

这是可能的。你可以把所有的图像放在自己的div中,创建一个隐藏事物的CSS类,另一个可以用你想要的其他设置来显示图片。当有人点击athumbnail时,更改相应div上的班级以显示正确的图像,并隐藏所有其他人。

也就是说,如果你不介意闪光灯的要求,已经有几种闪光工具可以做到这一点。

如果你用JavaScript做到这一点,确保你使用像jQuery或Scriptaculas这样的库来处理跨浏览器问题。我曾经用直接的JavaScript做过类似的事情,这真是一场噩梦。

+0

Thankyou中有更好的整合性,我主要想了解它如何工作。你会如何改变一个单独的div类的链接? – 2008-11-26 11:55:36

+0

使用链接的onClick()属性。 “...'href ='#'onClick ='ShowImage(4); return false;'...” – acrosman 2008-11-26 12:01:53

0

当然是可能的,虽然大多数框架将为您提供灯箱你不想

我总是建议得到JS改变对象类让CSS处理如何表示,但JS是动画所必需的,如果这是你需要的