lightbox2/index.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"\r
   2         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">\r
   3 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">\r
   4 <head>\r
   5         \r
   6         <title>Lightbox JS v2.0 | Test Page</title>\r
   7 \r
   8         <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />\r
   9         \r
  10         <script src="js/prototype.js" type="text/javascript"></script>\r
  11         <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>\r
  12         <script src="js/lightbox.js" type="text/javascript"></script>\r
  13 \r
  14         <style type="text/css">\r
  15                 body{ color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif;     }\r
  16         </style>\r
  17 \r
  18 </head>\r
  19 <body>\r
  20 \r
  21 \r
  22 <h1><a href="http://www.lokeshdhakar.com/projects/lightbox2/">Lightbox JS <em>v2.04</em></a></h1>\r
  23 <p><a href="http://www.lokeshdhakar.com">by Lokesh Dhakar</a></p>\r
  24 \r
  25 <h2>Example</h2>\r
  26 \r
  27 <a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>\r
  28 \r
  29 \r
  30 \r
  31 \r
  32 <h2>How to Use:</h2>\r
  33 <h3>Part 1 - Setup</h3>\r
  34 <ol>\r
  35 <li>Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header.\r
  36 <pre><code>&lt;script type=&quot;text/javascript&quot; src=&quot;js/prototype.js&quot;&gt;&lt;/script&gt;\r
  37 &lt;script type=&quot;text/javascript&quot; src=&quot;js/scriptaculous.js?load=effects,builder&quot;&gt;&lt;/script&gt;\r
  38 &lt;script type=&quot;text/javascript&quot; src=&quot;js/lightbox.js&quot;&gt;&lt;/script&gt;\r
  39 </code></pre>\r
  40 </li>\r
  41 <li>Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).\r
  42 <pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;css/lightbox.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /&gt;\r
  43 </code></pre>\r
  44 </li>\r
  45 <li>Check the CSS and make sure the referenced <code>prevlabel.gif</code> and <code>nextlabel.gif</code> files are in the right location. Also, make sure the <code>loading.gif</code> and <code>closelabel.gif</code> files as referenced near the top of the <code>lightbox.js</code> file are in the right location.</li>\r
  46 </ol>\r
  47 <h3>Part 2 - Activate</h3>\r
  48 <ol>\r
  49 <li>Add a <code>rel="lightbox"</code> attribute to any link tag to activate the lightbox. For example:\r
  50 <pre><code>&lt;a href=&quot;images/image-1.jpg&quot; rel=&quot;lightbox&quot; title=&quot;my caption&quot;&gt;image #1&lt;/a&gt;\r
  51 </code></pre>\r
  52 <em>Optional: </em>Use the <code>title</code> attribute if you want to show a caption.          </li>\r
  53 <li>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: \r
  54 <pre><code>&lt;a href=&quot;images/image-1.jpg&quot; rel=&quot;lightbox[roadtrip]&quot;&gt;image #1&lt;/a&gt;\r
  55 &lt;a href=&quot;images/image-2.jpg&quot; rel=&quot;lightbox[roadtrip]&quot;&gt;image #2&lt;/a&gt;\r
  56 &lt;a href=&quot;images/image-3.jpg&quot; rel=&quot;lightbox[roadtrip]&quot;&gt;image #3&lt;/a&gt;\r
  57 </code></pre>\r
  58 No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!</li>\r
  59 </ol>   \r
  60 \r
  61 \r
  62 </body>\r
  63 </html>\r