jquery中thickbox的使用

thickbox使用

1.一张图片

描述:

这是ThickBox的一个简单实例，这个例子展示了在中放置一张图片（请看演示）。

说明:

• 创建一个link元素 (<a href>)
• 给创建的这个link元素一个class属性，其值是：thickbox (class="thickbox")
• 在href属性中指定一个张图片地址(.jpg .jpeg .png .gif .bmp)

<a href="Upimg/single.jpg" title="add a caption to title attribute / or leave blank" class="thickbox"><img src="Upimg/single_t.jpg" alt="Single Image"/></a>

2.多张图片

描述:

这个例子和单张图片差不多，但他允许使用rel属性使多张图片成为一组，在ThickBox里导航。这种完美的使用方法适用于图片集。

使用说明:

• 创建一个link元素 (<a href>)
• 给创建的这个link元素一个class属性，其值是：thickbox; (class="thickbox")
• 在href属性中指定一个张图片地址 (.jpg .jpeg .png .gif .bmp)
• 给每一个link元素一个相同的rel值。（比如：rel="gallery-plants"）

重点提醒:

当你打开一个ThickBox图片集的时候, 你能通过键盘的左右箭头键向前和向前和向后导航（在 ThickBox 里也提供了Next和Previous的链接）。 图片将会在图片集中按HTML文档流程从第一张显示到最后一张。

<a href="Upimg/plant1.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="Upimg/plant1_t.jpg" alt="Plant 1" /></a>

<a href="Upimg/plant2.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="Upimg/plant2_t.jpg" alt="Plant 2" /></a>

<a href="Upimg/plant3.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="Upimg/plant3_t.jpg" alt="Plant 3" /></a>

<a href="Upimg/plant4.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="Upimg/plant4_t.jpg" alt="Plant 4" /></a>

3.内嵌内容

描述:

页面中的内嵌内容，隐藏的或是显示的均可以放置在ThickBox中。

使用说明:

• 创建一个link元素(<a href>)
• 给创建的这个link元素一个class属性，其值是：thickbox (class="thickbox")
• 给link元素的href属性设置为: #TB_inline
• 在href属性的值#TB_inlineIn后面追加一下字符:

  ?height=300&width=300&inlineId=myOnPageContent

• 根据你的实际需要更改height, width, 和 inlineId的值（这里的inlineID就是包含你想显示在ThickBox上的内容的容器的id）。
• 当然你也可以在参数字符串中加 modal=true(比如. #TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true) 这样当关闭ThickBox时会调用ThickBox内部的一个tb_remove()函数。在演示中查看“显示隐藏模式的内容”则要求点击yes 或 no才能关闭ThickBox。

重点提醒:

如果内嵌在ThickBox的内容多于ThickBox显示的尺寸，一个滚动条会出现。请确认ThickBox的尺寸和内容的匹配避免出现滚动条而显示全部内嵌内容。也就是说，如果不想要滚动条，你可以增加ThickBox的宽和高直到内嵌的内容不需要滚动条就能全部显示。

<input alt="#TB_inline?height=300&width=400&inlineId=myOnPageContent" title="add a caption to title attribute / or leave blank" class="thickbox" type="button" value="Show" />