一个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