lazybox 0.0.8 → 0.0.9

data/README.md

@@ -1,11 +1,11 @@
 # LazyBox
 
-Lazybox is a jQuery-based, lightbox which can display entire remote pages.
-Use lazybox with rails 3.1 asset pipeline.
+Lazybox is a jQuery-based, lightbox that can display entire remote pages and images.
+Use lazybox with rails 3.1 assets pipeline.
 
-LazyBox implemented using only with css and jquery without images.
-This is high perfomance modal dialogs. All unpacked files take only 3 kb.
-You never find simplest solution for popup windows.
+LazyBox implemented using only css and jquery without images.
+This is high perfomance modal dialogs. All unpacked files take only 4 kb.
+This is simplest solution for popup windows.
 
 # Installation
 
@@ -74,6 +74,10 @@ or you can set before_filter that will disable layout for ajax requests:
       $(document).trigger('close.lazybox')
       window.location.reload();
 
+you can use lazybox for displaing images
+
+    - link_to 'Image', image.url, :rel => :lazybox
+
 # Options
 
     overlay:  true|false //default true. Show lazybox overlay.

data/lazybox.gemspec

@@ -15,5 +15,6 @@ Gem::Specification.new do |s|
   s.require_path  = "lib"
 
   s.add_development_dependency "rails",   "~> 3.1"
+  s.add_development_dependency "jquery-rails"
 end
 

data/lib/lazybox/version.rb

@@ -1,3 +1,3 @@
 module Lazybox
-  VERSION = "0.0.8"
+  VERSION = "0.0.9"
 end

data/vendor/assets/javascripts/lazybox.js

@@ -2,38 +2,34 @@
   $.fn.lazybox = function(options){
     var defaults = {overlay: true, esc: true, close: true, modal: true, opacity: 0.3};
     var options = $.extend(defaults, options);
-
+    var imagesRegexp = new RegExp('\\.(png|jpg|jpeg|gif)(\\?.*)?$', 'i')
     this.live('click', function(e){
+      var href = $(this).attr('href');
       e.preventDefault();
-      if (options.overlay) {
-        $('body:not(:has(#lazybox_overlay))').append("<div id='lazybox_overlay' style='display:none'></div>");
-        $('#lazybox_overlay').css({filter: 'alpha(opacity='+options.opacity*100+')', opacity: options.opacity});
-        $('#lazybox_overlay').fadeIn(500);
-      }
-
-      $.ajax({
-        url: $(this).attr('href'),
-        success: function(data){
-          $('body:not(:has(#lazybox))').append("<div id='lazybox'><div id='lazybox_body'></div></div>");
-          if (options.cssClass) { $('#lazybox').addClass(options.cssClass) } else { $('#lazybox').removeClass(); }
-          if (options.close) {
-            $('#lazybox:not(:has(#lazybox_close))').prepend($("<a id='lazybox_close' title='close'>×</a>"));
-            if ($.browser.msie) $('#lazybox_close').addClass('ie');
-          } else $('#lazybox_close').remove();
-          $('#lazybox_body').html(data);
+      $('body:not(:has(#lazybox))').append("<div id='lazybox'><div id='lazybox_body'></div></div>");
+      apply_settings(options);
+      if (href.match(imagesRegexp)) {
+        var img = new Image()
+        img.onload = function() {
+          $('#lazybox_body').html('<img src="' + img.src + '" /></div>');
           center_lazybox();
           $('#lazybox').fadeIn(300);
-          if (!options.modal) { $('#lazybox_overlay').bind('click', function(){ close_lazybox() }) } else { $('#lazybox_overlay').unbind(); }
-          },
-        error: function(){
-          $('#lazybox_overlay').fadeOut(500);
         }
-      });
+        img.src = href
+      } else {
+        $.ajax({
+          url: href,
+          success: function(data){
+            $('#lazybox_body').html(data);
+            center_lazybox();
+            $('#lazybox').fadeIn(300);
+            },
+          error: function(){
+            $('#lazybox_overlay').fadeOut(500);
+          }
+        });
+      }
     });
-
-    if (options.close) $('#lazybox_close').live('click', function(){ close_lazybox() });
-    if (!options.modal && options.overlay) { $('#lazybox_overlay').bind('click', function(){ close_lazybox() }) } else { $('#lazybox_overlay').unbind(); }
-    $(document).keyup(function(e) { if (e.keyCode == 27 && options.esc) close_lazybox() });
   }
 
   function close_lazybox(){
@@ -46,6 +42,22 @@
     $('#lazybox').css({ top: ((x < 0) ? 20 : x), left:(($(window).width() - $('#lazybox').outerWidth()) / 2) + $(window).scrollLeft() });
   }
 
+  function apply_settings(options){
+    if (options.overlay) {
+      $('body:not(:has(#lazybox_overlay))').append("<div id='lazybox_overlay'></div>");
+      $('#lazybox_overlay').css({filter: 'alpha(opacity='+options.opacity*100+')', opacity: options.opacity});
+      $('#lazybox_overlay').fadeIn(500);
+    }
+    if (options.cssClass) { $('#lazybox').addClass(options.cssClass) } else { $('#lazybox').removeClass(); }
+    if (options.close) {
+      $('#lazybox:not(:has(#lazybox_close))').prepend($("<a id='lazybox_close' title='close'>×</a>"));
+      $('#lazybox_close').live('click', function(){ close_lazybox() });
+      if ($.browser.msie) $('#lazybox_close').addClass('ie');
+    } else $('#lazybox_close').remove();
+    if (!options.modal) { $('#lazybox_overlay').bind('click', function(){ close_lazybox() }) } else { $('#lazybox_overlay').unbind(); }
+    if (!options.modal && options.overlay) { $('#lazybox_overlay').bind('click', function(){ close_lazybox() }) } else { $('#lazybox_overlay').unbind(); }
+    $(document).keyup(function(e) { if (e.keyCode == 27 && options.esc) close_lazybox() });
+  }
+
   $(document).bind('close.lazybox', function(){ close_lazybox() });
 })(jQuery);
-

data/vendor/assets/stylesheets/lazybox.css

@@ -1,59 +1,62 @@
 #lazybox_overlay{
   background: black;
-  position: fixed;
-  top: 0px;
   bottom: 0px;
+  display: none;
   left: 0px;
+  position: fixed;
   right: 0px;
+  top: 0px;
   z-index: 100;
 }
 
 #lazybox{
-  position: absolute;
-  top: 10%;
-  left: 30%;
   background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  box-shadow: 0 1px 5px #333;
   color: #7F7F7F;
+  display: none;
+  left: 49%;
   padding: 20px;
-  border: 1px solid #ccc;
+  position: absolute;
+  top: 49%;
+  z-index: 101;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   -khtml-border-radius: 10px;
-  min-width: 200px;
-  min-height: 100px;
-  border-radius: 10px;
   -moz-box-shadow: 0 1px 5px #333;
   -webkit-box-shadow: 0 1px 5px #333;
-  box-shadow: 0 1px 5px #333;
-  z-index: 101;
 }
 
 a#lazybox_close {
+  background: black;
+  border: 2px solid white;
+  border-radius: 20px;
+  box-shadow: 0 1px 5px #333;
   color: white;
-  font: bold 24px/100% Arial, Helvetica, sans-serif !important;
+  cursor: pointer;
   float: right;
+  font: bold 26px/100% Arial, Helvetica, sans-serif !important;
+  height: 25px;
   margin-top: -35px;
   margin-right: -35px;
-  cursor: pointer;
   text-align: center;
-  border: 2px solid white;
-  width: 24px;
-  height: 24px;
-  background: black;
-  border-radius: 20px;
+  width: 25px;
+  -moz-border-radius: 20px;
+  -webkit-border-radius: 20px;
+  -khtml-border-radius: 20px;
   -moz-box-shadow: 0 1px 5px #333;
   -webkit-box-shadow: 0 1px 5px #333;
-  box-shadow: 0 1px 5px #333;
 }
 
-a#lazybox_close:hover { color: black; border-color: black; background: white; }
+a#lazybox_close:hover { background: white; border-color: black; color: black; }
 
 a#lazybox_close.ie {
-  border: none;
-  margin-top: -20px;
-  margin-right: -20px;
   background: white;
+  border: none;
   color: gray;
+  margin-right: -20px;
+  margin-top: -20px;
 }
 
 a#lazybox_close.ie:hover { color: black; }

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: lazybox
 version: !ruby/object:Gem::Version 
-  hash: 15
+  hash: 13
   prerelease: 
   segments: 
   - 0
   - 0
-  - 8
-  version: 0.0.8
+  - 9
+  version: 0.0.9
 platform: ruby
 authors: 
 - Alex Galushka
@@ -15,7 +15,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2011-12-07 00:00:00 Z
+date: 2011-12-18 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: rails
@@ -32,6 +32,20 @@ dependencies:
         version: "3.1"
   type: :development
   version_requirements: *id001
+- !ruby/object:Gem::Dependency 
+  name: jquery-rails
+  prerelease: false
+  requirement: &id002 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        hash: 3
+        segments: 
+        - 0
+        version: "0"
+  type: :development
+  version_requirements: *id002
 description: This is high perfomance modal dialogs for your Rails application.
 email: 
 - sexmcs@gmail.com