Dreamweaver Templates

inserting Lightbox in dreamweaver


Learn how to easily insert lightbox for your images in Dreamweaver.

Lightbox is a simple, unobtrusive script used to overlay thumbnail images on the current page. When a user clicks on the thumbnail, a larger preview opens with the option of captions and links.

Lightbox is a plugin for jQuery. It was developed by Lokesh Dhakar.

EXAMPLE

Single Images (click on images)

Grouped Images (click on images)

SETUP

  1. Lightbox uses the Prototype Framework and Scriptaculous Effects Library. You will need to download these files and include these three Javascript files in the header of your html page (between the head tags <head> </head> in this order).

    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>


    Download Lightbox


  2. Include and link your html page to the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).

    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />


  3. Check the CSS and make sure the referenced prev.gif and next.gif files are in the right location. Also, make sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location.

 

INSERTING THE CODE

  1. Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example:

    <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

    Tip: 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[thailand]">image #1</a>
    <a href="images/image-2.jpg" rel="lightbox[thailand]">image #2</a>
    <a href="images/image-3.jpg" rel="lightbox[thailand]">image #3</a>

    There is no resrtiction to the number of image sets per page or how many images are allowed in each set.

  3. If you find that the prev.gif and next.gif are not displaying in the larger preview, then open the style sheet named 'lightbox.css' in Dreamweaver and change the paths of these images to point to your main images folder of your site.

    #prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
    #nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }


    Copy and paste these two images to this main images folder.

    Save the 'lightbox.css' file to your main folder where your html file reside. Your html file should inseatd point to:

    <link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />


Top 2 Premium Lightbox scripts. Click on banners below.

Lightbox Evolution

 

Imagebox Lightbox script

 










Home | Terms of Use | Private Policy | Refund Policy
Copyright 2002 - 2012 Dreamweaver-Templates.net - Dreamweaver © is a registered trademark of Adobe Systems Incorporated.