JS click on the image in the current page to enlarge and close the beautiful effect

  • 2020-03-26 21:27:40
  • OfStack

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

(link: #)

How to use:

Step 1 - installation
Lightbox v2.0 USES the Prototype framework and Scriptaculous effects library.
< The script type = "text/javascript" SRC = "js/prototype js >" < / script>
< Script type = "text/javascript" SRC = "js/scriptaculous. Js? The load effects of = "> < / script>
< The script type = "text/javascript" SRC = "js/lightbox js >" < / script>
2. Export the Lightbox CSS file (or add the Lightbox style to your existing style sheet).
< Link rel="stylesheet" href=" CSS /lightbox.css" type="text/ CSS "media="screen" />
3. Check the CSS and make sure that the prev.gif and next.gif files are in the correct locations.

Step 2 - activate
1. 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: add a description using the title attribute.
2. If you have a set of related images that you want to group, follow up on the previous one and add a group name with square brackets to the rel attribute, for example:
< 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 to the number of pictures per page and the number of pictures per picture group. Crazy!

(link: #)

Related articles: