具体的下载包,网上好像有很多,我只想说一下我在网站加这个效果时,遇到的一些问题。
给一个我用的下载包:http://www.cssrain.cn/article.asp?id=616
图片显示的页面
如果你想哪个图片有此效果就要给这个图片的的链接加上rel属性,否则不会有效果的哦,至于rel的值吗,我随便写也可以用的,无论把图片放在什么容器中,必须要有这个属性的。
在显示大图时你会发现左下脚,显示 "Showing image 1 from 1",有两个数字,这个是根据rel的值的来决定的,如果有多个相同的rel值,JQuery就会把这几个相同rel的图片列为一组,所以from后的数字就是这组成员数量啦。
每个图片要加上链接,至于链接的目标,我测试是没什么作用的,你必须要加title,这个是在现实打图像时那个图像名称,如果你没写的话,就会出现undefind
样式表中的有要显示时候需要用到的样式,你可以修改的。
/*显示的页面背景色*/
#ImageBoxOverlay {
BACKGROUND-COLOR: #ccc
}
/*最底部的背景色*/
#ImageBoxCaption {
BACKGROUND-COLOR: #f4f4ec
}
/*显示图片区域的那个样式*/
#ImageBoxContainer {
WIDTH: 250px; HEIGHT: 250px; BACKGROUND-COLOR: #f4f4ec
}
/*图片文字说明(也就是那个图片链接的title)样式,*/
#ImageBoxCaptionText {
FONT-WEIGHT: bold; FONT-SIZE: 13px; PADDING-BOTTOM: 5px; COLOR: #000
}
#ImageBoxCaptionImages {
MARGIN: 0px
}
/*鼠标移动到右边时显示的下张图片的那个背景图片*/
#ImageBoxNextImage {
BACKGROUND-IMAGE: url(spacer.gif); BACKGROUND-COLOR: transparent
}
/*鼠标移动到左边时显示的上一张图片的那个背景图片*/
#ImageBoxPrevImage {
BACKGROUND-IMAGE: url(spacer.gif); BACKGROUND-COLOR: transparent
}
/*鼠标移动到右边时显示的下张图片的那个表示图片*/
#ImageBoxNextImage:hover {
BACKGROUND-POSITION: right top; BACKGROUND-IMAGE: url(/imagebox/next_image.jpg); BACKGROUND-REPEAT: no-repeat
}
/*鼠标移动到左边时显示的上一张图片的那个表示图片*/
#ImageBoxPrevImage:hover {
BACKGROUND-POSITION: left bottom; BACKGROUND-IMAGE: url(/imagebox/prev_image.jpg); BACKGROUND-REPEAT: no-repeat
}
2009-4-17修正
在imagebox的使用过程,发现当鼠标移到有些图片上面时候,不能显示下一张和上一张的图片,最后测试发现啊,imagebox 中的a标签不能使用小写的,只能使用大写的A,呵呵 最近发现的。