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. Make sure jQuery, which is required by Lightbox, is also loaded.
    • If you already use jQuery on your page, make sure it is loaded before lightbox.js. jQuery 1.7 or greater is required.
    • If you are not currently using jQuery, I’ve created a packaged file that includes both Lightbox and jQuery. Include js/lightbox-plus-jquery.js instead of lightbox.js.lightbox-head
  5. 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. For the value of the attribute, use a unique name for each image. For example:
after-lightbox-no-desc
Optional: Add a data-title attribute if you want to show a captionafter-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
Advertisements