1. Lightbox JS (and Friends)

    April 12th, 2007 Web414 Meeting

  2. License

    (cc) Creative Commons BY
  3. What is Lightbox JS?

  4. Lightbox JS markup example

    
    <!-- Include lightbox.js in your header -->
    <script type="text/javascript" src="lightbox.js"></script>
    
    
    
    
    
    
    
  5. Lightbox JS markup example

    
    <!-- Include lightbox.js in your header -->
    <script type="text/javascript" src="lightbox.js"></script>
    
    <!-- Add rel="lightbox" attribute to any link tag to activate the lightbox -->
    <a href="images/image-1.jpg" rel="lightbox">image #1</a>
    
    
    
    
  6. Lightbox JS markup example

    
    <!-- Include lightbox.js in your header -->
    <script type="text/javascript" src="lightbox.js"></script>
    
    <!-- Add rel="lightbox" attribute to any link tag to activate the lightbox -->
    <a href="images/image-1.jpg" rel="lightbox">image #1</a>
    
    <!-- Optional: Use the title attribute to add a caption -->
    
    
  7. Lightbox JS markup example

    
    <!-- Include lightbox.js in your header -->
    <script type="text/javascript" src="lightbox.js"></script>
    
    <!-- Add rel="lightbox" attribute to any link tag to activate the lightbox -->
    <a href="images/image-1.jpg" rel="lightbox">image #1</a>
    
    <!-- Optional: Use the title attribute to add a caption -->
    <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
    
    
  8. What it looks like

    What it looks like: Before
  9. What it looks like

    What it looks like: After
  10. But wait! There's more... Lightbox JS v2.0

  11. Lightbox JS v2.0 markup example

    
    <!-- Lightbox v2.0 uses Prototype.js and the Scriptaculous Effects Library.
          You will need to include these three Javascript files in your header. -->
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    
    <!-- Include the Lightbox CSS file -->
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    
    <!-- Add rel="lightbox" attribute to any link tag to activate the lightbox -->
    <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
    
    <!-- Create a set by adding a group name between square brackets -->
    <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>
    
    
  12. What else is there?

  13. Thanks

  14. Colophon