first commit

adamhenson · Aug 31, 2014 · b6ae775 · b6ae775
1 parent ecde2fb
commit b6ae775
Show file tree

Hide file tree

Showing 9 changed files with 334 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -2,6 +2,9 @@
 
 > A lighterweight lightbox gallery module. A simple plugin supporting modern browsers only to minimize configuration and hacky code. Customizable.
 
+## Example
+[Click me](http://www.hensonism.com/static/plugins/jquery/lighterbox/)
+
 ## Installation
 
 Download **lighterbox** and reference it after jQuery.
@@ -14,12 +17,14 @@ Or load via synchronous or asynchronous module definition.
 
 ## Usage
 
+All basic styling is set in the JS, however it would be easy to override using the class selectors.
+
 ### HTML
 ```html
 <a href="https://s3.amazonaws.com/hensonism-art/paul-gauguin/gaugin3.jpg" class="lighterbox">
 	<img src="https://s3.amazonaws.com/hensonism-art/paul-gauguin/thumbs/gaugin3.jpg" />
 	<h2 class="lighterbox-title">Painting by Paul Gaugin</h2>
-	<p class="lighterbox-desc">Oil on Canvas</div>
+	<p class="lighterbox-desc">Oil on Canvas</p>
 </a>
 ```
 ### JavaScript
@@ -28,6 +33,6 @@ $(".lighterbox").lighterbox({ overlayColor : "white" });
 ```
 
 ## Options
-- overlayColor : {string} Any valid css value.
+- overlayColor : {string} "white" or "black" options sets the theme. Default is white.
 - overlayOpacity : {string or integer} Any valid css value.
 - animateSpeed : {string or integer} Any valid css value.
diff --git a/dev/jquery.lighterbox.js b/dev/jquery.lighterbox.js
@@ -80,10 +80,11 @@
   };
 
   // Re-position the image
-  Plugin.prototype.reposition = function( $el ) {
+  Plugin.prototype.reposition = function( $el, $caption ) {
 
     var init = function(){
-      var marginTop = -(Math.floor(parseInt($el.height()) / 2));
+      var captionHeight = ($caption.height() > 0) ? $caption.height() : 0;
+      var marginTop = -((Math.floor(parseInt($el.height()) / 2)) + (captionHeight / 2));
       var marginRight = -(Math.floor(parseInt($el.width()) / 2));
       $el.css({
         "margin-top" : marginTop + "px",
@@ -184,7 +185,7 @@
 
       // Re-position image
       $img.load(function(){
-        repositioner = new that.reposition($(this));
+        repositioner = new that.reposition($(this), $caption);
         repositioner.init();
         $(window).resize(repositioner.init);
         that.destroy([$loader]);

diff --git a/examples/basic/index.html b/examples/basic/index.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>lighterbox</title>
+    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
+    <script src="js/jquery.lighterbox.0.0.1.min.js"></script>
+    <script>
+        $(function(){ // document ready
+            $(".lighterbox").lighterbox({ overlayColor : "white" });
+        });
+    </script>
+    <link href='http://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
+    <style type="text/css">
+
+    /**
+     *
+     * This styling is mostly to display the gallery.
+     * The plugin handles most styling. The CSS below is mostly for the gallery layout.
+     *
+     */
+
+        body, h1, h2{
+            font-family: 'Roboto', Arial, sans-serif;
+            font-weight: 300;
+        }
+        article {
+            max-width:610px;
+            margin: 0.5em auto;
+        }
+        h1 {
+            font-size: 2.7em;
+            text-align: center;
+        }
+        section {
+            max-width: 49%;
+            float: left;
+            margin-right: 0.5%;
+            text-align: center;
+        }
+        img {
+            max-width: 100%;
+            height: auto;
+        }
+        a {
+            color: black;
+            text-decoration: none;
+        }
+        a h2, a p {
+            /* hide the title and caption until lighterbox shows it */
+            display: none;
+        }
+        @media (max-width: 400px) {
+            h1 {
+                font-size: 1.5em;
+            }
+            section {
+                max-width: 100%;
+                float: none;
+            }
+        }
+    </style>
+</head>
+<body>
+<h1><strong>lighterbox</strong> Example</h1>
+<article>
+    <section>
+        <a href="https://s3.amazonaws.com/hensonism-art/paul-gauguin/gaugin1.jpg" class="lighterbox">
+            <img src="https://s3.amazonaws.com/hensonism-art/paul-gauguin/thumbs/gaugin1.jpg" />
+            <h2 class="lighterbox-title">Painting #1 by Paul Gaugin</h2>
+            <p class="lighterbox-desc">Oil on Canvas</p>
+        </a>
+    </section>
+    <section>
+        <a href="https://s3.amazonaws.com/hensonism-art/paul-gauguin/gaugin2.jpg" class="lighterbox">
+            <img src="https://s3.amazonaws.com/hensonism-art/paul-gauguin/thumbs/gaugin2.jpg" />
+            <h2 class="lighterbox-title">Painting #2 by Paul Gaugin</h2>
+            <p class="lighterbox-desc">Oil on Canvas</p>
+        </a>
+    </section>
+    <section>
+        <a href="https://s3.amazonaws.com/hensonism-art/paul-gauguin/gaugin3.jpg" class="lighterbox">
+            <img src="https://s3.amazonaws.com/hensonism-art/paul-gauguin/thumbs/gaugin3.jpg" />
+            <h2 class="lighterbox-title">Painting #3 by Paul Gaugin</h2>
+            <p class="lighterbox-desc">Oil on Canvas</p>
+        </a>
+    </section>
+    <section>
+        <a href="https://s3.amazonaws.com/hensonism-art/paul-gauguin/gaugin4.jpg" class="lighterbox">
+            <img src="https://s3.amazonaws.com/hensonism-art/paul-gauguin/thumbs/gaugin4.jpg" />
+            <h2 class="lighterbox-title">Painting #4 by Paul Gaugin</h2>
+            <p class="lighterbox-desc">Oil on Canvas</p>
+        </a>
+    </section>
+</article>
+</body>
+</html>
diff --git a/examples/basic/js/jquery.lighterbox.0.0.1.min.js b/examples/basic/js/jquery.lighterbox.0.0.1.min.js
diff --git a/gulpfile.js b/gulpfile.js
@@ -25,7 +25,7 @@ gulp.task('minify', function() {
         path.basename += '.' + package.version;
       }
     }))
-    .pipe(gulp.dest('./'));
+    .pipe(gulp.dest('./versions'));
 
   gulp.src('./dev/jquery.lighterbox.js')
     .pipe(uglify())
@@ -34,7 +34,7 @@ gulp.task('minify', function() {
         path.basename += '.' + package.version + '.min';
       }
     }))
-    .pipe(gulp.dest('./'));
+    .pipe(gulp.dest('./versions'));
 
 });
 

diff --git a/jquery.lighterbox.0.0.1.js b/jquery.lighterbox.0.0.1.js
@@ -80,10 +80,11 @@
   };
 
   // Re-position the image
-  Plugin.prototype.reposition = function( $el ) {
+  Plugin.prototype.reposition = function( $el, $caption ) {
 
     var init = function(){
-      var marginTop = -(Math.floor(parseInt($el.height()) / 2));
+      var captionHeight = ($caption.height() > 0) ? $caption.height() : 0;
+      var marginTop = -((Math.floor(parseInt($el.height()) / 2)) + (captionHeight / 2));
       var marginRight = -(Math.floor(parseInt($el.width()) / 2));
       $el.css({
         "margin-top" : marginTop + "px",
@@ -184,7 +185,7 @@
 
       // Re-position image
       $img.load(function(){
-        repositioner = new that.reposition($(this));
+        repositioner = new that.reposition($(this), $caption);
         repositioner.init();
         $(window).resize(repositioner.init);
         that.destroy([$loader]);

diff --git a/jquery.lighterbox.0.0.1.min.js b/jquery.lighterbox.0.0.1.min.js