Skip to content
This repository
tree: c3bc166a95
Fetching contributors…

Cannot retrieve contributors at this time

executable file 70 lines (56 sloc) 3.71 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70
<!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>jQuery Lightbox v0.5 | Test Page</title>

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

<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script>
<script src="jquery.lightbox.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$(".lightbox").lightbox({fitToScreen: true});
});

</script>

<style type="text/css">
body{ color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif; }
</style>

</head>
<body>


<h1><a href="http://warren.mesozen.com">jQuery Lightbox <em>v0.5</em></a></h1>
<p>Modified work by <a href="http://warren.mesozen.com/">Warren Krewenki</a></p>
<p>Originally written by <a href="http://www.huddletogether.com">Lokesh Dhakar</a></p>

<h2>Example 1: Single Image</h2>
<a href="images/image-0.jpg" class="lightbox" title="Cape Breton Island"><img src="images/thumb-0.jpg" width="100" height="40" alt="" /></a>

<h2>Example Two: Series</h2>
<a href="images/image-1.jpg" class="lightbox" rel="flowers" title="jQuery Lightbox Sample Image"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>
<a href="images/image-2.jpg" class="lightbox" rel="flowers" title="Photo by Steven Pinker"><img src="images/thumb-2.jpg" width="100" height="40" alt="" /></a>
<a href="images/image-3.jpg" class="lightbox" rel="flowers" title="Photo by Uwe Hermann"><img src="images/thumb-3.jpg" width="100" height="40" alt="" /></a>


<h2>How to Use:</h2>
<h3>Part 1 - Setup</h3>
<ol>
<li>jQuery lightbox v0.5 uses the jQuery Library. You will need to include these two Javascript files in your header.
<pre><code>&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;lightbox.js&quot;&gt;&lt;/script&gt;
</code></pre>
</li>
<li>Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).
<pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;css/lightbox.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /&gt;
</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>class="lightbox"</code> attribute to any link tag to activate the lightbox. For example:
<pre><code>&lt;a href=&quot;images/image-1.jpg&quot; class=&quot;lightbox&quot; title=&quot;my caption&quot;&gt;image #1&lt;/a&gt;
</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 in the rel attribute. For example:
<pre><code>&lt;a href=&quot;images/image-1.jpg&quot; class=&quot;lightbox&quot; rel=&quot;roadtrip&quot;&gt;image #1&lt;/a&gt;
&lt;a href=&quot;images/image-2.jpg&quot; class=&quot;lightbox&quot; rel=&quot;roadtrip&quot;&gt;image #2&lt;/a&gt;
&lt;a href=&quot;images/image-3.jpg&quot; class=&quot;lightbox&quot; rel=&quot;roadtrip&quot;&gt;image #3&lt;/a&gt;
</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>
Something went wrong with that request. Please try again.