一个web图片浏览器：lightbox

daoger

浏览: 529729 次
性别:
来自: 山东济南

最近访客更多访客>>

sargeguo

leigh94

Atomic

ycj_xiyang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

浏览器 Web CSS IE UP

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.

<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

分享到：

Ant打包下载操作是否冲突？ | 程序中使用ANT

2008-03-04 16:57
浏览 2971
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论