QuickBox
Posted on | 十二月 11, 2009 | No Comments
Overview
QuickBox.js can be dropped into a page and immediately called to initialize the thumbnail images.JUST LIGHT THICKBOX
Requirements
The MooTools framework 1.2+, both Core and More, with the following packages:
Core: Core, Native, Class, Element, and FX Packages.
More: Asset Package.
Usage
Getting Started
QuickBox is very easy to start using. Just link your thumbnails to the full size images, and set the rel attributes to quickbox:
<a href=”/path/to/fullsize.jpg” rel=”quickbox“> <img src=”/path/to/thumbnail.jpg” alt=”Image Description” /> </a>
Then, simply link to the source files (css file in the head) and call the constructor:
<head> <link rel=”stylesheet” type=”text/css” href=”/path/to/quickbox.css” /> </head> <script type=”text/javascript” src=”/path/to/MooToolsCore.js“></script> <script type=”text/javascript” src=”/path/to/MooToolsMore.js“></script> <script type=”text/javascript” src=”/path/to/QuickBox.js“></script> <script type=”text/javascript”> new QuickBox(); </script>
That’s it! You can now click on your thumbnails and they will open the full size images in the same page. Captions for the images will be taken from the alt attribute of the thumbnails, unless you override it by specifying a title attribute in the links.
If things don’t look quite right, double check that the links to the image resources (the close and left/right buttons) aren’t broken.
相关文章:
评论|Comments
留言|Leave a Reply
Archives
- 2012年一月 (1)
- 2011年十二月 (1)
- 2011年十一月 (4)
- 2011年十月 (3)
- 2011年九月 (2)
- 2011年八月 (1)
- 2011年七月 (1)
- 2011年五月 (1)
- 2011年三月 (3)
- 2011年二月 (2)
- 2011年一月 (6)
- 2010年十一月 (2)
- 2010年十月 (10)
- 2010年九月 (7)
- 2010年八月 (4)
- 2010年七月 (11)
- 2010年六月 (14)
- 2010年五月 (14)
- 2010年四月 (20)
- 2010年三月 (61)
- 2010年二月 (71)
- 2010年一月 (59)
- 2009年十二月 (78)
- 2009年十一月 (61)
链接表
SUNSHINE
About
