The original lightbox script, finally on github.
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.

168 lines

  1. <!DOCTYPE html>
  2. <html lang="en-us">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Lightbox</title>
  6. <meta name="description" lang="en" content="Lightbox 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.png">
  10. <link rel="stylesheet" href="">
  11. <link rel="stylesheet" href="css/screen.css">
  12. <link rel="stylesheet" href="css/lightbox.css">
  13. </head>
  14. <body>
  15. <div class="backdrop">
  16. <header>
  17. <div class="container">
  18. <h1 class="logo">
  19. <img src="img/demopage/picture.svg" class="picture-icon" />Lightbox
  20. </h1>
  21. <p class="lead">
  22. The original lightbox script.<br />Eight years later &mdash; still going strong!
  23. </p>
  24. <div class="primary-actions">
  25. <a href="releases/" class="button">
  26. Download
  27. </a>
  28. <a href="" class="button">
  29. View on Github
  30. </a>
  31. </div>
  32. <div class="credits">
  33. <p>
  34. Created by Lokesh Dhakar<br />
  35. <a href="" class="button button-minor">Follow me on Twitter</a>
  36. </p>
  37. </div>
  38. </div>
  39. </header>
  40. </div><!-- .backdrop -->
  41. <div class="content">
  42. <section id="examples" class="examples-section">
  43. <div class="container">
  44. <h2>Examples</h2>
  45. <h3>Two individual images</h3>
  46. <div class="image-row">
  47. <a class="example-image-link" href="img/demopage/image-1.jpg" data-lightbox="example-1"><img class="example-image" src="img/demopage/image-1.jpg" alt="image-1" /></a>
  48. <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/image-2.jpg" alt="image-1"/></a>
  49. </div>
  50. <hr />
  51. <h3 style="clear: both;">Four image set</h3>
  52. <div class="image-row">
  53. <div class="image-set">
  54. <a class="example-image-link" href="img/demopage/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="img/demopage/thumb-3.jpg" alt=""/></a>
  55. <a class="example-image-link" href="img/demopage/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="img/demopage/thumb-4.jpg" alt="" /></a>
  56. <a class="example-image-link" href="img/demopage/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="img/demopage/thumb-5.jpg" alt="" /></a>
  57. <a class="example-image-link" href="img/demopage/image-6.jpg" data-lightbox="example-set" data-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="" /></a>
  58. </div>
  59. </div>
  60. </div>
  61. </section>
  62. <section id="how-to-use" class="how-to-use-section">
  63. <div class="container">
  64. <h2>How to use</h2>
  65. <h3>Step 1 - Load the Javascript and CSS</h3>
  66. <ol>
  67. <li>Download and unzip the latest version of Lightbox.</li>
  68. <li>Look inside the <code>js</code> folder to find <code>jquery-1.11.0.min.js</code> and <code>lightbox.min.js</code> and load both of these files. Load jQuery first.
  69. <pre><code>&lt;script src=&quot;js/jquery-1.11.0.min.js&quot;&gt;&lt;/script&gt;
  70. &lt;script src=&quot;js/lightbox.min.js&quot;&gt;&lt;/script&gt;</code></pre>
  71. </li>
  72. <li>Look inside the <code>css</code> folder to find <code>lightbox.css</code> and load it.
  73. <pre><code>&lt;link href=&quot;css/lightbox.css&quot; rel=&quot;stylesheet&quot; /&gt;</code></pre>
  74. </li>
  75. <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>
  76. </ol>
  77. <h3>Step 2 - Turn it on</h3>
  78. <ul>
  79. <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:
  80. <pre><code>&lt;a href=&quot;img/image-1.jpg&quot; data-lightbox=&quot;image-1&quot; data-title=&quot;My caption&quot;&gt;Image #1&lt;/a&gt;</code></pre>
  81. <em>Optional:</em> Add a <code>data-title</code> attribute if you want to show a caption.
  82. </li>
  83. <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:
  84. <pre><code>&lt;a href=&quot;img/image-2.jpg&quot; data-lightbox=&quot;roadtrip&quot;&gt;Image #2&lt;/a&gt;
  85. &lt;a href=&quot;img/image-3.jpg&quot; data-lightbox=&quot;roadtrip&quot;&gt;Image #3&lt;/a&gt;
  86. &lt;a href=&quot;img/image-4.jpg&quot; data-lightbox=&quot;roadtrip&quot;&gt;Image #4&lt;/a&gt;</code></pre>
  87. </li>
  88. </ul>
  89. </div>
  90. </section>
  91. <section id="help" class="questions-section">
  92. <div class="container">
  93. <h2>Help</h2>
  94. <h3>Have a feature request?</h3>
  95. <p>If you want a feature added, <a href="">create an issue on Github</a>. Someone else or I might be able to help out. No guarantees.</p>
  96. <h3>Found a bug?</h3>
  97. <p>If you find a bug, <a href="">create an issue on Github</a>. Include your operating system and browser version along with detailed steps on how to reproduce the bug.</p>
  98. <h3>Can't get Lightbox working?</h3>
  99. <p>If you followed the instructions, but still can't get Lightbox working, <a href="">search Stackoverflow</a> to see if other people have run into the same issue as you. If not, post a new question.</p>
  100. <h3>Looking for older versions?</h3>
  101. <p>You can access older versions and see a changelog on the <a href="">Github releases page</a>.</p>
  102. </div>
  103. </section>
  104. <section id="donate" class="donate-section">
  105. <div class="container">
  106. <h2>Donate</h2>
  107. <p>
  108. Lightbox is 100% free to use. If you're using Lightbox on a commercial project and feeling generous, consider a donation. Thanks!
  109. </p>
  110. <form class="donate-button-form" name="_xclick" action="" method="post">
  111. <fieldset>
  112. <input type="hidden" name="cmd" value="_xclick">
  113. <input type="hidden" name="business" value="">
  114. <input type="hidden" name="item_name" value="Donation for Lightbox">
  115. <input type="hidden" name="no_note" value="1">
  116. <input type="hidden" name="currency_code" value="USD">
  117. <input type="hidden" name="tax" value="0">
  118. <input type="hidden" name="bn" value="PP-DonationsBF">
  119. <input type="submit" name="submit" class="button donate-button" value="Donate using Paypal" alt="Make payments with PayPal - it's fast, free and secure!">
  120. </fieldset>
  121. </form>
  122. </div>
  123. </section>
  124. </div><!-- .section-container -->
  125. <div id="sharing" class="sharing-section">
  126. <a href="" class="twitter-share-button" data-via="lokesh" data-size="large">Tweet</a>
  127. <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.src=p+'://';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
  128. </div>
  129. <script src="js/jquery-1.11.0.min.js"></script>
  130. <script src="js/lightbox.js"></script>
  131. <script>
  132. var _gaq = _gaq || [];
  133. _gaq.push(['_setAccount', 'UA-2196019-1']);
  134. _gaq.push(['_trackPageview']);
  135. (function() {
  136. var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  137. ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
  138. var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  139. })();
  140. </script>
  141. </body>
  142. </html>