diff options
| author | Andreas Unterkircher <unki@netshadow.at> | 2008-03-27 20:00:42 +0100 |
|---|---|---|
| committer | Andreas Unterkircher <unki@netshadow.at> | 2008-03-27 20:00:42 +0100 |
| commit | 33c1f8bce22a28384068c908b909ca7dcd544a1a (patch) | |
| tree | d511a1b20b658598948a9059208328216a7b8a2c /lightbox2/index.html | |
| parent | 83c6d45d82665bc94de4e589691ae6e733ae4dbe (diff) | |
adding lightbox2 for a preview effect out of the photo index
Signed-off-by: Andreas Unterkircher <unki@netshadow.at>
Diffstat (limited to 'lightbox2/index.html')
| -rwxr-xr-x | lightbox2/index.html | 63 |
1 files changed, 63 insertions, 0 deletions
diff --git a/lightbox2/index.html b/lightbox2/index.html new file mode 100755 index 0000000..85b8c70 --- /dev/null +++ b/lightbox2/index.html @@ -0,0 +1,63 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+<head>
+
+ <title>Lightbox JS v2.0 | Test Page</title>
+
+ <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
+
+ <script src="js/prototype.js" type="text/javascript"></script>
+ <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
+ <script src="js/lightbox.js" type="text/javascript"></script>
+
+ <style type="text/css">
+ body{ color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif; }
+ </style>
+
+</head>
+<body>
+
+
+<h1><a href="http://www.lokeshdhakar.com/projects/lightbox2/">Lightbox JS <em>v2.04</em></a></h1>
+<p><a href="http://www.lokeshdhakar.com">by Lokesh Dhakar</a></p>
+
+<h2>Example</h2>
+
+<a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>
+
+
+
+
+<h2>How to Use:</h2>
+<h3>Part 1 - Setup</h3>
+<ol>
+<li>Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header.
+<pre><code><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>
+</code></pre>
+</li>
+<li>Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).
+<pre><code><link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
+</code></pre>
+</li>
+<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>
+</ol>
+<h3>Part 2 - Activate</h3>
+<ol>
+<li>Add a <code>rel="lightbox"</code> attribute to any link tag to activate the lightbox. For example:
+<pre><code><a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
+</code></pre>
+<em>Optional: </em>Use the <code>title</code> attribute if you want to show a caption. </li>
+<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:
+<pre><code><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>
+</code></pre>
+No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!</li>
+</ol>
+
+
+</body>
+</html>
|