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.

184 lines
9.4KB

  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. <link rel="shortcut icon" href="img/demopage/favicon.ico">
  10. <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Karla%7CMontserrat">
  11. <link rel="stylesheet" href="css/screen.css">
  12. <link rel="stylesheet" href="css/lightbox.css">
  13. </head>
  14. <body>
  15. <section id="intro" class="section intro-section">
  16. <header>
  17. <h1 class="logo">Lightbox<em class="version">2</em></h1>
  18. </header>
  19. <div class="section-content">
  20. <p class="author">
  21. by Lokesh Dhakar<br />
  22. <span class="author-links">
  23. <a href="http://lokeshdhakar.com">Blog</a> - <a href="https://twitter.com/lokesh">Twitter</a> - <a href="https://github.com/lokesh">Github</a>
  24. </span>
  25. </p>
  26. <p class="lead">
  27. Lightbox is small javascript library used to overlay images on top of the current page. It's a snap to setup and works on all modern browsers.
  28. </p>
  29. </div>
  30. </section>
  31. <section id="examples" class="section examples-section">
  32. <header>
  33. <h2 class="section-header"><span class="line-cover">Examples</span></h2>
  34. </header>
  35. <div class="section-content">
  36. <h3>Single images</h3>
  37. <div class="image-row">
  38. <a class="example-image-link" href="img/demopage/image-1.jpg" data-lightbox="example-1"><img class="example-image" src="img/demopage/thumb-1.jpg" alt="thumb-1" width="150" height="150"/></a>
  39. <a class="example-image-link" href="img/demopage/image-2.jpg" data-lightbox="example-2" data-title="Optional caption."><img class="example-image" src="img/demopage/thumb-2.jpg" alt="thumb-1" width="150" height="150"/></a>
  40. </div>
  41. <h3 style="clear: both;">An image set</h3>
  42. <div class="image-row">
  43. <div class="image-set">
  44. <a class="example-image-link" href="img/demopage/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/demopage/thumb-3.jpg" alt="Plants: image 1 0f 4 thumb" width="150" height="150"/></a>
  45. <a class="example-image-link" href="img/demopage/image-4.jpg" data-lightbox="example-set" title="Or press the right arrow on your keyboard."><img class="example-image" src="img/demopage/thumb-4.jpg" alt="Plants: image 2 0f 4 thumb" width="150" height="150"/></a>
  46. <a class="example-image-link" href="img/demopage/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/demopage/thumb-5.jpg" alt="Plants: image 3 0f 4 thumb" width="150" height="150"/></a>
  47. <a class="example-image-link" href="img/demopage/image-6.jpg" data-lightbox="example-set" title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="img/demopage/thumb-6.jpg" alt="Plants: image 4 0f 4 thumb" width="150" height="150"/></a>
  48. </div>
  49. </div>
  50. </div>
  51. </section>
  52. <section id="download" class="section download-section">
  53. <header>
  54. <h2 class="section-header"><span class="line-cover">Download</span></h2>
  55. </header>
  56. <div class="section-content">
  57. <a href="releases/lightbox2.7.zip" class="download-button">
  58. <div class="file">
  59. Lightbox
  60. <div class="version">
  61. v2.7
  62. </div>
  63. </div>
  64. </a>
  65. <p>
  66. Lightbox2 is open-source.<br/>View and fork the code on <a href="https://github.com/lokesh/lightbox2">Github</a>.
  67. </p>
  68. </div>
  69. </section>
  70. <section id="how-to-use" class="section how-to-use-section">
  71. <header>
  72. <h2 class="section-header"><span class="line-cover">How to use</span></h2>
  73. </header>
  74. <div class="section-content">
  75. <h3>Part 1 - Get setup</h3>
  76. <ol>
  77. <li>Download and unzip the latest version of Lightbox from above.</li>
  78. <li>Look inside the <code>js</code> folder to find <code>jquery-1.10.2.min.js</code> and <code>lightbox.min.js</code> and load both of these files. Load jQuery first.
  79. <pre><code>&lt;script src=&quot;js/jquery-1.10.2.min.js&quot;&gt;&lt;/script&gt;
  80. &lt;script src=&quot;js/lightbox.min.js&quot;&gt;&lt;/script&gt;</code></pre>
  81. </li>
  82. <li>Look inside the <code>css</code> folder to find <code>lightbox.css</code> and load it.
  83. <pre><code>&lt;link href=&quot;css/lightbox.css&quot; rel=&quot;stylesheet&quot; /&gt;</code></pre>
  84. </li>
  85. <li>Look inside the <code>img</code> folder to find <code>close.png</code>, <code>loading.gif</code>, <code>prev.png</code>, and <code>next.png</code>. These files are used in <code>lightbox.css</code>. By default, <code>lightbox.css</code> will look for these images in a folder called <code>img</code>.</li>
  86. </ol>
  87. <h3>Part 2 - Turn it on</h3>
  88. <ul>
  89. <li>Add a <code>data-lightbox</code> attribute to any image link to activate Lightbox. For the value of the attribute, use a unique name for each image. For example:
  90. <pre><code>&lt;a href=&quot;img/image-1.jpg&quot; data-lightbox=&quot;image-1&quot; title=&quot;My caption&quot;&gt;image #1&lt;/a&gt;</code></pre>
  91. <div class="sub-point"><em>Optional:</em> Set the <code>title</code> attribute if you want to show a caption.</div> </li>
  92. <li>If you have a group of related images that you would like to combine into a set, use the same <code>data-lightbox</code> attribute value for all of the images. For example:
  93. <pre><code>&lt;a href=&quot;img/image-2.jpg&quot; data-lightbox=&quot;roadtrip&quot;&gt;image #2&lt;/a&gt;
  94. &lt;a href=&quot;img/image-3.jpg&quot; data-lightbox=&quot;roadtrip&quot;&gt;image #3&lt;/a&gt;
  95. &lt;a href=&quot;img/image-4.jpg&quot; data-lightbox=&quot;roadtrip&quot;&gt;image #4&lt;/a&gt;</code></pre>
  96. </li>
  97. <li class="last-list-item"><div class="sub-point">For you long time Lightbox users, don't fret, you can still enable Lightbox by using <code>rel="lightbox"</code>. The new <code>data-lightbox</code> approach is preferred though as it is valid html.</div></li>
  98. </ul>
  99. </div>
  100. </section>
  101. <section id="help" class="section questions-section">
  102. <header>
  103. <h2 class="section-header"><span class="line-cover">Help</span></h2>
  104. </header>
  105. <div class="section-content">
  106. <h3>Bugs</h3>
  107. <p>If you find a bug, create an <a href="https://github.com/lokesh/lightbox2/issues">issue on Github</a>. Include your operating system and browser version along with detailed steps to reproduce the bug.</p>
  108. <h3>Feature requests</h3>
  109. <p>If you want a feature added, please create an <a href="https://github.com/lokesh/lightbox2/issues">issue on Github</a>. Someone else or I might be able to help out. No guarantees.</p>
  110. <h3>Support questions</h3>
  111. <p>If you have a question that is not a bug or a feature request, your best chance of getting an answer is by posting it on <a href="http://stackoverflow.com/">Stackoverflow</a>.</p>
  112. <h3>Older versions</h3>
  113. <p>See a change log and access older versions on the <a href="https://github.com/lokesh/lightbox2/releases">Github releases page</a>.</p>
  114. </div>
  115. </section>
  116. <section id="donate" class="section donate-section">
  117. <header>
  118. <h2 class="section-header"><span class="line-cover">Donate</span></h2>
  119. </header>
  120. <div class="section-content">
  121. <p>
  122. Lightbox is completely free to use. If you're using Lightbox on a commercial project and are feeling generous, consider a donation. Thanks!
  123. </p>
  124. <form class="donate-button-form" name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
  125. <fieldset>
  126. <input type="hidden" name="cmd" value="_xclick">
  127. <input type="hidden" name="business" value="lokesh.dhakar@gmail.com">
  128. <input type="hidden" name="item_name" value="Donation for Lightbox">
  129. <input type="hidden" name="no_note" value="1">
  130. <input type="hidden" name="currency_code" value="USD">
  131. <input type="hidden" name="tax" value="0">
  132. <input type="hidden" name="bn" value="PP-DonationsBF">
  133. <input type="image" src="img/demopage/donate.png" name="submit" class="donate-button" alt="Make payments with PayPal - it's fast, free and secure!">
  134. </fieldset>
  135. </form>
  136. </div>
  137. </section>
  138. <section id="credits" class="credits-section last">
  139. <div class="section-content">
  140. <p>Lightbox2 created by Lokesh Dhakar<br />
  141. <a href="http://lokeshdhakar.com">Blog</a> - <a href="https://twitter.com/lokesh">Twitter</a> - <a href="http://github.com/lokesh">Github</a></p>
  142. </div>
  143. </section>
  144. <section id="sharing" class="sharing-section">
  145. <a href="https://twitter.com/share" class="twitter-share-button" data-via="lokesh" data-size="large">Tweet</a>
  146. <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>
  147. </section>
  148. <script src="js/jquery-1.11.0.min.js"></script>
  149. <script src="js/lightbox.js"></script>
  150. <script>
  151. var _gaq = _gaq || [];
  152. _gaq.push(['_setAccount', 'UA-2196019-1']);
  153. _gaq.push(['_trackPageview']);
  154. (function() {
  155. var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  156. ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  157. var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  158. })();
  159. </script>
  160. </body>
  161. </html>