popbox 图片缩略图应用封装类

popbox的默认配置可能会被大多数人使用，因为它是专门适合缩略图扩展的应用计划，很多都在应用在各自网站上。我在这个网页中举所有的例子用同样的图片，以便更容易表现出这个工具的特性和差异。你可以点击在此页的任何一个样本图像以查看结果。

1. 加入这段脚本包含popbox代码。例如：
<script src=”/yoursite/scripts/PopBox.js” mce_src=”/yoursite/scripts/PopBox.js” type=”text/javascript”></script>

2. 修改全局变量，以支持你网站的目录结构
<script type=”text/javascript”>
popBoxWaitImage.src=”/images/spinner40.gif” mce_src=”/images/spinner40.gif”;
popBoxRevertImage = “/images/magminus.gif”;
popBoxPopImage = “/images/magplus.gif”;
</script>
3. 创建CSS样式用来定义在图片缩略前或者缩略后的效果
.PopBoxImageSmall
{
   border: none 0px white;
   cursor: url(”http://yourpath/magplus.cur“), pointer;
}
.PopBoxImageLarge
{
   border: solid thin #CCCCFF;
   cursor: url(”http://yourpath/magminus.cur“), pointer;
}

3 2.0版本增加了一个新的简单方式来设定popbox ，使您可以使用单独的图片让您缩略图和你的图片出现。 popbox 2.x中，是100%向后兼容，并仍支持原方法。版本2.x中，也可以让你省去调用函数，因为它会自动生成。
2.x版本的方法：
1.准备一张缩略图和一张扩大的图。你浏览器支持的图片类型，popbox也支持。
2.将图片防止在<img>标签中。
你可以设置ID属性和唯一的继承，好的代码习惯应该是为每一张图片都定义（确保他们是唯一的）
<img id=”imgBlueScoop” alt=”"
src=”images/BlueScoopSmall.JPG” mce_src=”images/BlueScoopSmall.JPG” />

4. 为popbox图片添加”pbsrc”或者”pbsrcnl”属性到<img>标签内。NL是pbsrcnl并不会读取图像，在页面有加载的事件，而是在用户点击图片时加载。
<img id=”imgBlueScoop” alt=”"
src=”images/BlueScoopSmall.JPG” mce_src=”images/BlueScoopSmall.JPG”
pbsrc=”images/BlueScoop.JPG” mce_src=”images/BlueScoop.JPG” />

4 加入” pbcaption “属性，如果你希望有一个字幕出现在图片的底部。（如果pbcaption是没有设置，但你已经确立了一个”标题” ，那么”标题”将被用来作为说明。见变量章节以获取更多信息。）
<img id=”imgBlueScoop” alt=”"
src=”images/BlueScoopSmall.JPG” mce_src=”images/BlueScoopSmall.JPG”
pbsrc=”images/BlueScoop.JPG” mce_src=”images/BlueScoop.JPG”
pbCaption=”I don’t know where we got these beach toys, but they make for a nice contrasting photograph against the darker sand of Folsom Lake. It’s not the greatest beach, but it’s a beach, and that’s a very nice change from a cube wall” />

6 可选择的其他属性
<img id=”imgBlueScoop” alt=”"
src=”images/BlueScoopSmall.JPG” mce_src=”images/BlueScoopSmall.JPG”
pbsrc=”images/BlueScoop.JPG” mce_src=”images/BlueScoop.JPG”
pbCaption=”I don’t know where we got these beach toys, but they make for a nice contrasting photograph against the darker sand of Folsom Lake. It’s not the greatest beach, but it’s a beach, and that’s a very nice change from a cube wall”
class=”PopBoxImageSmall”
title=”Click to magnify/shrink” />

7 在你希望演示的图片上加载事件。POPBOX的一个事件是控制放大图片的，而另一个事件是将图恢复原样到缩略图状态。在2.0版本中，如果你使用的onclick或者onmouseover那么请调用自动生成的事件。
<img id=”imgBlueScoop” alt=”"
src=”images/BlueScoopSmall.JPG” mce_src=”images/BlueScoopSmall.JPG”
pbsrc=”images/BlueScoop.JPG” mce_src=”images/BlueScoop.JPG”
pbCaption=”I don’t know where we got these beach toys, but they make for a nice contrasting photograph against the darker sand of Folsom Lake. It’s not the greatest beach, but it’s a beach, and that’s a very nice change from a cube wall”
class=”PopBoxImageSmall”
title=”Click to magnify/shrink”
onclick=”Pop(this,50,’PopBoxImageLarge’);” />

演示地址：http://www.c6software.com/Products/PopBox/Default.aspx

popbox 图片缩略图应用封装类

有话要说