jQuery插件---ImageBox的使用

具体的下载包，网上好像有很多，我只想说一下我在网站加这个效果时，遇到的一些问题。

给一个我用的下载包：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，呵呵 最近发现的。

转载于:https://www.cnblogs.com/Longkin/archive/2008/10/24/1318938.html