| Server IP : 180.180.241.3 / Your IP : 216.73.216.35 Web Server : Microsoft-IIS/7.5 System : Windows NT NETWORK-NHRC 6.1 build 7601 (Windows Server 2008 R2 Standard Edition Service Pack 1) i586 User : IUSR ( 0) PHP Version : 5.3.28 Disable Function : NONE MySQL : ON | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : C:/AppServ/www/umedia3/js/lightbox/ |
Upload File : |
<!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" 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.huddletogether.com/projects/lightbox2/">Lightbox JS <em>v2.03</em></a></h1>
<p><a href="http://www.huddletogether.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"></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>
<h2><a href="http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm">Lightbox JS <em>v2.03a</em></a></h2>
<p>Version 2.03a, the version on Dynamic Drive, adds the ability to have a
caption ("title") hyperlinked if you wish. To have particular caption ("<code>title</code>") be hyperlinked to a specific URL, throw in a "<code>rev</code>" attribute
pointing to the desired URL. For example:</p>
<p><code><a href="images/image-1.jpg" rel="lightbox" title="my caption"
<b>rev="http://www.dynamicdrive.com"</b>>image #1</a></code></p>
</body>
</html>