2008-03-04
一个web图片浏览器：lightbox
Recently,I found this excellent picture browser.You can get the newest version from this url: http://www.huddletogether.com/projects/lightbox/
Lightbox JS by Lokesh Dhakar - email
Overview
Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.
Note: An new version of this script is available: Lightbox JS v2.0
Benefits
Places images above your current page, not within. This frees you from the constraints of the layout, particularly column widths.Keeps users on the same page. Clicking to view an image and then having to click the back button to return to your site is bad for continuity (and no fun!).
How to Use:
1. Include lightbox.js in your header.
2. Add rel="lightbox" attribute to any link tag to activate the lightbox. For example:
Optional: Use the title attribute if you want to show a caption.
Customizing:
1, You can use CSS to style the image container. Here is the code used in the examples above:
#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#lightbox img{ border: none; }
#overlay img{ border: none; }
2, To create the 'shadow' effect over the page, you'll need to use a PNG file and some extra CSS. The CSS is a bit messy thanks to IE's unorthodox support of PNG transparency:
#overlay{ background-image: url(overlay.png); }
* html #overlay{
background-color: #000;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}
3, If you would like to show the user a 'loading' graphic, like the animated progress bar in the examples above, specify its location at the top of the lightbox.js file.
4, In the same vein, if you would like to use a 'close button', like the 'X' graphic in the examples above, specify its location at the top of the lightbox.js file.
Troubleshooting:
It doesn't work at all. The image opens up in a new window.
This is commonly caused by a conflict between JS scripts. Check your body tag and look for an onload attribute. Example:
A quick fix to this problem is to append the initLightbox() to the onload attribute as so:
It doesn't work if I click an image before the page has finished loading.
This is not a bug, but a side-effect of unobtrusive scripts of this kind.
Flash objects appear through overlay.
Refer to comment by netasceta.
Script doesn't work with imagemaps.
Refer to comment by Jason Buechler.
Can I call the script from within a frame/iframe and still have it display on top of the entire page?
Refer to comment by Sean K. Some people have noted trouble implementing this modification. Proceed with caution, and if you can clear up the instructions it would be appreciated.
The shadow overlay doesn't stretch to cover full browser window.
Remove the default margin and padding from the body tag. Add
The shadow overlay doesn't show up in IE.
Find the filter: progid:DXI… line that you added to your stylesheet. There is a reference to the overlay.png in this line. Make sure that it is set relative to the current webpage, not relative to the CSS file
Lightbox JS by Lokesh Dhakar - email
Overview
Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.
Note: An new version of this script is available: Lightbox JS v2.0
Benefits
Places images above your current page, not within. This frees you from the constraints of the layout, particularly column widths.Keeps users on the same page. Clicking to view an image and then having to click the back button to return to your site is bad for continuity (and no fun!).
How to Use:
1. Include lightbox.js in your header.
<script type="text/javascript" src="lightbox.js"></script>
2. Add rel="lightbox" attribute to any link tag to activate the lightbox. For example:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
Optional: Use the title attribute if you want to show a caption.
Customizing:
1, You can use CSS to style the image container. Here is the code used in the examples above:
#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#lightbox img{ border: none; }
#overlay img{ border: none; }
2, To create the 'shadow' effect over the page, you'll need to use a PNG file and some extra CSS. The CSS is a bit messy thanks to IE's unorthodox support of PNG transparency:
#overlay{ background-image: url(overlay.png); }
* html #overlay{
background-color: #000;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}
3, If you would like to show the user a 'loading' graphic, like the animated progress bar in the examples above, specify its location at the top of the lightbox.js file.
var loadingImage = 'loading.gif';
4, In the same vein, if you would like to use a 'close button', like the 'X' graphic in the examples above, specify its location at the top of the lightbox.js file.
var closeButton = 'close.gif';
Troubleshooting:
It doesn't work at all. The image opens up in a new window.
This is commonly caused by a conflict between JS scripts. Check your body tag and look for an onload attribute. Example:
<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;">
A quick fix to this problem is to append the initLightbox() to the onload attribute as so:
<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()">
It doesn't work if I click an image before the page has finished loading.
This is not a bug, but a side-effect of unobtrusive scripts of this kind.
Flash objects appear through overlay.
Refer to comment by netasceta.
Script doesn't work with imagemaps.
Refer to comment by Jason Buechler.
Can I call the script from within a frame/iframe and still have it display on top of the entire page?
Refer to comment by Sean K. Some people have noted trouble implementing this modification. Proceed with caution, and if you can clear up the instructions it would be appreciated.
The shadow overlay doesn't stretch to cover full browser window.
Remove the default margin and padding from the body tag. Add
body{ margin: 0; padding: 0; }
to your stylesheet.
The shadow overlay doesn't show up in IE.
Find the filter: progid:DXI… line that you added to your stylesheet. There is a reference to the overlay.png in this line. Make sure that it is set relative to the current webpage, not relative to the CSS file
- 16:57
- 浏览 (330)
- 评论 (0)
- 分类: javascript
- 相关推荐
发表评论
daoger
- 浏览: 183737 次
- 性别:
- 来自: 山东济南
- 详细资料
搜索本博客
我的相册
共 105 张
最近加入圈子
最新评论
-
一个女生的爱情观
buaawhl 写道swflora 写道为啥这样的热点帖我却看不下去了。 是老了 ...
-- by 小虫1313 -
一个女生的爱情观
swflora 写道为啥这样的热点帖我却看不下去了。 是老了还是麻木了？ 成熟 ...
-- by buaawhl -
一个女生的爱情观
为啥这样的热点帖我却看不下去了。 是老了还是麻木了？
-- by swflora -
一个女生的爱情观
weiweichen1985 写道都知道爱情应该是白的，毫无瑕疵。。。 但是在残 ...
-- by daoger -
一个女生的爱情观
都知道爱情应该是白的，毫无瑕疵。。。 但是在残酷的现实面前，你我都选择了面对实际 ...
-- by weiweichen1985
评论排行榜