Home  >  Article  >  Web Front-end  >  JS realizes the beautiful effect of clicking on the picture to enlarge and close it on the current page_javascript skills

JS realizes the beautiful effect of clicking on the picture to enlarge and close it on the current page_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:19:311809browse

Lightbox JS is a simple and humble script for overlaying images on the current page. It can be quickly installed and works in all popular browsers.

Click here to view a demo

How to use:

Step 1 - Installation
1. Lightbox v2.0 uses the Prototype framework and Scriptaculous effects library. You will need to externally tune these three Javascript file in your header.





2. Externally load the Lightbox CSS file (or add the Lightbox style to your current style sheet).

3. Check the CSS and make sure that the called prev.gif and next.gif files are in the correct location. Also make sure that the called loading.gif and close.gif files and the lightbox.js file are in the correct location. Location.

Step 2 - Activate 1. Add the rel="lightbox" attribute to any link tag to activate lightbox. For example:

image #1
Optional: Use the title attribute to add a description. 2. If you have a set of related pictures that you want to group, continue the previous step and add a group with square brackets in the rel attribute Name. For example:
image #1
image #2

image #3
3. No limit to each page The number of picture groups and the number of pictures per picture group. Crazy! Download: Lightbox JS v2.02

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn