The original lightbox script, finally on github. http://lokeshdhakar.com/projects/lightbox2/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

218 lines
11KB

  1. <!DOCTYPE html>
  2. <html lang="en-us">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Lightbox 2</title>
  6. <meta name="description" lang="en" content="Lightbox 2 is a script used to overlay images on the current page. It's a snap to setup and works on all modern browsers."/>
  7. <meta name="author" content="Lokesh Dhakar">
  8. <meta name="viewport" content="width=device-width,initial-scale=1">
  9. <script src="js/modernizr.custom.js"></script>
  10. <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Karla:400,700">
  11. <link rel="stylesheet" href="css/screen.css" media="screen"/>
  12. <link rel="stylesheet" href="css/lightbox.css" media="screen"/>
  13. </head>
  14. <body>
  15. <div class="wrapper">
  16. <section id="intro" class="section intro-section">
  17. <header>
  18. <h1 class="logo">Lightbox<em class="version">2</em></h1>
  19. </header>
  20. <p class="author">
  21. by Lokesh Dhakar<br />
  22. <span class="author-links">
  23. <a href="https://twitter.com/intent/user?screen_name=lokesh">Follow me on Twitter</a>
  24. </span>
  25. </p>
  26. <p class="lead">
  27. Lightbox is a script used to overlay images on top of the current page. It's a <em>snap to setup</em> and works on <em>all modern browsers</em>.
  28. </p>
  29. </section>
  30. <section id="examples" class="section examples-section">
  31. <header>
  32. <h2 class="section-header">Examples</h2>
  33. </header>
  34. <h3>Single image</h3>
  35. <div class="image-row">
  36. <a class="example-image-link" href="img/examples/image-1.jpg" data-lightbox="example-1"><img class="example-image" src="img/examples/thumb-1.jpg" alt="thumb-1" width="150" height="150"/></a>
  37. <a class="example-image-link" href="img/examples/image-2.jpg" data-lightbox="example-2" title="Optional caption."><img class="example-image" src="img/examples/thumb-2.jpg" alt="thumb-1" width="150" height="150"/></a>
  38. </div>
  39. <h3 style="clear: both;">Image set</h3>
  40. <div class="image-row">
  41. <div class="image-set">
  42. <a class="example-image-link" href="img/examples/image-3.jpg" data-lightbox="example-set" title="Click on the right side of the image to move forward."><img class="example-image" src="img/examples/thumb-3.jpg" alt="Plants: image 1 0f 4 thumb" width="150" height="150"/></a>
  43. <a class="example-image-link" href="img/examples/image-4.jpg" data-lightbox="example-set" title="Alternately you can press the right arrow key."><img class="example-image" src="img/examples/thumb-4.jpg" alt="Plants: image 2 0f 4 thumb" width="150" height="150"/></a>
  44. <a class="example-image-link" href="img/examples/image-5.jpg" data-lightbox="example-set" title="The script preloads the next image in the set as you're viewing."><img class="example-image" src="img/examples/thumb-5.jpg" alt="Plants: image 3 0f 4 thumb" width="150" height="150"/></a>
  45. <a class="example-image-link last-example-image-link-in-set" href="img/examples/image-6.jpg" data-lightbox="example-set" title="Click the X or anywhere outside the image to close"><img class="example-image" src="img/examples/thumb-6.jpg" alt="Plants: image 4 0f 4 thumb" width="150" height="150"/></a>
  46. </div>
  47. </div>
  48. </section>
  49. <section id="download" class="section download-section">
  50. <header>
  51. <h2 class="section-header">Download</h2>
  52. </header>
  53. <a href="releases/lightbox2.6.zip" class="download-button">
  54. <div class="file">
  55. Lightbox
  56. <div class="version">
  57. v2.6
  58. </div>
  59. </div>
  60. <img src="img/box.png" alt="Box" class="box" width="170" height="168" />
  61. </a>
  62. <p>
  63. Lightbox2 is open-source.<br/>View and fork the code on <a href="https://github.com/lokesh/lightbox2">Github</a>.
  64. </p>
  65. <!--
  66. <h3>Changelog</h3>
  67. <ul class="changelog">
  68. <li><span class="version">v2.51</span> - <span class="date">4/20/12</span> - IE Fix: removed stray console.log statements. :-/</li>
  69. <li><span class="version">v2.5</span> - <span class="date">4/10/12</span> - Switch to jQuery. Code put in Github. Compiling with Coffeescript and SASS.</li>
  70. <li class="old"><span class="version">v2.05</span> - <span class="date">3/18/11</span> - Upgraded Prototype (now works in IE9) and Scriptaculous. Minor bug fixes.</li>
  71. <li class="old"><span class="version">v2.04</span> - <span class="date">3/9/08</span>
  72. <ul>
  73. <li>NEW - Upgraded Prototype from v1.4 to v1.6.0.2
  74. <li>NEW - Moved label text into configuration for easier localization</li>
  75. <li>UPDATED - Code cleaned up. Respect for the global namespace and native javascript objects.</li>
  76. <li>FIXED - Caption displays as "null" when viewing an uncaptioned image after viewing a captioned image.</li>
  77. <li>FIXED - Clicking 'close' button shifts layout as link focus' dotted line appears.</li>
  78. </ul>
  79. </li>
  80. <li class="old"><span class="version">v2.03.3</span> - <span class="date">5/21/07</span> - Support for horizontally scrolling pages. Added updateImageList method for ajax'y pages.</li>
  81. <li class="old"><span class="version">v2.03.2</span> - <span class="date">4/30/07</span> - Fixed animated gif support in IE/Opera.</li>
  82. <li class="old"><span class="version">v2.03.1</span> - <span class="date">4/18/07</span> - Fixed embed hiding. Overlay opacity var added to config. Image sets w/Imagemaps fix. Clearfix removed.</li>
  83. <li class="old"><span class="version">v2.03</span> - <span class="date">4/10/07</span> - Improved keyboard navigation. Animation off toggle. Hides Flash movies under overlay. Imagemap support. Valid CSS.</li>
  84. <li class="old"><span class="version">v2.02</span> - Fixed layout issues caused by multiline captions. Added keyboard navigation.</li>
  85. <li class="old"><span class="version">v2.01</span> - Centering in IE6 (any DOCTYPE) fixed. Smoothed out resize transition.</li>
  86. </ul>
  87. <a href="#" class="showOlderChanges">Show older changes</a> -->
  88. </section>
  89. <section id="how-to-use" class="section how-to-use-section">
  90. <header>
  91. <h2 class="section-header">How to use</h2>
  92. </header>
  93. <h3>Part 1 - Setup</h3>
  94. <ol>
  95. <li>Lightbox 2 uses the <a href="http://jquery.com/">jQuery</a> framework. Load jQuery and the Lightbox javascript files in the proper order.
  96. <pre><code>&lt;script src=&quot;js/jquery-1.10.1.min.js&quot;&gt;&lt;/script&gt;
  97. &lt;script src=&quot;js/lightbox.js&quot;&gt;&lt;/script&gt;
  98. </code></pre>
  99. </li>
  100. <li>Include the Lightbox CSS file.
  101. <pre><code>&lt;link href=&quot;css/lightbox.css&quot; rel=&quot;stylesheet&quot; /&gt;
  102. </code></pre>
  103. </li>
  104. <li>Check the CSS and make sure the referenced <code>prev.png</code> and <code>next.png</code> files are in the right location. Also, make sure the <code>loading.gif</code> and <code>close.png</code> files as referenced near the top of the <code>lightbox.js</code> file are in the right location.</li>
  105. </ol>
  106. <h3>Part 2 - Activate</h3>
  107. <ol>
  108. <li>Add a <code>rel="lightbox"</code> attribute to any link tag to activate Lightbox.
  109. <pre><code>&lt;a href=&quot;img/image-1.jpg&quot; rel=&quot;lightbox&quot; title=&quot;my caption&quot;&gt;image #1&lt;/a&gt;
  110. </code></pre>
  111. <em>Optional: </em>Use the <code>title</code> attribute if you want to show a caption. </li>
  112. <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.
  113. <pre><code>&lt;a href=&quot;img/image-1.jpg&quot; rel=&quot;lightbox[roadtrip]&quot;&gt;image #1&lt;/a&gt;
  114. &lt;a href=&quot;img/image-2.jpg&quot; rel=&quot;lightbox[roadtrip]&quot;&gt;image #2&lt;/a&gt;
  115. &lt;a href=&quot;img/image-3.jpg&quot; rel=&quot;lightbox[roadtrip]&quot;&gt;image #3&lt;/a&gt;
  116. </code></pre>
  117. No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!</li>
  118. </ol>
  119. </section>
  120. <section id="questions" class="section questions-section">
  121. <header>
  122. <h2 class="section-header">Have questions?</h2>
  123. </header>
  124. <p>
  125. For personal support issues and feature requests please post a message in the forums. I do not have time to personally respond to support emails, please use the forum. Thanks!
  126. </p>
  127. <p>
  128. For bug reports, send a note with the browser you are using and the version of Lightbox to lokesh.dhakar@[ google's email service ].com.
  129. </p>
  130. <a href="http://lokeshdhakar.com/forums/" class="forums">
  131. <img src="img/speech-bubbles.png" alt="Speech bubbles" class="speech" width="110" height="80"/>
  132. <div class="link">
  133. Lightbox<br/>
  134. <span class="sub">Forums</span>
  135. </div>
  136. </a>
  137. </section>
  138. <section id="doante" class="section donate-section">
  139. <header>
  140. <h2 class="section-header">Donate</h2>
  141. </header>
  142. <p>
  143. Lightbox is completely free to use. If you're using Lightbox on a commercial project and feeling generous, consider a small donation. Thanks!
  144. </p>
  145. <form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
  146. <fieldset>
  147. <input type="hidden" name="cmd" value="_xclick">
  148. <input type="hidden" name="business" value="lokesh.dhakar@gmail.com">
  149. <input type="hidden" name="item_name" value="Donation for Lightbox">
  150. <input type="hidden" name="no_note" value="1">
  151. <input type="hidden" name="currency_code" value="USD">
  152. <input type="hidden" name="tax" value="0">
  153. <input type="hidden" name="bn" value="PP-DonationsBF">
  154. <input type="image" src="img/donate.png" name="submit" class="donate-button" alt="Make payments with PayPal - it's fast, free and secure!">
  155. </fieldset>
  156. </form>
  157. </section>
  158. <section id="sharing" class="sharing">
  159. <a href="https://twitter.com/share" class="twitter-share-button" data-via="lokesh" data-size="large">Tweet</a>
  160. <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
  161. </section>
  162. <script src="js/jquery-1.10.1.min.js"></script>
  163. <!-- <script src="js/jquery-2.0.2.min.js"></script> -->
  164. <script src="js/jquery.smooth-scroll-1.4.10.min.js"></script>
  165. <script src="js/lightbox.js"></script>
  166. <script>
  167. jQuery(document).ready(function($) {
  168. $('#nav a').smoothScroll({
  169. speed: 1000
  170. });
  171. $('.showOlderChanges').on('click', function(e){
  172. $('.changelog .old').slideDown('slow');
  173. $(this).fadeOut();
  174. e.preventDefault();
  175. })
  176. });
  177. var _gaq = _gaq || [];
  178. _gaq.push(['_setAccount', 'UA-2196019-1']);
  179. _gaq.push(['_trackPageview']);
  180. (function() {
  181. var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  182. ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  183. var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  184. })();
  185. </script>
  186. </div>
  187. </body>
  188. </html>