picture_zoomer 1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: b92460d3662dccfdb553f636500ab4dbd3b89ffe
+  data.tar.gz: bc046fe02df2fd63307abbc4bdf802a46f77290e
+SHA512:
+  metadata.gz: 2f6a509edae7dece0a3292e9341bf3571d11d1ec2d0392c6f9d7b25f8cc794f0f4f48911a60dd29aff51469d309039d7d69744d6f15ab3c98c9c63cb998c56dc
+  data.tar.gz: 0bde8ca21c1f3aa6aeba5ed90b1f200d77dc34657b4b0963f74df59bfaebe3e5b08a54bc4e212b2031e3a2ada9f3e371fb8acaafc46821d0897c09c08ebd5073

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright © 2015 LICO Innovations
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+The software is provided "as is", without warranty of any kind, express or
+implied, including but not limited to the warranties of merchantability, fitness
+for a particular purpose and noninfringement. In no event shall the authors or
+copyright holders be liable for any claim, damages or other liability, whether
+in an action of contract, tort or otherwise, arising from, out of or in
+connection with the software or the use or other dealings in the software.

data/README.markdown

@@ -0,0 +1,49 @@
+[![Gem Version](https://badge.fury.io/rb/picture_zoomer.svg)](http://badge.fury.io/rb/picture_zoomer)
+
+[Here's a demo](https://cdn.rawgit.com/bluerail/picture_zoomer/master/demo.html)
+
+Simple "zooming lightbox" that doesn't suck.
+
+This is a fairly simple piece of JS code, but also something I've re-written a
+number of times over the last few years. So here's the "canonical version".
+
+Usage
+=====
+Include the [JavaScript code](https://github.com/bluerail/picture_zoomer/tree/master/lib/assets/javascripts). For Ruby on Rails, you can use the gem (see below).
+
+All you need to do after that is tell it which images to zoom:
+
+    $('img').picture_zoomer()
+
+The larger version is loaded either from the `data-large` or `src` attribute:
+
+    <img src="smaller_version.jpg" data-large="larger-version.jpg">
+    <img src="large_version.jpg" style="width: 100px">
+
+or if you also want your image to do something without JS:
+
+    <a href="larger-version.jpg">
+      <img src="smaller_version.jpg" data-large="larger-version.jpg">
+    </a>
+
+There's one (optional) argument: the animation speed. The default is 400ms.
+
+    // Very fast!
+    $('img').picture_zoomer(100)
+
+    // Just show a large version (don't animate)
+    $('img').picture_zoomer(0)
+
+That's all there's to it :-)
+
+Ruby on Rails installation
+--------------------------
+This is packaged as a Ruby gem ready to use in a Rails app.
+
+Add to your `Gemfile`
+
+    gem 'picture_zoomer'
+
+Add to your `application.js`:
+
+    // =require picture_zoomer

data/lib/assets/javascripts/picture_zoomer.js

@@ -0,0 +1,85 @@
+// Generated by CoffeeScript 1.9.1
+(function() {
+  'use strict';
+  var get_scroll, zoom;
+
+  jQuery.fn.picture_zoomer = function(speed) {
+    if (speed == null) {
+      speed = 400;
+    }
+    return $(this).on('click', function(e) {
+      e.preventDefault();
+      if ($(this).is('img')) {
+        return zoom($(this), speed);
+      } else {
+        return zoom($(this).find('img'), speed);
+      }
+    });
+  };
+
+  get_scroll = function() {
+    return document.documentElement.scrollTop || document.body.scrollTop;
+  };
+
+  zoom = function(img, speed) {
+    var large, offset;
+    large = $(new Image());
+    large.attr('src', img.attr('data-large') || img.attr('src'));
+    offset = img.offset();
+    return large.on('load', function() {
+      var close, height, w_height, w_width, width;
+      width = large.prop('width');
+      height = large.prop('height');
+      w_width = $(window).width() - 25;
+      w_height = $(window).height() - 25;
+      if (width > w_width) {
+        height = height / (width / w_width);
+        width = w_width;
+      }
+      if (height > w_height) {
+        width = width / (height / w_height);
+        height = w_height;
+      }
+      large.css({
+        width: img.width(),
+        height: img.height(),
+        left: offset.left,
+        top: offset.top,
+        position: 'absolute',
+        'box-shadow': '0 0 8px rgba(0, 0, 0, .3)',
+        'z-index': 5000
+      });
+      $(document.body).append(large);
+      large.animate({
+        width: width,
+        height: height,
+        left: ($(window).width() - width) / 2,
+        top: ($(window).height() + $('#menu').height() - height) / 2 + get_scroll()
+      }, {
+        duration: speed
+      });
+      close = function() {
+        return large.animate({
+          width: img.width(),
+          height: img.height(),
+          left: offset.left,
+          top: offset.top
+        }, {
+          duration: speed,
+          complete: function() {
+            return large.remove();
+          }
+        });
+      };
+      $(document.body).one('click', close);
+      return $(document).on('keydown.photo_viewer', function(e) {
+        if (e.keyCode !== 27) {
+          return;
+        }
+        close();
+        return $(document).off('keydown.photo_viewer');
+      });
+    });
+  };
+
+}).call(this);

data/lib/assets/javascripts/picture_zoomer.js.coffee

@@ -0,0 +1,79 @@
+'use strict'
+
+# Simple "zooming lightbox" that doesn't suck.
+#
+# Basic usage:
+#   $('.body img').picture_zoomer()
+#
+#   // Faster animation
+#   $('.body img').picture_zoomer(200)
+#
+#   // Don't animate
+#   $('.body img').picture_zoomer(0)
+#
+# The url for the large version is either 'data-large', or the image src
+jQuery.fn.picture_zoomer = (speed=400) ->
+  $(this).on 'click', (e) ->
+    e.preventDefault()
+    if $(this).is('img')
+      zoom $(this), speed
+    else
+      zoom $(this).find('img'), speed
+
+
+get_scroll = -> document.documentElement.scrollTop or document.body.scrollTop
+
+zoom = (img, speed) ->
+  large = $(new Image())
+  large.attr 'src', (img.attr('data-large') or img.attr('src'))
+  offset = img.offset()
+
+  large.on 'load', ->
+    width = large.prop 'width'
+    height = large.prop 'height'
+
+    # Don't make it larger than the window
+    w_width = $(window).width() - 25
+    w_height = $(window).height() - 25
+    if width > w_width
+      height = height / (width / w_width)
+      width = w_width
+    if height > w_height
+      width = width / (height / w_height)
+      height = w_height
+
+    large.css
+      width: img.width()
+      height: img.height()
+      left: offset.left
+      top: offset.top
+      position: 'absolute'
+      'box-shadow': '0 0 8px rgba(0, 0, 0, .3)'
+      'z-index': 5000
+    $(document.body).append large
+
+    large.animate {
+      width: width
+      height: height
+      left: ($(window).width() - width) / 2
+      top: ($(window).height() + $('#menu').height() - height) / 2 + get_scroll()
+    }, {
+      duration: speed
+    }
+
+    # Close
+    close = ->
+      large.animate {
+        width: img.width()
+        height: img.height()
+        left: offset.left
+        top: offset.top
+      }, {
+        duration: speed
+        complete: -> large.remove()
+      }
+    $(document.body).one 'click', close
+    $(document).on 'keydown.photo_viewer', (e) ->
+      return unless e.keyCode is 27 # Esc
+      close()
+      $(document).off 'keydown.photo_viewer'

data/lib/picture_zoomer.rb

@@ -0,0 +1,7 @@
+module PictureZoomer
+end
+
+if defined? ::Rails
+  class PictureZoomer::Engine < ::Rails::Engine
+  end
+end

metadata

@@ -0,0 +1,63 @@
+--- !ruby/object:Gem::Specification
+name: picture_zoomer
+version: !ruby/object:Gem::Version
+  version: '1.0'
+platform: ruby
+authors:
+- Martin Tournoij
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2015-09-01 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: jquery-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: 
+email:
+- martin@arp242.net
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.markdown
+- lib/assets/javascripts/picture_zoomer.js
+- lib/assets/javascripts/picture_zoomer.js.coffee
+- lib/picture_zoomer.rb
+homepage: https://github.com/bluerail/picture_zoomer
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.4.5.1
+signing_key: 
+specification_version: 4
+summary: Simple "zooming lightbox" that doesn't suck.
+test_files: []