Lightbox JS V2.0

Source: Internet
Author: User

Lightbox JS V2.0 is an image preview program. It is easy to get rid of the inconvenience caused by the opening of a new window when previewing thumbnails. It uses a transparent PNG background to open a transparent layer on the same page to preview the image, with a mouse click, you can close the floating layer and return to the original screen. It is very practical and beautiful. What's better is that lightbox JS is compatible with browsers such as IE, NS, and Firefox, independent JS makes installation easier.

Program Demo: http://mysheji.com/blog/attachments/lightbox2/index.html

How to Use lightbox JS V2.0?

1. Place JS between

[Copy to clipboard]

Code:

<SCRIPT type = "text/JavaScript" src = "JS/prototype. js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "JS/scriptaculous. js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "JS/lightbox. js"> </SCRIPT> 2. Place CSS between

[Copy to clipboard]

Code:

<LINK rel = "stylesheet" href = "CSS/lightbox.css" type = "text/CSS" Media = "screen"/> 3. You can freely create and change the X, up, and down images.

(1) Add rel = "lightbox" to the position where you want to use lightbox. Example:

[Copy to clipboard]

Code:

<A href = "images/image-1.jpg" rel = "lightbox" Title = "My caption"> image #1 </a> another: You can replace the name in the title, used to display the image name Title = "change to image description text"
(2) If you want to use several images, use the up and down arrows to change the display. Example:

[Copy to clipboard]

Code:

<A href = "images/image-1.jpg" rel = "lightbox [roadtrip]"> image #1 </a>
<A href = "images/image-2.jpg" rel = "lightbox [roadtrip]"> image #2 </a>
<A href = "images/image-3.jpg" rel = "lightbox [roadtrip]"> image #3 </a> 3. There is no limit on the number of images or images in a group!

Program author Lokesh dhakar
Http://www.fslesheng.com/lightbox2.rar

[This post was last edited by hmilyheart]

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.