diff --git a/README.markdown b/README.markdown index a6372e90..84523442 100644 --- a/README.markdown +++ b/README.markdown @@ -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) \ No newline at end of file diff --git a/coffee/lightbox.coffee b/coffee/lightbox.coffee index 714d9495..11bcaec9 100644 --- a/coffee/lightbox.coffee +++ b/coffee/lightbox.coffee @@ -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 diff --git a/css/lightbox.css b/css/lightbox.css index 83c17c2c..9778718e 100644 --- a/css/lightbox.css +++ b/css/lightbox.css @@ -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; } diff --git a/css/screen.css b/css/screen.css index 9b5e00e2..17bfddb8 100644 --- a/css/screen.css +++ b/css/screen.css @@ -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; } diff --git a/index.html b/index.html index 52b694ab..ec6c1fab 100644 --- a/index.html +++ b/index.html @@ -51,9 +51,9 @@

An image set

Plants: image 1 0f 4 thumb - Plants: image 2 0f 4 thumb + Plants: image 2 0f 4 thumb Plants: image 3 0f 4 thumb - Plants: image 4 0f 4 thumb + Plants: image 4 0f 4 thumb
@@ -63,11 +63,11 @@

An image set

Download

- +
Lightbox
- v2.51 + v2.6
@@ -75,76 +75,60 @@

Download

Lightbox2 is open-source.
View and fork the code on Github.

- - -

How to use

+

Step-by-step instructions

-

Part 1 - Setup

+

Part 1 - Get setup

    -
  1. Lightbox 2 uses the jQuery framework. Load jQuery and the Lightbox javascript files in the proper order. +
  2. Download and unzip the latest version of Lightbox from above.
    3. +
  3. Look inside the js folder to find jquery-1.10.2.min.js and lightbox-2.6.min.js and load both of these files from your html page. Load jQuery first: 
    <script src="js/jquery-1.10.2.min.js"></script>
-<script src="js/lightbox.js"></script>
-
    -
    4. -
  4. Include the Lightbox CSS file. +<script src="js/lightbox-2.6.min.js"></script> +
    5. +
  5. Look inside the css folder to find lightbox.css and load it from your html page: 
    <link href="css/lightbox.css" rel="stylesheet" />
    6. -
  6. Check the CSS and make sure the referenced prev.png and next.png files are in the right location. Also, make sure the loading.gif and close.png files as referenced near the top of the lightbox.js file are in the right location.
    7. +
  7. Look inside the img folder to find close.png, loading.gif, prev.png, and next.png. These files are used in lightbox.css. By default, lightbox.css will look for these images in a folder called img.
-

Part 2 - Activate

-
    -
  1. Add a rel="lightbox" attribute to any link tag to activate Lightbox. -
    <a href="img/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
-
    - Optional: Use the title attribute if you want to show a caption.
    2. -
  2. 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. -
    <a href="img/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
-<a href="img/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
-<a href="img/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
+		
    Part 2 - Turn it on
    
+	
      
+			
    • Add a data-lightbox attribute to any image link to activate Lightbox. For the value of the attribute, use a unique name for each image. For example:
+
      <a href="img/image-1.jpg" data-lightbox="image-1" title="My caption">image #1</a>
 
      
-			No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!
      • 
-
+
Optional: Set the title attribute if you want to show a caption.
+
  • If you have a group of related images that you would like to combine into a set, use the same data-lightbox attribute value for all of the images. For example: +
    <a href="img/image-2.jpg" data-lightbox="roadtrip">image #2</a>
+<a href="img/image-3.jpg" data-lightbox="roadtrip">image #3</a>
+<a href="img/image-4.jpg" data-lightbox="roadtrip">image #4</a>
+
    • +
  • For you long time Lightbox users, don't fret, you can still enable Lightbox by using rel="lightbox". The new data-lightbox approach is preferred though as it is valid html.
    • + +
    -
    +
    -

    Have questions?

    +

    Help

    -

    - 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! -

    -

    - 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. -

    +

    Bugs

    +

    If you find a bug, create an issue on Github. Include your operating system and browser version along with detailed steps to reproduce the bug.

    + +

    Feature requests

    +

    If you want a feature added, please create an issue on Github. Someone else or I might be able to help out. No guarantees.

    + +

    Support questions

    +

    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:

    +
      +
    1. Search the Lightbox forums.
      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.
      2. +
    2. Search Stackoverflow.
      3. +
    3. Create a new question on Stackoverflow.
      4. +