Browse Source

Updated demo page for v2.6

master
Lokesh Dhakar 7 years ago
parent
commit
271f742f7c
12 changed files with 226 additions and 194 deletions
  1. +19
    -5
      README.markdown
  2. +2
    -29
      coffee/lightbox.coffee
  3. +2
    -2
      css/lightbox.css
  4. +112
    -53
      css/screen.css
  5. +43
    -60
      index.html
  6. +0
    -6
      js/jquery-2.0.3.min.js
  7. +1
    -0
      js/lightbox-2.6.min.js
  8. +0
    -29
      js/lightbox.js
  9. +1
    -1
      package.json
  10. BIN
      releases/lightbox2.6.zip
  11. +1
    -1
      sass/lightbox.sass
  12. +45
    -8
      sass/screen.sass

+ 19
- 5
README.markdown View File

@@ -1,15 +1,29 @@
## Lightbox2
by Lokesh Dhakar | [lokeshdhakar.com](http://www.lokeshdhakar.com) | [twitter.com/lokesh](http://twitter.com/lokesh)

### Information and support
For examples, downloads, and information on using Lightbox, visit the Lightbox2 homepage:
[http://lokeshdhakar.com/projects/lightbox2/](http://lokeshdhakar.com/projects/lightbox2/)
### Examples & step-by-step instructions
[Goto the Lightbox2 demo page](http://lokeshdhakar.com/projects/lightbox2/)

For personal support issues and feature requests, visit the Lightbox forums:
[http://lokeshdhakar.com/forums/](http://lokeshdhakar.com/forums/)

### License
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 homepage link, and the license info intact.


### Thanks

For helping during the early days:

* Scott Upton [(uptonic.com)](uptonic.com), Peter-Paul Koch [(quirksmode.com)](quirksmode.com), and Thomas Fuchs [(mir.aculo.us)](mir.aculo.us) for ideas, libs, and snippets.
* Artemy Tregubenko [(arty.name)](arty.name) for cleanup and help in updating to latest proto-aculous in v2.05.

For helping and submitting PRs in the Github era:

* Matthias Vill [(https://github.com/TheConstructor)](https://github.com/TheConstructor)
* XhmikosR - [(https://github.com/XhmikosR)](https://github.com/XhmikosR)
* mwasson - [(https://github.com/mwasson)](https://github.com/mwasson)
* Heleen v.d. S - [(https://github.com/Heleen)](https://github.com/Heleen)
* careilly - [(https://github.com/careilly)](https://github.com/careilly)

+ 2
- 29
coffee/lightbox.coffee View File

@@ -9,40 +9,13 @@ Licensed under the Creative Commons Attribution 2.5 License - http://creativecom
- 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 proto-aculous in v2.05.


Table of Contents
=================
LightboxOptions

Lightbox
- constructor
- init
- enable
- build
- start
- changeImage
- sizeContainer
- showImage
- updateNav
- updateDetails
- preloadNeigbhoringImages
- enableKeyboardNav
- disableKeyboardNav
- keyboardAction
- end

options = new LightboxOptions()
lightbox = new Lightbox options

###


# Use local alias
$ = jQuery


class LightboxOptions
constructor: ->
@fadeDuration = 500


+ 2
- 2
css/lightbox.css View File

@@ -11,8 +11,8 @@ body:after {
left: 0;
z-index: 9999;
background-color: black;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
opacity: 0.85;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
display: none;
}



+ 112
- 53
css/screen.css View File

@@ -119,55 +119,69 @@ p {
}

/* line 49, ../sass/screen.sass */
ol {
list-style-type: decimal;
}

/* line 52, ../sass/screen.sass */
ul, ol {
margin: 0 0 1.25em 0;
}

/* line 52, ../sass/screen.sass */
/* line 55, ../sass/screen.sass */
li {
line-height: 1.4em;
padding-bottom: 0.8em;
margin-bottom: 0.8em;
border-bottom: 2px solid #515151;
line-height: 1.3em;
}
/* line 60, ../sass/screen.sass */
li.last-list-item {
border-bottom: none;
}

/* line 55, ../sass/screen.sass */
/* line 63, ../sass/screen.sass */
dt {
font-weight: bold;
}

/* line 58, ../sass/screen.sass */
/* line 66, ../sass/screen.sass */
dd {
margin-bottom: 1.625em;
}

/* line 61, ../sass/screen.sass */
/* line 69, ../sass/screen.sass */
strong {
font-weight: bold;
}

/* line 64, ../sass/screen.sass */
/* line 72, ../sass/screen.sass */
i {
font-style: italic;
}

/* line 67, ../sass/screen.sass */
/* line 75, ../sass/screen.sass */
pre {
padding: 10px;
margin-bottom: 20px;
margin-top: 5px;
margin-bottom: 10px;
background-color: #2b2b2b;
font: 12px "Andale Mono", "DejaVu Sans Mono", monospace;
font: 13px "Andale Mono", "DejaVu Sans Mono", monospace;
line-height: 1.5em;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
overflow-x: scroll;
overflow-x: auto;
}

/* line 76, ../sass/screen.sass */
/* line 85, ../sass/screen.sass */
code, kbd {
padding: 4px;
color: #ac8053;
background-color: #2b2b2b;
font: 12px "Andale Mono", "DejaVu Sans Mono", monospace;
font: 13px "Andale Mono", "DejaVu Sans Mono", monospace;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
@@ -175,52 +189,70 @@ code, kbd {
border-radius: 4px;
}

/* line 82, ../sass/screen.sass */
/* line 92, ../sass/screen.sass */
code {
position: relative;
top: -1px;
}

/* line 96, ../sass/screen.sass */
pre code {
font-size: 13px;
top: 0;
padding: 0;
background: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
padding: 0;
font-size: 13px;
}

/* line 88, ../sass/screen.sass */
/* line 103, ../sass/screen.sass */
a {
color: #00bfa8;
text-decoration: none;
}
/* line 91, ../sass/screen.sass */
/* line 106, ../sass/screen.sass */
a:hover {
color: #59ffeb;
}

/* line 94, ../sass/screen.sass */
/* line 109, ../sass/screen.sass */
::-moz-selection,
::selection {
background: #ff8000;
color: white;
}

/* line 114, ../sass/screen.sass */
.sub-point {
display: block;
font-size: 14px;
}
/* line 117, ../sass/screen.sass */
.sub-point code {
font-size: 12px;
padding: 2px;
}

/* -- Layout ------------------------------------------------------------------ */
/* line 101, ../sass/screen.sass */
/* line 124, ../sass/screen.sass */
body {
margin: 40px 40px 80px 40px;
background: #444444;
}

/* line 105, ../sass/screen.sass */
/* line 128, ../sass/screen.sass */
.wrapper {
max-width: 740px;
margin: 0 auto;
}

/* line 109, ../sass/screen.sass */
/* line 132, ../sass/screen.sass */
.section {
padding: 0 0 40px 0;
margin-bottom: 40px;
*zoom: 1;
border-bottom: 2px solid #373737;
border-bottom: 4px solid #373737;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.section:after {
@@ -228,17 +260,25 @@ body {
display: table;
clear: both;
}
/* line 114, ../sass/screen.sass */
/* line 137, ../sass/screen.sass */
.section.last {
border-bottom: none;
}

/* line 117, ../sass/screen.sass */
/* line 140, ../sass/screen.sass */
.section-header {
text-align: center;
}

/* line 120, ../sass/screen.sass */
/* line 143, ../sass/screen.sass */
.section-subheader {
margin-top: -0.6em;
margin-bottom: 1em;
text-align: center;
font-size: 24px;
}

/* line 149, ../sass/screen.sass */
.row {
*zoom: 1;
}
@@ -251,45 +291,45 @@ body {

/* -- Sections ------------------------------------------------------------------ */
/* -- Intro -- */
/* line 127, ../sass/screen.sass */
/* line 156, ../sass/screen.sass */
.intro-section {
text-align: center;
}

/* line 130, ../sass/screen.sass */
/* line 159, ../sass/screen.sass */
.logo {
color: white;
margin-bottom: 0.05em;
}
/* line 133, ../sass/screen.sass */
/* line 162, ../sass/screen.sass */
.logo .version {
color: #fdf485;
}

/* line 136, ../sass/screen.sass */
/* line 165, ../sass/screen.sass */
.author {
margin-top: -9px;
padding-left: 23px;
line-height: 1.2em;
}

/* line 141, ../sass/screen.sass */
/* line 170, ../sass/screen.sass */
.author-links {
font-size: 16px;
}

/* line 144, ../sass/screen.sass */
/* line 173, ../sass/screen.sass */
.lead {
font-size: 22px;
}

/* -- Examples -- */
/* line 148, ../sass/screen.sass */
/* line 177, ../sass/screen.sass */
.examples-section {
text-align: center;
}

/* line 151, ../sass/screen.sass */
/* line 180, ../sass/screen.sass */
.image-row {
*zoom: 1;
margin-bottom: 20px;
@@ -301,7 +341,7 @@ body {
clear: both;
}

/* line 155, ../sass/screen.sass */
/* line 184, ../sass/screen.sass */
.example-image-link {
display: inline-block;
margin: 0 10px 20px 10px;
@@ -317,12 +357,12 @@ body {
-o-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
/* line 162, ../sass/screen.sass */
/* line 191, ../sass/screen.sass */
.example-image-link:hover {
border: 4px solid #00bfa8;
}

/* line 165, ../sass/screen.sass */
/* line 194, ../sass/screen.sass */
.example-image {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
@@ -332,12 +372,12 @@ body {
}

/* -- Download -- */
/* line 170, ../sass/screen.sass */
/* line 199, ../sass/screen.sass */
.download-section {
text-align: center;
}

/* line 173, ../sass/screen.sass */
/* line 202, ../sass/screen.sass */
.download-button {
display: block;
max-width: 300px;
@@ -363,25 +403,25 @@ body {
display: table;
clear: both;
}
/* line 184, ../sass/screen.sass */
/* line 213, ../sass/screen.sass */
.download-button:hover {
border-color: #00bfa8;
background-color: #444444;
}
/* line 187, ../sass/screen.sass */
/* line 216, ../sass/screen.sass */
.download-button .file {
font-size: 36px;
color: white;
line-height: 1em;
}
/* line 191, ../sass/screen.sass */
/* line 220, ../sass/screen.sass */
.download-button .version {
font-size: 24px;
color: #00bfa8;
}

/* -- Sharing -- */
/* line 197, ../sass/screen.sass */
/* line 226, ../sass/screen.sass */
.sharing {
position: fixed;
top: 20px;
@@ -389,7 +429,12 @@ body {
}

/* -- Donate -- */
/* line 204, ../sass/screen.sass */
/* line 233, ../sass/screen.sass */
.donate-button-form {
text-align: center;
}

/* line 235, ../sass/screen.sass */
.donate-button {
border: 4px solid rgba(0, 0, 0, 0);
-webkit-border-radius: 4px;
@@ -402,7 +447,7 @@ body {
-o-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
/* line 208, ../sass/screen.sass */
/* line 239, ../sass/screen.sass */
.donate-button:hover {
background-color: #444444;
border-color: #00bfa8;
@@ -410,28 +455,33 @@ body {

/* -- Responsive design -------------------------------------------------------------- */
@media only screen and (max-width: 640px) {
/* line 216, ../sass/screen.sass */
/* line 247, ../sass/screen.sass */
body {
margin: 80px 10px 40px 10px;
font-size: 14px;
}

/* line 219, ../sass/screen.sass */
/* line 250, ../sass/screen.sass */
h1 {
font-size: 48px;
}

/* line 221, ../sass/screen.sass */
/* line 252, ../sass/screen.sass */
h2 {
font-size: 26px;
}

/* line 223, ../sass/screen.sass */
/* line 254, ../sass/screen.sass */
h3 {
font-size: 16px;
}

/* line 225, ../sass/screen.sass */
/* line 256, ../sass/screen.sass */
ol {
list-style-position: inside;
}

/* line 258, ../sass/screen.sass */
code,
kbd,
pre,
@@ -439,24 +489,33 @@ body {
font-size: 11px;
}

/* line 230, ../sass/screen.sass */
/* line 263, ../sass/screen.sass */
.sub-point {
font-size: 12px;
}
/* line 265, ../sass/screen.sass */
.sub-point code {
font-size: 9px;
}

/* line 267, ../sass/screen.sass */
.lead {
font-size: 16px;
}

/* line 232, ../sass/screen.sass */
/* line 269, ../sass/screen.sass */
.section {
padding-bottom: 20px;
margin-bottom: 20px;
}

/* line 235, ../sass/screen.sass */
/* line 272, ../sass/screen.sass */
.author {
margin-top: -5px;
padding-left: 30px;
}

/* line 238, ../sass/screen.sass */
/* line 275, ../sass/screen.sass */
.author-links {
font-size: 12px;
}


+ 43
- 60
index.html View File

@@ -51,9 +51,9 @@
<div class="image-row">
<div class="image-set">
<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>
<a class="example-image-link" href="img/demopage/image-4.jpg" data-lightbox="example-set" title="Alternately you can press the right arrow key."><img class="example-image" src="img/demopage/thumb-4.jpg" alt="Plants: image 2 0f 4 thumb" width="150" height="150"/></a>
<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>
<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>
<a class="example-image-link" href="img/demopage/image-6.jpg" data-lightbox="example-set" title="Click the X or anywhere outside the image to close"><img class="example-image" src="img/demopage/thumb-6.jpg" alt="Plants: image 4 0f 4 thumb" width="150" height="150"/></a>
<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>
</div>
</div>
</section>
@@ -63,11 +63,11 @@
<h2 class="section-header">Download</h2>
</header>

<a href="releases/lightbox2.51.zip" class="download-button">
<a href="releases/lightbox2.6.zip" class="download-button">
<div class="file">
Lightbox
<div class="version">
v2.51
v2.6
</div>
</div>
</a>
@@ -75,76 +75,60 @@
<p>
Lightbox2 is open-source.<br/>View and fork the code on <a href="https://github.com/lokesh/lightbox2">Github</a>.
</p>

<!--
<h3>Changelog</h3>
<ul class="changelog">
<li><span class="version">v2.51</span> - <span class="date">4/20/12</span> - IE Fix: removed stray console.log statements. :-/</li>
<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>
<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>
<li class="old"><span class="version">v2.04</span> - <span class="date">3/9/08</span>
<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 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>
<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>
<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>
<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>
<li class="old"><span class="version">v2.02</span> - Fixed layout issues caused by multiline captions. Added keyboard navigation.</li>
<li class="old"><span class="version">v2.01</span> - Centering in IE6 (any DOCTYPE) fixed. Smoothed out resize transition.</li>
</ul>
<a href="#" class="showOlderChanges">Show older changes</a> -->
</section>


<section id="how-to-use" class="section how-to-use-section">
<header>
<h2 class="section-header">How to use</h2>
<h2 class="section-subheader">Step-by-step instructions</h2>
</header>
<h3>Part 1 - Setup</h3>
<h3>Part 1 - Get setup</h3>
<ol>
<li>Lightbox 2 uses the <a href="http://jquery.com/">jQuery</a> framework. Load jQuery and the Lightbox javascript files in the proper order.
<li>Download and unzip the latest version of Lightbox from above.</li>
<li>Look inside the <code>js</code> folder to find <code>jquery-1.10.2.min.js</code> and <code>lightbox-2.6.min.js</code> and load both of these files from your html page. Load jQuery first:
<pre><code>&lt;script src=&quot;js/jquery-1.10.2.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/lightbox.js&quot;&gt;&lt;/script&gt;
</code></pre>
</li>
<li>Include the Lightbox CSS file.
&lt;script src=&quot;js/lightbox-2.6.min.js&quot;&gt;&lt;/script&gt;
</code></pre></li>
<li>Look inside the <code>css</code> folder to find <code>lightbox.css</code> and load it from your html page:
<pre><code>&lt;link href=&quot;css/lightbox.css&quot; rel=&quot;stylesheet&quot; /&gt;
</code></pre>
</li>
<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>
<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>
</ol>
<h3>Part 2 - Activate</h3>
<ol>
<li>Add a <code>rel="lightbox"</code> attribute to any link tag to activate Lightbox.
<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;
</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.
<pre><code>&lt;a href=&quot;img/image-1.jpg&quot; rel=&quot;lightbox[roadtrip]&quot;&gt;image #1&lt;/a&gt;
&lt;a href=&quot;img/image-2.jpg&quot; rel=&quot;lightbox[roadtrip]&quot;&gt;image #2&lt;/a&gt;
&lt;a href=&quot;img/image-3.jpg&quot; rel=&quot;lightbox[roadtrip]&quot;&gt;image #3&lt;/a&gt;
<h3>Part 2 - Turn it on</h3>
<ul>
<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:
<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>
No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!</li>
</ol>
<div class="sub-point"><em>Optional:</em> Set the <code>title</code> attribute if you want to show a caption.</div> </li>
<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:
<pre><code>&lt;a href=&quot;img/image-2.jpg&quot; data-lightbox=&quot;roadtrip&quot;&gt;image #2&lt;/a&gt;
&lt;a href=&quot;img/image-3.jpg&quot; data-lightbox=&quot;roadtrip&quot;&gt;image #3&lt;/a&gt;
&lt;a href=&quot;img/image-4.jpg&quot; data-lightbox=&quot;roadtrip&quot;&gt;image #4&lt;/a&gt;
</code></pre></li>
<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>
</li>
</ul>
</section>


<section id="questions" class="section questions-section">
<section id="help" class="section questions-section">
<header>
<h2 class="section-header">Have questions?</h2>
<h2 class="section-header">Help</h2>
</header>
<p>
For personal support issues and feature requests please post a message in the <a href="lokeshdhakar.com/forums">forums</a>. I do not have time to personally respond to support emails, please use the forum. Thanks!
</p>
<p>
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.
</p>
<h3>Bugs</h3>
<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>

<h3>Feature requests</h3>
<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>

<h3>Support questions</h3>
<p>If you have a question that is not a bug or a feature request, your best chance of getting an answer is by following these steps:</p>
<ol class="simple-list">
<li><a href="http://lokeshdhakar.com/forums">Search the Lightbox forums</a>. <br /><span class="sub-point">You will not be able to post new questions in the forum as posting has been disabled. The forum is having spam problems and the forum will eventually be phased out.</span></li>
<li><a href="http://stackoverflow.com/">Search Stackoverflow</a>.</li>
<li class="last-list-item"><a href="http://stackoverflow.com/questions/ask">Create a new question on Stackoverflow</a>.</li>
</ol>
</section>

<section id="doante" class="section donate-section last">
@@ -152,9 +136,9 @@
<h2 class="section-header">Donate</h2>
</header>
<p>
Lightbox is completely free to use. If you're using Lightbox on a commercial project and feeling generous, consider a small donation. Thanks!
Lightbox is completely free to use. If you're using Lightbox on a commercial project and are feeling generous, consider a donation. Thanks!
</p>
<form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<form class="donate-button-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">
@@ -175,8 +159,7 @@


<script src="js/jquery-1.10.2.min.js"></script>
<!-- <script src="js/jquery-2.0.3.min.js"></script> -->
<script src="js/lightbox.js"></script>
<script src="js/lightbox-2.6.min.js"></script>

<script>
var _gaq = _gaq || [];


+ 0
- 6
js/jquery-2.0.3.min.js
File diff suppressed because it is too large
View File


+ 1
- 0
js/lightbox-2.6.min.js
File diff suppressed because it is too large
View File


+ 0
- 29
js/lightbox.js View File

@@ -9,35 +9,6 @@ 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 proto-aculous in v2.05.


Table of Contents
=================
LightboxOptions

Lightbox
- constructor
- init
- enable
- build
- start
- changeImage
- sizeContainer
- showImage
- updateNav
- updateDetails
- preloadNeigbhoringImages
- enableKeyboardNav
- disableKeyboardNav
- keyboardAction
- end

options = new LightboxOptions()
lightbox = new Lightbox options
*/




+ 1
- 1
package.json View File

@@ -1,6 +1,6 @@
{
"name": "lightbox2",
"version": "2.51.0",
"version": "2.6.0",
"author": "Lokesh Dhakar",
"description": "Lightbox is small javascript library used to overlay images on top of the current page.",
"keywords": [


BIN
releases/lightbox2.6.zip View File


+ 1
- 1
sass/lightbox.sass View File

@@ -14,7 +14,7 @@ body:after
left: 0
z-index: 9999
background-color: #000
+opacity(0.85)
+opacity(0.8)
display: none

.lightbox


+ 45
- 8
sass/screen.sass View File

@@ -46,11 +46,19 @@ p
line-height: 1.4em
margin-bottom: 1em

ol
list-style-type: decimal

ul, ol
margin: 0 0 1.25em 0

li
line-height: 1.4em
padding-bottom: .8em
margin-bottom: .8em
border-bottom: 2px solid lighten($bgColor, 5%)
line-height: 1.3em
&.last-list-item
border-bottom: none

dt
font-weight: bold
@@ -66,24 +74,31 @@ i

pre
padding: $gutter/4
margin-bottom: $gutter/2
margin-top: $gutter/8
margin-bottom: $gutter/4
background-color: darken($bgColor, 10%)
font: $fontSize - 6 "Andale Mono", "DejaVu Sans Mono", monospace
font: $fontSize - 5 "Andale Mono", "DejaVu Sans Mono", monospace
line-height: 1.5em
+border-radius($radius)
overflow-x: scroll
overflow-x: auto

code, kbd
padding: $gutter/10
color: desaturate($orange, 65%)
background-color: darken($bgColor, 10%)
font: $fontSize - 6 "Andale Mono", "DejaVu Sans Mono", monospace
font: $fontSize - 5 "Andale Mono", "DejaVu Sans Mono", monospace
+border-radius($radius)

code
position: relative
top: -1px

pre code
font-size: 13px
top: 0
padding: 0
background: transparent
+box-shadow(none)
padding: 0
font-size: 13px

a
color: $linkColor
@@ -96,6 +111,14 @@ a
background: $orange
color: white

.sub-point
display: block
font-size: $fontSize - 4
code
font-size: $fontSize - 6
padding: $gutter/20


/* -- Layout ------------------------------------------------------------------ */

body
@@ -110,13 +133,19 @@ body
padding: 0 0 $gutter 0
margin-bottom: $gutter
+pie-clearfix
border-bottom: 2px solid darken($bgColor, 5%)
border-bottom: 4px solid darken($bgColor, 5%)
&.last
border-bottom: none

.section-header
text-align: center

.section-subheader
margin-top: -.6em
margin-bottom: 1em
text-align: center
font-size: 24px

.row
+pie-clearfix

@@ -201,6 +230,8 @@ body

/* -- Donate -- */

.donate-button-form
text-align: center
.donate-button
border: 4px solid rgba(0, 0, 0, 0)
+border-radius($radius)
@@ -222,11 +253,17 @@ body
font-size: 26px // from 48px
h3
font-size: 16px // from 18px
ol
list-style-position: inside
code,
kbd,
pre,
pre code
font-size: $fontSize - 7
.sub-point
font-size: $fontSize - 6
code
font-size: $fontSize - 9
.lead
font-size: $fontSize - 2
.section


Loading…
Cancel
Save