Lightbox JS v2.51 with print button

by Lokesh Dhakar
print-button by Vincent Verbruggen

Update for Opera (2012-07-31)

Some people were having issues in Opera since it does not allow you to print the contents of an iframe without the rest of the parent page.
I've added additional code to work around this problem in Opera, but it's not that elegant: a new window will be created when pressing the Print-button. The user himself needs to close the window after printing.

Download

You can download the newest version from: http://sandbox.tse-webdesign.be/lightbox-print/lightbox-print.zip

Version

This is the most recent version of Lightbox where a Print-button has been added.
This newest version uses an iframe to print the image shown in the Lightbox, which is more reliable than using a print stylesheet.

Older versions

Example

How to Use:

Part 1 - Setup

  1. Lightbox v2.51 uses the jQuery framework. You will need to include these Javascript files in your webpage.
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="js/lightbox.js" type="text/javascript"></script>
    
  2. Include the Lightbox CSS file.
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    
  3. Check the CSS and make sure that the images referenced in the stylesheet point to the correct location. Also, make sure loading.gif and close.png referenced near the top of lightbox.js are in the right location.

Part 2 - Activate

  1. Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example:
    <a href="images/examples/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
    
    Optional: Use the title attribute if you want to show a caption.
  2. If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in 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>
    
    No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!