Gallery Lightbox

Objective

  • To create an interactive gallery with the use of LightBox

 Getting started

  1. Download the zip file
  2. Open up the zip file of the working example that is included in the lightbox folder.
  3. Start by including the Lightbox CSS and Javascript.
    You can grab both these files from the lightbox folder.

    • Include the CSS at the top of your page in your <head> tag:
      <link href="lightbox.css" rel="stylesheet" type="textlightbox-css/css">
    • Include the Javascript at the before the closing </head> tag:
      <script src="lightbox-plus-jquery.js"></script>lightbox-js
  4. Confirm that the four images loaded by lightbox.css are in the correct location.
    You can grab the images from the images-lightbox folder.lightbox-images

Initialize with HTML

Add a data-lightbox attribute to any image link to enable Lightbox. 
Add a data-title attribute to show a Story description for the image (caption).

REFER to this EXAMPLE for the codeafter-lightbox-set-desc

If you have a group of related images that you would like to combine into a set, use the same data-lightbox attribute value for all of the images. For example:
after-lightbox-set


This is what the <head> tag looks like after:
after-head


Resource
Lightbox