Skip to content

A simple lightbox plugin for displaying an image as a scaled up image.

Notifications You must be signed in to change notification settings

manutdkid77/minimal-lightbox

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 

Repository files navigation

Minimal Lightbox

A simple lightbox module for displaying an image as a scaled up image.

Usage

  1. Download the latest version,which includes both javascript and css files from here

  2. To set up the lightbox on your page, inlucde both the css and javascript as follows:

    • Include the CSS at the top of your page in your tag:
          <link href="path/to/lightbox.css" rel="stylesheet">
      
    • Include the Javascript at the bottom of your page before the closing tag:
          <script src="path/to/lightbox.js"></script>
      
  3. Minimal Lightbox requires jQuery, so make sure it is included

    • Make sure jQuery is loaded before lightbox.js.
    • jQuery 1.7 or greater is required.

Initialize

  1. Make sure that the <img> to be displayed by the lightbox is enclosed within an <a class="lightbox-link"></a> tag

    Example

    <a class="lightbox-link">
    	<img src="images/image1.jpg" alt="Image Description Here">
    </a>
  2. The content of the <alt> tag will be displayed below the image in the lightbox.

  3. In your script.js file, initialize the plugin as follows.

        $('.lightbox-link').lightbox();
    

Roadmap

  1. Provide smoother transitions.
  2. Make Images to be displayed in a carousel/gallery manner.
  3. Write a vanilla javascript alternative for the plugin.

Browser Support

  • Chrome
  • Firefox
  • Safari
  • Opera

About

A simple lightbox plugin for displaying an image as a scaled up image.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published