Browse Source

first commit

master
Lokesh Dhakar 9 years ago
commit
6c3df93f8f
48 changed files with 9230 additions and 0 deletions
  1. BIN
      .DS_Store
  2. +11
    -0
      .project
  3. +17
    -0
      .svn/all-wcprops
  4. +64
    -0
      .svn/entries
  5. +1
    -0
      .svn/format
  6. +11
    -0
      .svn/text-base/.project.svn-base
  7. +243
    -0
      .svn/text-base/index.html.svn-base
  8. +0
    -0
      README
  9. +27
    -0
      css/lightbox.css
  10. +212
    -0
      css/screen.css
  11. BIN
      images/bullet.gif
  12. BIN
      images/close.gif
  13. BIN
      images/closelabel.gif
  14. BIN
      images/donate-button.gif
  15. BIN
      images/download-icon.gif
  16. BIN
      images/image-1.jpg
  17. BIN
      images/image-2.jpg
  18. BIN
      images/image-3.jpg
  19. BIN
      images/image-4.jpg
  20. BIN
      images/image-5.jpg
  21. BIN
      images/image-6.jpg
  22. BIN
      images/loading.gif
  23. BIN
      images/nextlabel.gif
  24. BIN
      images/prevlabel.gif
  25. BIN
      images/thumb-1.jpg
  26. BIN
      images/thumb-2.jpg
  27. BIN
      images/thumb-3.jpg
  28. BIN
      images/thumb-4.jpg
  29. BIN
      images/thumb-5.jpg
  30. BIN
      images/thumb-6.jpg
  31. +243
    -0
      index.html
  32. BIN
      js/.DS_Store
  33. +136
    -0
      js/builder.js
  34. +1123
    -0
      js/effects.js
  35. +497
    -0
      js/lightbox-web.js
  36. +496
    -0
      js/lightbox.js
  37. +6081
    -0
      js/prototype.js
  38. +68
    -0
      js/scriptaculous.js
  39. BIN
      releases/.DS_Store
  40. BIN
      releases/lightbox2.01.zip
  41. BIN
      releases/lightbox2.02.zip
  42. BIN
      releases/lightbox2.03.1.zip
  43. BIN
      releases/lightbox2.03.2.zip
  44. BIN
      releases/lightbox2.03.3.zip
  45. BIN
      releases/lightbox2.03.zip
  46. BIN
      releases/lightbox2.04.zip
  47. BIN
      releases/lightbox2.05.zip
  48. BIN
      releases/lightbox2.zip

BIN
.DS_Store View File


+ 11
- 0
.project View File

@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>Lightbox2</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
</buildSpec>
<natures>
</natures>
</projectDescription>

+ 17
- 0
.svn/all-wcprops View File

@@ -0,0 +1,17 @@
K 25
svn:wc:ra_dav:version-url
V 28
/lightbox2/!svn/ver/45/trunk
END
.project
K 25
svn:wc:ra_dav:version-url
V 37
/lightbox2/!svn/ver/39/trunk/.project
END
index.html
K 25
svn:wc:ra_dav:version-url
V 39
/lightbox2/!svn/ver/48/trunk/index.html
END

+ 64
- 0
.svn/entries View File

@@ -0,0 +1,64 @@
8

dir
45
http://svn.huddletogether.com/lightbox2/trunk
http://svn.huddletogether.com/lightbox2



2008-03-10T05:01:18.758389Z
45
lokesh


svn:special svn:externals svn:needs-lock











1dc098fe-732d-0410-9cc5-9aa4608fe024
.project
file




2008-03-26T17:29:21.000000Z
a3f0167c67df1fe71f2cd5b3b84abd95
2008-02-05T00:20:14.396665Z
39
lokesh
css
dir
images
dir
index.html
file
48



2008-11-28T04:04:04.000000Z
b2398283348b22e96a68f56a70b63add
2008-11-28T17:09:48.048129Z
48
lokesh
js
dir
releases
dir

+ 1
- 0
.svn/format View File

@@ -0,0 +1 @@
8

+ 11
- 0
.svn/text-base/.project.svn-base View File

@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>Lightbox2</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
</buildSpec>
<natures>
</natures>
</projectDescription>

+ 243
- 0
.svn/text-base/index.html.svn-base View File

@@ -0,0 +1,243 @@
<!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 2</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en" />

<meta name="description" lang="en" content="Lightbox 2 is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers." />
<meta name="keywords" content="lightbox, lightbox2, lightbox 2, lightbox js, lokesh, dhakar" />
<link rel="shortcut icon" type="image/ico" href="/images/favicon.gif" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<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>

<script type="text/javascript">
document.observe('dom:loaded', function () {
$$('.contact-link').each(
function(e){
Event.observe( e, 'click', function(){
var foo = ('lokes' + 'h.dhakar@' + 'gmail.c' +'om')
window.location.href = 'mailto:' + foo; return false;
})
}
);
});
</script>

</head>
<body>

<div id="topborder"></div>

<div id="sidebar">
<h1><a href="http://www.lokeshdhakar.com/projects/lightbox2/">Lightbox<em>2</em></a></h1>
<p><a href="http://www.lokeshdhakar.com">by Lokesh Dhakar</a></p>
<ul id="nav">
<li><a href="#overview">Overview</a></li>
<li><a href="#example">Example</a></li>
<li><a href="#how">How to Use</a></li>
<li><a href="#download">Download</a></li>
<li><a href="#support">Support</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#contact">Donate</a></li>
</ul>
<p>
<a href="#download" style="color: #666;">v2.04 Released 3/09/08</a><br />
<a href="#download" style="color: #666;">v2.03.4 Released 5/21/07</a>
</p>
<div class="callout">
</div>
</div>

<div id="content">

<a name="overview"></a>
<div class="section first">
<h2>Overview</h2>
<p class="lead">Lightbox is a <em>simple, unobtrusive</em> script used to overlay images on the current page. It's a <em>snap to setup</em> and works on <em>all modern browsers</em>.</p>
<h3>What's New in Version 2</h3>
<ul>
<li><strong>Image Sets:</strong> group related images and navigate through them with ease</li>
<li><strong>Visual Effects</strong>: fancy pants transitions</li>
<li><strong>Backwards Compatibility</strong>: yes!</li>
</ul>
</div><!-- end .section -->


<a name="example"></a>
<div class="section">


<h2>Example</h2>

<h3>Single Images</h3>
<div class="thumbnail">
<a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>
</div>
<div class="thumbnail">
<a href="images/image-2.jpg" rel="lightbox" title="Optional caption."><img src="images/thumb-2.jpg" width="100" height="40" alt="" /></a>
</div>

<h3 style="clear: both;">Image Set</h3>

<div class="thumbnail">
<a href="images/image-3.jpg" rel="lightbox[plants]" title="Roll over and click right side of image to move forward."><img src="images/thumb-3.jpg" width="100" height="40" alt="Plants: image 1 0f 4 thumb" /></a>
</div>
<div class="thumbnail">
<a href="images/image-4.jpg" rel="lightbox[plants]" title="Alternatively you can press the right arrow key." ><img src="images/thumb-4.jpg" width="100" height="40" alt="Plants: image 2 0f 4 thumb" /></a>
</div>
<div class="thumbnail">
<a href="images/image-5.jpg" rel="lightbox[plants]" title="The script preloads the next image in the set as you're viewing."><img src="images/thumb-5.jpg" width="100" height="40" alt="Plants: image 3 0f 4 thumb" /></a>
</div>
<div class="thumbnail">
<a href="images/image-6.jpg" rel="lightbox[plants]" title="Press Esc to close"><img src="images/thumb-6.jpg" width="100" height="40" alt="Plants: image 4 0f 4 thumb" /></a>
</div>
</div><!-- end .section -->


<a name="how"></a>
<div class="section">
<h2>How to Use</h2>
<h3>Part 1 - Setup</h3>
<ol>
<li>Lightbox 2 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header (in this order).
<pre><code>&lt;script type=&quot;text/javascript&quot; src=&quot;js/prototype.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/scriptaculous.js?load=effects,builder&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/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>prev.gif</code> and <code>next.gif</code> files are in the right location. Also, make sure the <code>loading.gif</code> and <code>close.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>&lt;a href=&quot;images/image-1.jpg&quot; rel=&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 between square brackets in the rel attribute. For example:
<pre><code>&lt;a href=&quot;images/image-1.jpg&quot; rel=&quot;lightbox[roadtrip]&quot;&gt;image #1&lt;/a&gt;
&lt;a href=&quot;images/image-2.jpg&quot; rel=&quot;lightbox[roadtrip]&quot;&gt;image #2&lt;/a&gt;
&lt;a href=&quot;images/image-3.jpg&quot; rel=&quot;lightbox[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>
</div>
<!-- end .section -->



<a name="download"></a>
<div class="section">
<h2>Download</h2>
<ul class="download">
<li><a href="releases/lightbox2.04.zip"><img src="images/download-icon.gif" width="22" height="22" alt="download Lightbox" /> <strong>Lightbox <em><small>v2.04</small></em></strong></a></li>
</ul>
<h3>Changelog</h3>
<ul>
<li><strong>v2.04 </strong> - 3/9/08
<ul>
<li>NEW - Upgraded Prototype from v1.4 to v1.6.0.2
<li>NEW - Moved label text into configuration for easier localization</li>
<li>UPDATED - Code cleaned up. Respect for the global namespace and native javascript objects.</li>
<li>FIXED - Caption displays as "null" when viewing an uncaptioned image after viewing a captioned image.</li>
<li>FIXED - Clicking 'close' button shifts layout as link focus' dotted line appears.</li>
</ul>
</li>
<li><strong>v2.03.3 </strong> - 5/21/07 - Support for horizontally scrolling pages. Added updateImageList method for ajax'y pages.</li>
<li><strong>v2.03.2 </strong> - 4/30/07 - Fixed animated gif support in IE/Opera.</li>
<li><strong>v2.03.1 </strong> - 4/18/07 - Fixed embed hiding. Overlay opacity var added to config. Image sets w/Imagemaps fix. Clearfix removed.</li>
<li><strong>v2.03</strong> - 4/10/07 - Improved keyboard navigation. Animation off toggle. Hides Flash movies under overlay. Imagemap support. Valid CSS.</li>
<li><strong>v2.02</strong> - Fixed layout issues caused by multiline captions. Added keyboard navigation.</li>
<li><strong>v2.01</strong> - Centering in IE6 (any DOCTYPE) fixed. Smoothed out resize transition.</li>
</ul>
</div><!-- end .section -->



<a name="support"></a>
<div class="section">
<h2>Support</h2>
<dl>
<dt>It doesn't work at all. The image opens up in a new page. What's wrong?</dt>
<dd>This is commonly caused by a conflict between scripts. Check your body tag and look for an onload attribute. Example:<br />
<code>&lt;body onload=&quot;MM_preloadImages(&lsquo;/images/menu_on.gif&rsquo;)&hellip;;&quot;&gt;</code><br />
A quick fix to this problem is to append the <code>initLightbox()</code> to the onload attribute as so:<br />
<code>&lt;body onload=&quot;MM_preloadImages(&lsquo;/images/menu_on.gif&rsquo;)&hellip;;initLightbox()&quot;&gt;</code><br /></dd>
<dt>It doesn't work if I click an image link before the page has finished loading.</dt>
<dd>The script is activated only after the page has finished loading.</dd>
<dt>The shadow overlay doesn't stretch to cover full browser window.</dt>
<dd>Remove the default margin and padding from the body tag. Add <code>body{ margin: 0; padding: 0; }</code> to your stylesheet.</dd>
<dt>Can I insert links in the caption?</dt>
<dd>Yes, but you need to <a href="http://centricle.com/tools/html-entities/">convert</a> quotes and greater and less than symbols into their html entity equivalents. For example:<br />
<code>&lt;a href="images/image-4.jpg" rel="lightbox" title="&amp;lt;a href=&amp;quot;link.html&amp;quot;&amp;gt;my link&amp;lt;/a&amp;gt;">Image&lt;/a&gt;</code></dd>
<dt>Can I display flash, video, or other content using the script?</dt>
<dd>Sorry, photos only. For other content, google for Lightbox modifications or try an alternative script such as Cody Lindley's <a href="http://jquery.com/demo/thickbox/">ThickBox</a>.</dd>
<dt>Can the script be called from an iframe?</dt>
<dd>If you're using iframes, try the <a href="http://www.dolem.com/lytebox/">Lytebox</a> modification which has better support.</dd>
<dt>Can I use the script in a commercial project?</dt>
<dd>Yes. It is licensed under the <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. A <a href="#donate">donation</a> would be nice, hint hint.<br /><br />
As for proper attribution, all that is required is that you leave my name and link atop the lightbox javascript file. I do appreciate an html link, but it is not required.
</dd>
</dl>
</div>

<a name="contact"></a>
<div class="section">
<h2>Contact</h2>
<p>For troubleshooting, feature requests, and general help, post a message in the <a href="http://huddletogether.com/forum/">Lightbox Forum</a>. Make sure to
include details on your browser, operating system, Lightbox version, and a link (or relevant code).
I do not have time to personally respond to support emails, please use the forum.
</p>
<p>To send me a non-support related note, <a class="contact-link">email me</a>. Thanks.</p>
</div><!-- end .section -->

<a name="donate"></a>
<div class="section">
<h2>Donate</h2>
<p>If you're feeling generous, consider a donation. Any and all PayPal donations are sincerely appreciated. Thanks.</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<fieldset>
<input type="hidden" name="cmd" value="_xclick" />
<input type="hidden" name="business" value="lokesh.dhakar@gmail.com" />
<input type="hidden" name="no_note" value="1" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="tax" value="0" />
<input type="hidden" name="bn" value="PP-DonationsBF" />
<input type="image" src="images/donate-button.gif" name="submit" alt="Make payments with PayPal - it's fast, free and secure!" />
</fieldset>
</form>


</div><!-- end .section -->

</div><!-- end #content -->

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-2196019-1";
urchinTracker();
</script>


</body>
</html>

+ 0
- 0
README View File


+ 27
- 0
css/lightbox.css View File

@@ -0,0 +1,27 @@
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url("data:image/gif;base64,AAAA"); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#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; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

+ 212
- 0
css/screen.css View File

@@ -0,0 +1,212 @@
/*
Lightbox v2 Project page styles
Author: Lokesh Dhakar http://www.lokeshdhakar.com
Created: a long time ago (2006 I think)
Table of Contents:
layout
typography
*/




/* layout
----------------------------------------------- */

*{
margin: 0;
padding:0;
}

body{
background: #161613;
color: #eee;
font: 86% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
}

#topborder{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 1.0em;
background-color: #c0dB5A;
}

#sidebar{ position:fixed; top: 38px; left:20px; width: 230px; }
* html div#sidebar { top: 38px; left:20px; width: 230px; position:absolute; }

#content{ margin: 0 10% 5em 290px; padding-top: 45px; max-width: 600px; }


/* typography
----------------------------------------------- */

p { line-height: 1.4em; margin-bottom: 1.0em; font-size: 0.9em;}
p.lead { font-size: 1.0em; }

ol, ul{ margin: 0.5em 0 1.2em 2em; }
ol, ul, dl { line-height: 1.4em; }
ol li{ margin-bottom: 0.2em; }
li{ font-size: 0.9em; }
li strong {color: #999;}
dl{ margin: 0.5em 0 1.2em 0; }
dt{
xfont-size: 0.9em;
font-weight: bold; color: #999;
padding-top: 0.4em;
}
dd{
font-size: 0.9em;
margin-bottom: 1.0em;
padding-bottom: 0.9em;
border-bottom: 1px dashed #3d3d33;
}


h1, h2, h3{ font-family: "Trebuchet MS",Verdana,Sans-Serif;}

h1 { font-size: 2.3em; }
h1 a { color:#fff; border: none; }
h1 em{ font-size: 1.25em; color: #D0EB6A; font-style: normal; }

h2 {
font-size: 1.5em;
letter-spacing: 0.4pt;
color: #D0EB6A;
text-transform: uppercase;
padding-top: 0.5em;
}
h3 {
font-size: 1.0em;
letter-spacing: 0.2pt;
color: #c0dB5A;
text-transform: uppercase;
padding-top: 0.5em;
}

a, .contact-link{
color: #8ad459;
text-decoration: none;
cursor: hand;
}

#content p a:hover,
#content dd a:hover { border-bottom: 1px dotted #8ad459; }
a img{ border: none;}

small{ font-size: 0.8em; }

pre{
display: block;
margin: 1em 0;
padding: 0.5em;
border-left: 6px solid #0d0d09;
background-color: #000;
overflow: auto;
}

code{
font-size: 11px;
font-family: Verdana,Sans-Serif;
background-color: #000;
color: #8d8d73;
padding: 0.3em 0.4em;
}

pre code{
padding: 0; margin: 0;
}

kbd{
color: #555;
background-color: #ddd;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
font-size: inherit;
font-family: inherit;
padding: 0 3px 2px 4px;
}

fieldset{ border: none; }

/* sidebar
----------------------------------------------- */
#sidebar a{
color: #fff;
}


#sidebar h1 a{ font-weight: bold; }
#sidebar h1 a:hover{ }

#nav{ list-style: none; margin: 1.5em 0 1em 0;}
#nav li{ padding: 0; margin: 0; }
#nav a{
display: block;
height: 2.0em;
padding: 0.3em 0.2em 0 0.8em;
margin-bottom: 1px;
color: #eee;
background-color: #363633;
}

#nav a:hover{
color: #1a1a1a;
background-color: #D0EB6A;
}


#sidebar .callout{ background-color: #ff0; font-size: 13px; padding: .5em .8em; }
#sidebar .callout .date{ font-size: 12px;}
#sidebar .callout a{ color: #666;}
#sidebar .callout ul{ margin-top: -.45em; margin-left: 1em; margin-bottom: .4em; }

/* content
----------------------------------------------- */
#content ul{ margin-left: 4px;}
#content ul li{
list-style: none;
padding: 0 0 0 12px;
background: url(../images/bullet.gif) no-repeat 0 6px;
}
#content ul ul{ margin-top: 0;}
.download{
background-color: #333;
border: 1px solid #444;
padding: 0.7em 1.5em; }
.download:hover{
background-color: #555;
border: 1px solid #777;
}
#content ul.download li{
padding: 0.3em 0;
background-image:none;
}
.download img{ padding-right: 0.3em; }
.download li strong{ font-family: "Trebuchet MS",Verdana,Sans-Serif; font-size: 2.25em; color: #fff;}
.download li em{ font-style: normal; color: #D0EB6A; }

/* misc
----------------------------------------------- */

.section{
border-top: 4px solid #3d3d33;
padding: 1.4em 0 3.2em 0;
overflow: auto;
width: 100%;
}
.first{ border-top: none; padding-top: 0; }

.thumbnail{
padding: 3px 3px 8px 3px;
background-color: #222;
border: 1px solid #2a2a2a;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}

.caption{ font-size: 0.9em; padding-top: 0.2em ; }

BIN
images/bullet.gif View File

Before After
Width: 6  |  Height: 6  |  Size: 49B

BIN
images/close.gif View File

Before After
Width: 26  |  Height: 26  |  Size: 222B

BIN
images/closelabel.gif View File

Before After
Width: 66  |  Height: 22  |  Size: 979B

BIN
images/donate-button.gif View File

Before After
Width: 107  |  Height: 21  |  Size: 723B

BIN
images/download-icon.gif View File

Before After
Width: 22  |  Height: 22  |  Size: 1.1KB

BIN
images/image-1.jpg View File

Before After
Width: 450  |  Height: 338  |  Size: 37KB

BIN
images/image-2.jpg View File

Before After
Width: 600  |  Height: 450  |  Size: 65KB

BIN
images/image-3.jpg View File

Before After
Width: 450  |  Height: 338  |  Size: 60KB

BIN
images/image-4.jpg View File

Before After
Width: 450  |  Height: 338  |  Size: 39KB

BIN
images/image-5.jpg View File

Before After
Width: 700  |  Height: 377  |  Size: 41KB

BIN
images/image-6.jpg View File

Before After
Width: 400  |  Height: 400  |  Size: 49KB

BIN
images/loading.gif View File

Before After
Width: 32  |  Height: 32  |  Size: 2.7KB

BIN
images/nextlabel.gif View File

Before After
Width: 63  |  Height: 32  |  Size: 1.2KB

BIN
images/prevlabel.gif View File

Before After
Width: 63  |  Height: 32  |  Size: 1.2KB

BIN
images/thumb-1.jpg View File

Before After
Width: 100  |  Height: 40  |  Size: 2.8KB

BIN
images/thumb-2.jpg View File

Before After
Width: 100  |  Height: 40  |  Size: 3.4KB

BIN
images/thumb-3.jpg View File

Before After
Width: 100  |  Height: 40  |  Size: 3.4KB

BIN
images/thumb-4.jpg View File

Before After
Width: 100  |  Height: 40  |  Size: 2.8KB

BIN
images/thumb-5.jpg View File

Before After
Width: 100  |  Height: 40  |  Size: 2.0KB

BIN
images/thumb-6.jpg View File

Before After
Width: 100  |  Height: 40  |  Size: 3.4KB

+ 243
- 0
index.html View File

@@ -0,0 +1,243 @@
<!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 2</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en" />

<meta name="description" lang="en" content="Lightbox 2 is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers." />
<meta name="keywords" content="lightbox, lightbox2, lightbox 2, lightbox js, lokesh, dhakar" />
<link rel="shortcut icon" type="image/ico" href="/images/favicon.gif" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<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>

<script type="text/javascript">
document.observe('dom:loaded', function () {
$$('.contact-link').each(
function(e){
Event.observe( e, 'click', function(){
var foo = ('lokes' + 'h.dhakar@' + 'gmail.c' +'om')
window.location.href = 'mailto:' + foo; return false;
})
}
);
});
</script>

</head>
<body>

<div id="topborder"></div>

<div id="sidebar">
<h1><a href="http://www.lokeshdhakar.com/projects/lightbox2/">Lightbox<em>2</em></a></h1>
<p><a href="http://www.lokeshdhakar.com">by Lokesh Dhakar</a></p>
<ul id="nav">
<li><a href="#overview">Overview</a></li>
<li><a href="#example">Example</a></li>
<li><a href="#how">How to Use</a></li>
<li><a href="#download">Download</a></li>
<li><a href="#support">Support</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#donate">Donate</a></li>
</ul>
<div class="callout">
<a href="#download" >v2.05 Released with IE9 Support<br />
<span class="date">3/18/11</span></a>
</div>
</div>

<div id="content">

<a name="overview"></a>
<div class="section first">
<h2>Overview</h2>
<p class="lead">Lightbox is a <em>simple, unobtrusive</em> script used to overlay images on the current page. It's a <em>snap to setup</em> and works on <em>all modern browsers</em>.</p>
<h3>What's New in Version 2</h3>
<ul>
<li><strong>Image Sets:</strong> group related images and navigate through them with ease</li>
<li><strong>Visual Effects</strong>: fancy pants transitions</li>
<li><strong>Backwards Compatibility</strong>: yes!</li>
</ul>
</div><!-- end .section -->


<a name="example"></a>
<div class="section">


<h2>Example</h2>

<h3>Single Images</h3>
<div class="thumbnail">
<a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>
</div>
<div class="thumbnail">
<a href="images/image-2.jpg" rel="lightbox" title="Optional caption."><img src="images/thumb-2.jpg" width="100" height="40" alt="" /></a>
</div>

<h3 style="clear: both;">Image Set</h3>

<div class="thumbnail">
<a href="images/image-3.jpg" rel="lightbox[plants]" title="Roll over and click right side of image to move forward."><img src="images/thumb-3.jpg" width="100" height="40" alt="Plants: image 1 0f 4 thumb" /></a>
</div>
<div class="thumbnail">
<a href="images/image-4.jpg" rel="lightbox[plants]" title="Alternately you can press the right arrow key." ><img src="images/thumb-4.jpg" width="100" height="40" alt="Plants: image 2 0f 4 thumb" /></a>
</div>
<div class="thumbnail">
<a href="images/image-5.jpg" rel="lightbox[plants]" title="The script preloads the next image in the set as you're viewing."><img src="images/thumb-5.jpg" width="100" height="40" alt="Plants: image 3 0f 4 thumb" /></a>
</div>
<div class="thumbnail">
<a href="images/image-6.jpg" rel="lightbox[plants]" title="Press Esc to close"><img src="images/thumb-6.jpg" width="100" height="40" alt="Plants: image 4 0f 4 thumb" /></a>
</div>
</div><!-- end .section -->


<a name="how"></a>
<div class="section">
<h2>How to Use</h2>
<h3>Part 1 - Setup</h3>
<ol>
<li>Lightbox 2 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header (in this order).
<pre><code>&lt;script type=&quot;text/javascript&quot; src=&quot;js/prototype.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/scriptaculous.js?load=effects,builder&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/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>prev.gif</code> and <code>next.gif</code> files are in the right location. Also, make sure the <code>loading.gif</code> and <code>close.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>&lt;a href=&quot;images/image-1.jpg&quot; rel=&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 between square brackets in the rel attribute. For example:
<pre><code>&lt;a href=&quot;images/image-1.jpg&quot; rel=&quot;lightbox[roadtrip]&quot;&gt;image #1&lt;/a&gt;
&lt;a href=&quot;images/image-2.jpg&quot; rel=&quot;lightbox[roadtrip]&quot;&gt;image #2&lt;/a&gt;
&lt;a href=&quot;images/image-3.jpg&quot; rel=&quot;lightbox[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>
</div>
<!-- end .section -->



<a name="download"></a>
<div class="section">
<h2>Download</h2>
<ul class="download">
<li><a href="releases/lightbox2.05.zip"><img src="images/download-icon.gif" width="22" height="22" alt="download Lightbox" /> <strong>Lightbox <em><small>v2.05</small></em></strong></a></li>
</ul>
<h3>Changelog</h3>
<ul>
<li><strong>v2.05 </strong> - 3/18/11 - Upgraded Prototype (now works in IE9) and Scriptaculous. Minor bug fixes.</li>
<li><strong>v2.04 </strong> - 3/9/08
<ul>
<li>NEW - Upgraded Prototype from v1.4 to v1.6.0.2
<li>NEW - Moved label text into configuration for easier localization</li>
<li>UPDATED - Code cleaned up. Respect for the global namespace and native javascript objects.</li>
<li>FIXED - Caption displays as "null" when viewing an uncaptioned image after viewing a captioned image.</li>
<li>FIXED - Clicking 'close' button shifts layout as link focus' dotted line appears.</li>
</ul>
</li>
<li><strong>v2.03.3 </strong> - 5/21/07 - Support for horizontally scrolling pages. Added updateImageList method for ajax'y pages.</li>
<li><strong>v2.03.2 </strong> - 4/30/07 - Fixed animated gif support in IE/Opera.</li>
<li><strong>v2.03.1 </strong> - 4/18/07 - Fixed embed hiding. Overlay opacity var added to config. Image sets w/Imagemaps fix. Clearfix removed.</li>
<li><strong>v2.03</strong> - 4/10/07 - Improved keyboard navigation. Animation off toggle. Hides Flash movies under overlay. Imagemap support. Valid CSS.</li>
<li><strong>v2.02</strong> - Fixed layout issues caused by multiline captions. Added keyboard navigation.</li>
<li><strong>v2.01</strong> - Centering in IE6 (any DOCTYPE) fixed. Smoothed out resize transition.</li>
</ul>
</div><!-- end .section -->



<a name="support"></a>
<div class="section">
<h2>Support</h2>
<dl>
<dt>It doesn't work at all. The image opens up in a new page. What's wrong?</dt>
<dd>This is commonly caused by a conflict between scripts. Check your body tag and look for an onload attribute. Example:<br />
<code>&lt;body onload=&quot;MM_preloadImages(&lsquo;/images/menu_on.gif&rsquo;)&hellip;;&quot;&gt;</code><br />
A quick fix to this problem is to append the <code>initLightbox()</code> to the onload attribute as so:<br />
<code>&lt;body onload=&quot;MM_preloadImages(&lsquo;/images/menu_on.gif&rsquo;)&hellip;;initLightbox()&quot;&gt;</code><br /></dd>
<dt>It doesn't work if I click an image link before the page has finished loading.</dt>
<dd>The script is activated only after the page has finished loading.</dd>
<dt>The shadow overlay doesn't stretch to cover full browser window.</dt>
<dd>Remove the default margin and padding from the body tag. Add <code>body{ margin: 0; padding: 0; }</code> to your stylesheet.</dd>
<dt>Can I insert links in the caption?</dt>
<dd>Yes, but you need to <a href="http://centricle.com/tools/html-entities/">convert</a> quotes and greater and less than symbols into their html entity equivalents. For example:<br />
<code>&lt;a href="images/image-4.jpg" rel="lightbox" title="&amp;lt;a href=&amp;quot;link.html&amp;quot;&amp;gt;my link&amp;lt;/a&amp;gt;">Image&lt;/a&gt;</code></dd>
<dt>Can I display flash, video, or other content using the script?</dt>
<dd>Sorry, photos only. For other content, google for Lightbox modifications or try an alternative script such as Cody Lindley's <a href="http://jquery.com/demo/thickbox/">ThickBox</a>.</dd>
<dt>Can the script be called from an iframe?</dt>
<dd>If you're using iframes, try the <a href="http://www.dolem.com/lytebox/">Lytebox</a> modification which has better support.</dd>
<dt>Can I use the script in a commercial project?</dt>
<dd>Yes. It is licensed under the <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. A <a href="#donate">donation</a> would be nice, hint hint.<br /><br />
As for proper attribution, all that is required is that you leave my name and link atop the lightbox javascript file. I do appreciate an html link, but it is not required.
</dd>
</dl>
</div>

<a name="contact"></a>
<div class="section">
<h2>Contact</h2>
<p>For troubleshooting, feature requests, and general help, post a message in the <a href="http://lokeshdhakar.com/forums/">Lightbox Forum</a>. Make sure to
include details on your browser, operating system, Lightbox version, and a link (or relevant code).
I do not have time to personally respond to support emails, please use the forum.
</p>
<p>To send me a non-support related note, use lokesh.dhakar@[ google's email service ].com. Thanks.</p>
<h3> <a href="http://lokeshdhakar.com/forums/">Lightbox Forum</a></h3>
</div><!-- end .section -->

<a name="donate"></a>
<div class="section">
<h2>Donate</h2>
<p>If you're feeling generous, consider a donation. Any and all PayPal donations are sincerely appreciated. Thanks.</p>
<form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<fieldset>
<input type="hidden" name="cmd" value="_xclick" />
<input type="hidden" name="business" value="lokesh.dhakar@gmail.com" />
<input type="hidden" name="item_name" value="Donation for Lightbox">
<input type="hidden" name="no_note" value="1" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="tax" value="0" />
<input type="hidden" name="bn" value="PP-DonationsBF" />
<input type="image" src="images/donate-button.gif" name="submit" alt="Make payments with PayPal - it's fast, free and secure!" />
</fieldset>
</form>


</div><!-- end .section -->

</div><!-- end #content -->

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-2196019-1";
urchinTracker();
</script>


</body>
</html>

BIN
js/.DS_Store View File


+ 136
- 0
js/builder.js View File

@@ -0,0 +1,136 @@
// script.aculo.us builder.js v1.9.0, Thu Dec 23 16:54:48 -0500 2010

// Copyright (c) 2005-2010 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
//
// script.aculo.us is freely distributable under the terms of an MIT-style license.
// For details, see the script.aculo.us web site: http://script.aculo.us/

var Builder = {
NODEMAP: {
AREA: 'map',
CAPTION: 'table',
COL: 'table',
COLGROUP: 'table',
LEGEND: 'fieldset',
OPTGROUP: 'select',
OPTION: 'select',
PARAM: 'object',
TBODY: 'table',
TD: 'table',
TFOOT: 'table',
TH: 'table',
THEAD: 'table',
TR: 'table'
},
// note: For Firefox < 1.5, OPTION and OPTGROUP tags are currently broken,
// due to a Firefox bug
node: function(elementName) {
elementName = elementName.toUpperCase();

// try innerHTML approach
var parentTag = this.NODEMAP[elementName] || 'div';
var parentElement = document.createElement(parentTag);
try { // prevent IE "feature": http://dev.rubyonrails.org/ticket/2707
parentElement.innerHTML = "<" + elementName + "></" + elementName + ">";
} catch(e) {}
var element = parentElement.firstChild || null;

// see if browser added wrapping tags
if(element && (element.tagName.toUpperCase() != elementName))
element = element.getElementsByTagName(elementName)[0];

// fallback to createElement approach
if(!element) element = document.createElement(elementName);

// abort if nothing could be created
if(!element) return;

// attributes (or text)
if(arguments[1])
if(this._isStringOrNumber(arguments[1]) ||
(arguments[1] instanceof Array) ||
arguments[1].tagName) {
this._children(element, arguments[1]);
} else {
var attrs = this._attributes(arguments[1]);
if(attrs.length) {
try { // prevent IE "feature": http://dev.rubyonrails.org/ticket/2707
parentElement.innerHTML = "<" +elementName + " " +
attrs + "></" + elementName + ">";
} catch(e) {}
element = parentElement.firstChild || null;
// workaround firefox 1.0.X bug
if(!element) {
element = document.createElement(elementName);
for(attr in arguments[1])
element[attr == 'class' ? 'className' : attr] = arguments[1][attr];
}
if(element.tagName.toUpperCase() != elementName)
element = parentElement.getElementsByTagName(elementName)[0];
}
}

// text, or array of children
if(arguments[2])
this._children(element, arguments[2]);

return $(element);
},
_text: function(text) {
return document.createTextNode(text);
},

ATTR_MAP: {
'className': 'class',
'htmlFor': 'for'
},

_attributes: function(attributes) {
var attrs = [];
for(attribute in attributes)
attrs.push((attribute in this.ATTR_MAP ? this.ATTR_MAP[attribute] : attribute) +
'="' + attributes[attribute].toString().escapeHTML().gsub(/"/,'&quot;') + '"');
return attrs.join(" ");
},
_children: function(element, children) {
if(children.tagName) {
element.appendChild(children);
return;
}
if(typeof children=='object') { // array can hold nodes and text
children.flatten().each( function(e) {
if(typeof e=='object')
element.appendChild(e);
else
if(Builder._isStringOrNumber(e))
element.appendChild(Builder._text(e));
});
} else
if(Builder._isStringOrNumber(children))
element.appendChild(Builder._text(children));
},
_isStringOrNumber: function(param) {
return(typeof param=='string' || typeof param=='number');
},
build: function(html) {
var element = this.node('div');
$(element).update(html.strip());
return element.down();
},
dump: function(scope) {
if(typeof scope != 'object' && typeof scope != 'function') scope = window; //global scope

var tags = ("A ABBR ACRONYM ADDRESS APPLET AREA B BASE BASEFONT BDO BIG BLOCKQUOTE BODY " +
"BR BUTTON CAPTION CENTER CITE CODE COL COLGROUP DD DEL DFN DIR DIV DL DT EM FIELDSET " +
"FONT FORM FRAME FRAMESET H1 H2 H3 H4 H5 H6 HEAD HR HTML I IFRAME IMG INPUT INS ISINDEX "+
"KBD LABEL LEGEND LI LINK MAP MENU META NOFRAMES NOSCRIPT OBJECT OL OPTGROUP OPTION P "+
"PARAM PRE Q S SAMP SCRIPT SELECT SMALL SPAN STRIKE STRONG STYLE SUB SUP TABLE TBODY TD "+
"TEXTAREA TFOOT TH THEAD TITLE TR TT U UL VAR").split(/\s+/);

tags.each( function(tag){
scope[tag] = function() {
return Builder.node.apply(Builder, [tag].concat($A(arguments)));
};
});
}
};

+ 1123
- 0
js/effects.js
File diff suppressed because it is too large
View File


+ 497
- 0
js/lightbox-web.js View File

@@ -0,0 +1,497 @@
// -----------------------------------------------------------------------------------
//
// Lightbox v2.04
// by Lokesh Dhakar - http://www.lokeshdhakar.com
// Last Modification: 2/9/08
//
// For more information, visit:
// http://lokeshdhakar.com/projects/lightbox2/
//
// Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
// - Free for use in both personal and commercial projects
// - Attribution requires leaving author name, author link, and the license info intact.
//
// Thanks: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets.
// Artemy Tregubenko (arty.name) for cleanup and help in updating to latest ver of proto-aculous.
//
// -----------------------------------------------------------------------------------
/*

Table of Contents
-----------------
Configuration

Lightbox Class Declaration
- initialize()
- updateImageList()
- start()
- changeImage()
- resizeImageContainer()
- showImage()
- updateDetails()
- updateNav()
- enableKeyboardNav()
- disableKeyboardNav()
- keyboardAction()
- preloadNeighborImages()
- end()
Function Calls
- document.observe()
*/
// -----------------------------------------------------------------------------------

//
// Configurationl
//
LightboxOptions = Object.extend({
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',

overlayOpacity: 0.8, // controls transparency of shadow overlay

animate: true, // toggles resizing animations
resizeSpeed: 7, // controls the speed of the image resizing animations (1=slowest and 10=fastest)

borderSize: 10, //if you adjust the padding in the CSS, you will need to update this variable

// When grouping images this is used to write: Image # of #.
// Change it for non-english localization
labelImage: "Image",
labelOf: "of"
}, window.LightboxOptions || {});

// -----------------------------------------------------------------------------------

var Lightbox = Class.create();

Lightbox.prototype = {
imageArray: [],
activeImage: undefined,
// initialize()
// Constructor runs on completion of the DOM loading. Calls updateImageList and then
// the function inserts html at the bottom of the page which is used to display the shadow
// overlay and the image container.
//
initialize: function() {
this.updateImageList();
this.keyboardAction = this.keyboardAction.bindAsEventListener(this);

if (LightboxOptions.resizeSpeed > 10) LightboxOptions.resizeSpeed = 10;
if (LightboxOptions.resizeSpeed < 1) LightboxOptions.resizeSpeed = 1;

this.resizeDuration = LightboxOptions.animate ? ((11 - LightboxOptions.resizeSpeed) * 0.15) : 0;
this.overlayDuration = LightboxOptions.animate ? 0.2 : 0; // shadow fade in/out duration

// When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
// If animations are turned off, it will be hidden as to prevent a flicker of a
// white 250 by 250 box.
var size = (LightboxOptions.animate ? 250 : 1) + 'px';

// Code inserts html at the bottom of the page that looks similar to this:
//
// <div id="overlay"></div>
// <div id="lightbox">
// <div id="outerImageContainer">
// <div id="imageContainer">
// <img id="lightboxImage">
// <div style="" id="hoverNav">
// <a href="#" id="prevLink"></a>
// <a href="#" id="nextLink"></a>
// </div>
// <div id="loading">
// <a href="#" id="loadingLink">
// <img src="images/loading.gif">
// </a>
// </div>
// </div>
// </div>
// <div id="imageDataContainer">
// <div id="imageData">
// <div id="imageDetails">
// <span id="caption"></span>
// <span id="numberDisplay"></span>
// </div>
// <div id="bottomNav">
// <a href="#" id="bottomNavClose">
// <img src="images/close.gif">
// </a>
// </div>
// </div>
// </div>
// </div>


var objBody = $$('body')[0];

objBody.appendChild(Builder.node('div',{id:'overlay'}));
objBody.appendChild(Builder.node('div',{id:'lightbox'}, [
Builder.node('div',{id:'outerImageContainer'},
Builder.node('div',{id:'imageContainer'}, [
Builder.node('img',{id:'lightboxImage'}),
Builder.node('div',{id:'hoverNav'}, [
Builder.node('a',{id:'prevLink', href: '#' }),
Builder.node('a',{id:'nextLink', href: '#' })
]),
Builder.node('div',{id:'loading'},
Builder.node('a',{id:'loadingLink', href: '#' },
Builder.node('img', {src: LightboxOptions.fileLoadingImage})
)
)
])
),
Builder.node('div', {id:'imageDataContainer'},
Builder.node('div',{id:'imageData'}, [
Builder.node('div',{id:'imageDetails'}, [
Builder.node('span',{id:'caption'}),
Builder.node('span',{id:'numberDisplay'})
]),
Builder.node('div',{id:'bottomNav'},
Builder.node('a',{id:'bottomNavClose', href: '#' },
Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage })
)
)
])
)
]));


$('overlay').hide().observe('click', (function() { this.end(); }).bind(this));
$('lightbox').hide().observe('click', (function(event) { if (event.element().id == 'lightbox') this.end(); }).bind(this));
$('outerImageContainer').setStyle({ width: size, height: size });
$('prevLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage - 1); }).bindAsEventListener(this));
$('nextLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage + 1); }).bindAsEventListener(this));
$('loadingLink').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
$('bottomNavClose').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));

var th = this;
(function(){
var ids =
'overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink ' +
'imageDataContainer imageData imageDetails caption numberDisplay bottomNav bottomNavClose';
$w(ids).each(function(id){ th[id] = $(id); });
}).defer();
},

//
// updateImageList()
// Loops through anchor tags looking for 'lightbox' references and applies onclick
// events to appropriate links. You can rerun after dynamically adding images w/ajax.
//
updateImageList: function() {
this.updateImageList = Prototype.emptyFunction;

document.observe('click', (function(event){
var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]');
if (target) {
event.stop();
this.start(target);
}
}).bind(this));
},
//
// start()
// Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
//
start: function(imageLink) {

$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });

// stretch overlay to fill page and fade in
var arrayPageSize = this.getPageSize();
$('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });

new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity });

this.imageArray = [];
var imageNum = 0;

if ((imageLink.rel == 'lightbox')){
// if image is NOT part of a set, add single image to imageArray
this.imageArray.push([imageLink.href, imageLink.title]);
} else {
// if image is part of a set..
this.imageArray =
$$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
collect(function(anchor){ return [anchor.href, anchor.title]; }).
uniq();
while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
}

// calculate top and left offset for the lightbox
var arrayPageScroll = document.viewport.getScrollOffsets();
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
var lightboxLeft = arrayPageScroll[0];
this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
this.changeImage(imageNum);
},

//
// changeImage()
// Hide most elements and preload image in preparation for resizing image container.
//
changeImage: function(imageNum) {
this.activeImage = imageNum; // update global var

// hide elements during transition
if (LightboxOptions.animate) this.loading.show();
this.lightboxImage.hide();
this.hoverNav.hide();
this.prevLink.hide();
this.nextLink.hide();
// HACK: Opera9 does not currently support scriptaculous opacity and appear fx
this.imageDataContainer.setStyle({opacity: .0001});
this.numberDisplay.hide();
var imgPreloader = new Image();
// once image is preloaded, resize image container


imgPreloader.onload = (function(){
this.lightboxImage.src = this.imageArray[this.activeImage][0];
this.resizeImageContainer(imgPreloader.width, imgPreloader.height);
}).bind(this);
imgPreloader.src = this.imageArray[this.activeImage][0];
},

//
// resizeImageContainer()
//
resizeImageContainer: function(imgWidth, imgHeight) {

// get current width and height
var widthCurrent = this.outerImageContainer.getWidth();
var heightCurrent = this.outerImageContainer.getHeight();

// get new width and height
var widthNew = (imgWidth + LightboxOptions.borderSize * 2);
var heightNew = (imgHeight + LightboxOptions.borderSize * 2);

// scalars based on change from old to new
var xScale = (widthNew / widthCurrent) * 100;
var yScale = (heightNew / heightCurrent) * 100;

// calculate size difference between new and old image, and resize if necessary
var wDiff = widthCurrent - widthNew;
var hDiff = heightCurrent - heightNew;

if (hDiff != 0) new Effect.Scale(this.outerImageContainer, yScale, {scaleX: false, duration: this.resizeDuration, queue: 'front'});
if (wDiff != 0) new Effect.Scale(this.outerImageContainer, xScale, {scaleY: false, duration: this.resizeDuration, delay: this.resizeDuration});

// if new and old image are same size and no scaling transition is necessary,
// do a quick pause to prevent image flicker.
var timeout = 0;
if ((hDiff == 0) && (wDiff == 0)){
timeout = 100;
if (Prototype.Browser.IE) timeout = 250;
}

(function(){
this.prevLink.setStyle({ height: imgHeight + 'px' });
this.nextLink.setStyle({ height: imgHeight + 'px' });
this.imageDataContainer.setStyle({ width: widthNew + 'px' });

this.showImage();
}).bind(this).delay(timeout / 1000);
},
//
// showImage()
// Display image and begin preloading neighbors.
//
showImage: function(){
this.loading.hide();
new Effect.Appear(this.lightboxImage, {
duration: this.resizeDuration,
queue: 'end',
afterFinish: (function(){ this.updateDetails(); }).bind(this)
});
this.preloadNeighborImages();
},

//
// updateDetails()
// Display caption, image number, and bottom nav.
//
updateDetails: function() {
// if caption is not null
if (this.imageArray[this.activeImage][1] != ""){
this.caption.update(this.imageArray[this.activeImage][1]).show();
}
// if image is part of set display 'Image x of x'
if (this.imageArray.length > 1){
this.numberDisplay.update( LightboxOptions.labelImage + ' ' + (this.activeImage + 1) + ' ' + LightboxOptions.labelOf + ' ' + this.imageArray.length).show();
}

new Effect.Parallel(
[
new Effect.SlideDown(this.imageDataContainer, { sync: true, duration: this.resizeDuration, from: 0.0, to: 1.0 }),
new Effect.Appear(this.imageDataContainer, { sync: true, duration: this.resizeDuration })
],
{
duration: this.resizeDuration,
afterFinish: (function() {
// update overlay size and update nav
var arrayPageSize = this.getPageSize();
this.overlay.setStyle({ height: arrayPageSize[1] + 'px' });
this.updateNav();
}).bind(this)
}
);
},

//
// updateNav()
// Display appropriate previous and next hover navigation.
//
updateNav: function() {

this.hoverNav.show();

// if not first image in set, display prev image button
if (this.activeImage > 0) this.prevLink.show();

// if not last image in set, display next image button
if (this.activeImage < (this.imageArray.length - 1)) this.nextLink.show();
this.enableKeyboardNav();
},

//
// enableKeyboardNav()
//
enableKeyboardNav: function() {
document.observe('keydown', this.keyboardAction);
},

//
// disableKeyboardNav()
//
disableKeyboardNav: function() {
document.stopObserving('keydown', this.keyboardAction);
},

//
// keyboardAction()
//
keyboardAction: function(event) {
var keycode = event.keyCode;

var escapeKey;
if (event.DOM_VK_ESCAPE) { // mozilla
escapeKey = event.DOM_VK_ESCAPE;
} else { // ie
escapeKey = 27;
}

var key = String.fromCharCode(keycode).toLowerCase();
if (key.match(/x|o|c/) || (keycode == escapeKey)){ // close lightbox
this.end();
} else if ((key == 'p') || (keycode == 37)){ // display previous image
if (this.activeImage != 0){
this.disableKeyboardNav();
this.changeImage(this.activeImage - 1);
}
} else if ((key == 'n') || (keycode == 39)){ // display next image
if (this.activeImage != (this.imageArray.length - 1)){
this.disableKeyboardNav();
this.changeImage(this.activeImage + 1);
}
}
},

//
// preloadNeighborImages()
// Preload previous and next images.
//
preloadNeighborImages: function(){
var preloadNextImage, preloadPrevImage;
if (this.imageArray.length > this.activeImage + 1){
preloadNextImage = new Image();
preloadNextImage.src = this.imageArray[this.activeImage + 1][0];
}
if (this.activeImage > 0){
preloadPrevImage = new Image();
preloadPrevImage.src = this.imageArray[this.activeImage - 1][0];
}
},

//
// end()
//
end: function() {
this.disableKeyboardNav();
this.lightbox.hide();
new Effect.Fade(this.overlay, { duration: this.overlayDuration });
$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
},

//
// getPageSize()
//
getPageSize: function() {
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
if(document.documentElement.clientWidth){
windowWidth = document.documentElement.clientWidth;
} else {
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = xScroll;
} else {
pageWidth = windowWidth;
}

return [pageWidth,pageHeight];
}
}

document.observe('dom:loaded', function () { new Lightbox(); });

+ 496
- 0
js/lightbox.js View File

@@ -0,0 +1,496 @@
// -----------------------------------------------------------------------------------
//
// Lightbox v2.05
// by Lokesh Dhakar - http://www.lokeshdhakar.com
// Last Modification: 3/18/11
//
// For more information, visit:
// http://lokeshdhakar.com/projects/lightbox2/
//
// Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
// - Free for use in both personal and commercial projects
// - Attribution requires leaving author name, author link, and the license info intact.
//
// Thanks: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets.
// Artemy Tregubenko (arty.name) for cleanup and help in updating to latest ver of proto-aculous.
//
// -----------------------------------------------------------------------------------
/*

Table of Contents
-----------------
Configuration

Lightbox Class Declaration
- initialize()
- updateImageList()
- start()
- changeImage()
- resizeImageContainer()
- showImage()
- updateDetails()
- updateNav()
- enableKeyboardNav()
- disableKeyboardNav()
- keyboardAction()
- preloadNeighborImages()
- end()
Function Calls
- document.observe()
*/
// -----------------------------------------------------------------------------------

//
// Configurationl
//
LightboxOptions = Object.extend({
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',

overlayOpacity: 0.8, // controls transparency of shadow overlay

animate: true, // toggles resizing animations
resizeSpeed: 7, // controls the speed of the image resizing animations (1=slowest and 10=fastest)

borderSize: 10, //if you adjust the padding in the CSS, you will need to update this variable

// When grouping images this is used to write: Image # of #.
// Change it for non-english localization
labelImage: "Image",
labelOf: "of"
}, window.LightboxOptions || {});

// -----------------------------------------------------------------------------------

var Lightbox = Class.create();

Lightbox.prototype = {
imageArray: [],
activeImage: undefined,
// initialize()
// Constructor runs on completion of the DOM loading. Calls updateImageList and then
// the function inserts html at the bottom of the page which is used to display the shadow
// overlay and the image container.
//
initialize: function() {
this.updateImageList();
this.keyboardAction = this.keyboardAction.bindAsEventListener(this);

if (LightboxOptions.resizeSpeed > 10) LightboxOptions.resizeSpeed = 10;
if (LightboxOptions.resizeSpeed < 1) LightboxOptions.resizeSpeed = 1;

this.resizeDuration = LightboxOptions.animate ? ((11 - LightboxOptions.resizeSpeed) * 0.15) : 0;
this.overlayDuration = LightboxOptions.animate ? 0.2 : 0; // shadow fade in/out duration

// When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
// If animations are turned off, it will be hidden as to prevent a flicker of a
// white 250 by 250 box.
var size = (LightboxOptions.animate ? 250 : 1) + 'px';

// Code inserts html at the bottom of the page that looks similar to this:
//
// <div id="overlay"></div>
// <div id="lightbox">
// <div id="outerImageContainer">
// <div id="imageContainer">
// <img id="lightboxImage">
// <div style="" id="hoverNav">
// <a href="#" id="prevLink"></a>
// <a href="#" id="nextLink"></a>
// </div>
// <div id="loading">
// <a href="#" id="loadingLink">
// <img src="images/loading.gif">
// </a>
// </div>
// </div>
// </div>
// <div id="imageDataContainer">
// <div id="imageData">
// <div id="imageDetails">
// <span id="caption"></span>
// <span id="numberDisplay"></span>
// </div>
// <div id="bottomNav">
// <a href="#" id="bottomNavClose">
// <img src="images/close.gif">
// </a>
// </div>
// </div>
// </div>
// </div>


var objBody = $$('body')[0];

objBody.appendChild(Builder.node('div',{id:'overlay'}));
objBody.appendChild(Builder.node('div',{id:'lightbox'}, [
Builder.node('div',{id:'outerImageContainer'},
Builder.node('div',{id:'imageContainer'}, [
Builder.node('img',{id:'lightboxImage'}),
Builder.node('div',{id:'hoverNav'}, [
Builder.node('a',{id:'prevLink', href: '#' }),
Builder.node('a',{id:'nextLink', href: '#' })
]),
Builder.node('div',{id:'loading'},
Builder.node('a',{id:'loadingLink', href: '#' },
Builder.node('img', {src: LightboxOptions.fileLoadingImage})
)
)
])
),
Builder.node('div', {id:'imageDataContainer'},
Builder.node('div',{id:'imageData'}, [
Builder.node('div',{id:'imageDetails'}, [
Builder.node('span',{id:'caption'}),
Builder.node('span',{id:'numberDisplay'})
]),
Builder.node('div',{id:'bottomNav'},
Builder.node('a',{id:'bottomNavClose', href: '#' },
Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage })
)
)
])
)
]));


$('overlay').hide().observe('click', (function() { this.end(); }).bind(this));
$('lightbox').hide().observe('click', (function(event) { if (event.element().id == 'lightbox') this.end(); }).bind(this));
$('outerImageContainer').setStyle({ width: size, height: size });
$('prevLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage - 1); }).bindAsEventListener(this));
$('nextLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage + 1); }).bindAsEventListener(this));
$('loadingLink').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
$('bottomNavClose').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));

var th = this;
(function(){
var ids =
'overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink ' +
'imageDataContainer imageData imageDetails caption numberDisplay bottomNav bottomNavClose';
$w(ids).each(function(id){ th[id] = $(id); });
}).defer();
},

//
// updateImageList()
// Loops through anchor tags looking for 'lightbox' references and applies onclick
// events to appropriate links. You can rerun after dynamically adding images w/ajax.
//
updateImageList: function() {
this.updateImageList = Prototype.emptyFunction;

document.observe('click', (function(event){
var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]');
if (target) {
event.stop();
this.start(target);
}
}).bind(this));
},
//
// start()
// Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
//
start: function(imageLink) {

$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });

// stretch overlay to fill page and fade in
var arrayPageSize = this.getPageSize();
$('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });

new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity });

this.imageArray = [];
var imageNum = 0;

if ((imageLink.getAttribute("rel") == 'lightbox')){
// if image is NOT part of a set, add single image to imageArray
this.imageArray.push([imageLink.href, imageLink.title]);
} else {
// if image is part of a set..
this.imageArray =
$$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
collect(function(anchor){ return [anchor.href, anchor.title]; }).
uniq();
while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
}

// calculate top and left offset for the lightbox
var arrayPageScroll = document.viewport.getScrollOffsets();
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
var lightboxLeft = arrayPageScroll[0];
this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
this.changeImage(imageNum);
},

//
// changeImage()
// Hide most elements and preload image in preparation for resizing image container.
//
changeImage: function(imageNum) {
this.activeImage = imageNum; // update global var

// hide elements during transition
if (LightboxOptions.animate) this.loading.show();
this.lightboxImage.hide();
this.hoverNav.hide();
this.prevLink.hide();
this.nextLink.hide();
// HACK: Opera9 does not currently support scriptaculous opacity and appear fx
this.imageDataContainer.setStyle({opacity: .0001});
this.numberDisplay.hide();
var imgPreloader = new Image();
// once image is preloaded, resize image container
imgPreloader.onload = (function(){
this.lightboxImage.src = this.imageArray[this.activeImage][0];
/*Bug Fixed by Andy Scott*/
this.lightboxImage.width = imgPreloader.width;
this.lightboxImage.height = imgPreloader.height;
/*End of Bug Fix*/
this.resizeImageContainer(imgPreloader.width, imgPreloader.height);
}).bind(this);
imgPreloader.src = this.imageArray[this.activeImage][0];
},

//
// resizeImageContainer()
//
resizeImageContainer: function(imgWidth, imgHeight) {

// get current width and height
var widthCurrent = this.outerImageContainer.getWidth();
var heightCurrent = this.outerImageContainer.getHeight();

// get new width and height
var widthNew = (imgWidth + LightboxOptions.borderSize * 2);
var heightNew = (imgHeight + LightboxOptions.borderSize * 2);

// scalars based on change from old to new
var xScale = (widthNew / widthCurrent) * 100;
var yScale = (heightNew / heightCurrent) * 100;

// calculate size difference between new and old image, and resize if necessary
var wDiff = widthCurrent - widthNew;
var hDiff = heightCurrent - heightNew;

if (hDiff != 0) new Effect.Scale(this.outerImageContainer, yScale, {scaleX: false, duration: this.resizeDuration, queue: 'front'});
if (wDiff != 0) new Effect.Scale(this.outerImageContainer, xScale, {scaleY: false, duration: this.resizeDuration, delay: this.resizeDuration});

// if new and old image are same size and no scaling transition is necessary,
// do a quick pause to prevent image flicker.
var timeout = 0;
if ((hDiff == 0) && (wDiff == 0)){
timeout = 100;
if (Prototype.Browser.IE) timeout = 250;
}

(function(){
this.prevLink.setStyle({ height: imgHeight + 'px' });
this.nextLink.setStyle({ height: imgHeight + 'px' });
this.imageDataContainer.setStyle({ width: widthNew + 'px' });

this.showImage();
}).bind(this).delay(timeout / 1000);
},
//
// showImage()
// Display image and begin preloading neighbors.
//
showImage: function(){
this.loading.hide();
new Effect.Appear(this.lightboxImage, {
duration: this.resizeDuration,
queue: 'end',
afterFinish: (function(){ this.updateDetails(); }).bind(this)
});
this.preloadNeighborImages();
},

//
// updateDetails()
// Display caption, image number, and bottom nav.
//
updateDetails: function() {
this.caption.update(this.imageArray[this.activeImage][1]).show();

// if image is part of set display 'Image x of x'
if (this.imageArray.length > 1){
this.numberDisplay.update( LightboxOptions.labelImage + ' ' + (this.activeImage + 1) + ' ' + LightboxOptions.labelOf + ' ' + this.imageArray.length).show();
}

new Effect.Parallel(
[
new Effect.SlideDown(this.imageDataContainer, { sync: true, duration: this.resizeDuration, from: 0.0, to: 1.0 }),
new Effect.Appear(this.imageDataContainer, { sync: true, duration: this.resizeDuration })
],
{
duration: this.resizeDuration,
afterFinish: (function() {
// update overlay size and update nav
var arrayPageSize = this.getPageSize();
this.overlay.setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });
this.updateNav();
}).bind(this)
}
);
},

//
// updateNav()
// Display appropriate previous and next hover navigation.
//
updateNav: function() {

this.hoverNav.show();

// if not first image in set, display prev image button
if (this.activeImage > 0) this.prevLink.show();

// if not last image in set, display next image button
if (this.activeImage < (this.imageArray.length - 1)) this.nextLink.show();
this.enableKeyboardNav();
},

//
// enableKeyboardNav()
//
enableKeyboardNav: function() {
document.observe('keydown', this.keyboardAction);
},

//
// disableKeyboardNav()
//
disableKeyboardNav: function() {
document.stopObserving('keydown', this.keyboardAction);
},

//
// keyboardAction()
//
keyboardAction: function(event) {
var keycode = event.keyCode;

var escapeKey;
if (event.DOM_VK_ESCAPE) { // mozilla
escapeKey = event.DOM_VK_ESCAPE;
} else { // ie
escapeKey = 27;
}

var key = String.fromCharCode(keycode).toLowerCase();
if (key.match(/x|o|c/) || (keycode == escapeKey)){ // close lightbox
this.end();
} else if ((key == 'p') || (keycode == 37)){ // display previous image
if (this.activeImage != 0){
this.disableKeyboardNav();
this.changeImage(this.activeImage - 1);
}
} else if ((key == 'n') || (keycode == 39)){ // display next image
if (this.activeImage != (this.imageArray.length - 1)){
this.disableKeyboardNav();
this.changeImage(this.activeImage + 1);
}
}
},

//
// preloadNeighborImages()
// Preload previous and next images.
//
preloadNeighborImages: function(){
var preloadNextImage, preloadPrevImage;
if (this.imageArray.length > this.activeImage + 1){
preloadNextImage = new Image();
preloadNextImage.src = this.imageArray[this.activeImage + 1][0];
}
if (this.activeImage > 0){
preloadPrevImage = new Image();
preloadPrevImage.src = this.imageArray[this.activeImage - 1][0];
}
},

//
// end()
//
end: function() {
this.disableKeyboardNav();
this.lightbox.hide();
new Effect.Fade(this.overlay, { duration: this.overlayDuration });
$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
},

//
// getPageSize()
//
getPageSize: function() {
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
if(document.documentElement.clientWidth){
windowWidth = document.documentElement.clientWidth;
} else {
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}

// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = xScroll;
} else {
pageWidth = windowWidth;
}

return [pageWidth,pageHeight];
}
}

document.observe('dom:loaded', function () { new Lightbox(); });

+ 6081
- 0
js/prototype.js
File diff suppressed because it is too large
View File


+ 68
- 0
js/scriptaculous.js View File

@@ -0,0 +1,68 @@
// script.aculo.us scriptaculous.js v1.9.0, Thu Dec 23 16:54:48 -0500 2010

// Copyright (c) 2005-2010 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//
// For details, see the script.aculo.us web site: http://script.aculo.us/