rails-gallery 0.2.0 → 0.2.1

data/README.md

@@ -11,6 +11,7 @@ Popular Javascript Photo galleries/carousels ready to use with Rails 3+.
 * slideshow
 * responsive
 * galleria
+* touch_touch
 
 Please add more using a similar convention as is used for these galleries ;)
 
@@ -25,16 +26,18 @@ In `application.css` manifest file:
  * require gallery/responsive/style
  * require gallery/slideshow
  * require gallery/galleria
+ * require gallery/touch_touch
 */
 ```
 
-Using Compass, f.ex in `application.css.scss.erb`
+Using Compass, f.ex in `application.css.scss`
 
 ```
 @import 'gallery/responsive/elastislide';
-@import 'gallery/responsive/style';
+@import 'gallery/responsive';
 @import 'gallery/slideshow';
 @import 'gallery/galleria';
+@import 'gallery/touch_touch';
 ```
 
 In `application.js` manifest file:
@@ -43,12 +46,26 @@ In `application.js` manifest file:
 //= require gallery/responsive
 //= require gallery/slideshow
 //= require gallery/galleria
+//= require gallery/touch_touch
 
-//= require jquery.easing-1.3
-//= require jquery.elastislide
-//= require jquery.tmpl.min
+//= require jquery/jquery.easing-1.3
+//= require jquery/jquery.elastislide
+//= require jquery/jquery.tmpl.min
 ```
 
+## Touch-Touch
+
+```javascript
+$(function(){
+
+    // Initialize the gallery
+    $('#thumbs a').touchTouch();
+
+});
+```
+
+See [TouchTouch](http://tutorialzine.com/2012/04/mobile-touch-gallery/) and [github repo](https://github.com/martinaglv/touchTouch)
+
 ## Minimalistic Slideshow gallery
 
 See [minimalistic-slideshow-gallery](http://tympanus.net/codrops/2010/07/05/minimalistic-slideshow-gallery/) for more info.
@@ -95,15 +112,40 @@ To adjust placement of thumbnails, use: `prependTo` or `appendTo` in `gallery/re
 *Automatic slideshow*
 
 I wanted the same thing and I find a way to do it.
-In the file gallery.js, in the function _initCarousel add these lines after `$esCarousel.elastislide( ‘setCurrent’, current );` (~ line 103):
+In the file gallery.js, in the function _initCarousel add these lines after: 
+
+`$esCarousel.elastislide( 'setCurrent', current );`
 
 ```javascript
 window.setInterval(function(){
-_navigate( ‘right’ );
+  _navigate( 'right' );
 }, 5000);
 ```
 
-You just have to change 5000 to the value you want (milliseconds).
+You just have to change `5000` to the value you want (milliseconds).
+
+* Fancybox integration*
+
+First you have to include the js and the css file of fancybox in the file where you have the carousel.
+
+In the file `responsive.js`, replace this line: 
+
+`$rgGallery.find('div.rg-image').empty().append('img src="' + largesrc + '"');` 
+
+With this (which adds 'fancybox' class to all images):
+
+`$rgGallery.find('div.rg-image').empty().append('a class="fancybox"
+href="'+largesrc+ '" img src="' + largesrc + '" a');`
+
+In this line, don’t forget to add the `"` for the img and link tags.
+
+Then do the fancybox magic on any class with the `fancybox` class 
+
+```javascript
+$(document).ready(function() {
+  $(“.fancybox”).fancybox();
+});
+```
 
 ## Galleria
 

data/VERSION

@@ -1 +1 @@
-0.2.0
+0.2.1

data/rails-gallery.gemspec

@@ -5,11 +5,11 @@
 
 Gem::Specification.new do |s|
   s.name = "rails-gallery"
-  s.version = "0.2.0"
+  s.version = "0.2.1"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
   s.authors = ["Kristian Mandrup"]
-  s.date = "2012-08-22"
+  s.date = "2012-08-26"
   s.description = "Adds popular javascript galleries to asset pipeline and includes a few Rails Gallery utils and helpers"
   s.email = "kmandrup@gmail.com"
   s.extra_rdoc_files = [
@@ -170,19 +170,23 @@ Gem::Specification.new do |s|
     "vendor/assets/images/gallery/slideshow/icons/prev.png",
     "vendor/assets/images/gallery/slideshow/icons/prev_thumb.png",
     "vendor/assets/images/gallery/slideshow/icons/up.png",
+    "vendor/assets/images/gallery/touch_touch/arrows.png",
+    "vendor/assets/images/gallery/touch_touch/preloader.gif",
     "vendor/assets/javascripts/gallery/galleria-1.2.8.js",
     "vendor/assets/javascripts/gallery/galleria-1.2.8.min.js",
     "vendor/assets/javascripts/gallery/galleria/classic.js",
     "vendor/assets/javascripts/gallery/galleria/classic.min.js",
     "vendor/assets/javascripts/gallery/responsive.js",
     "vendor/assets/javascripts/gallery/slideshow.js",
+    "vendor/assets/javascripts/gallery/touch_touch.js",
     "vendor/assets/javascripts/jquery/jquery.easing-1.3.js",
     "vendor/assets/javascripts/jquery/jquery.elastislide.js",
     "vendor/assets/javascripts/jquery/jquery.tmpl.min.js",
     "vendor/assets/stylesheets/gallery/galleria/classic.css",
     "vendor/assets/stylesheets/gallery/responsive.css",
     "vendor/assets/stylesheets/gallery/responsive/elastislide.css",
-    "vendor/assets/stylesheets/gallery/slideshow.css"
+    "vendor/assets/stylesheets/gallery/slideshow.css",
+    "vendor/assets/stylesheets/touch_touch.css"
   ]
   s.homepage = "http://github.com/kristianmandrup/rails-gallery"
   s.licenses = ["MIT"]

data/vendor/assets/javascripts/gallery/touch_touch.js

@@ -0,0 +1,235 @@
+/**
+ * @name    jQuery touchTouch plugin
+ * @author    Martin Angelov
+ * @version   1.0
+ * @url     http://tutorialzine.com/2012/04/mobile-touch-gallery/
+ * @license   MIT License
+ */
+
+(function(){
+
+  /* Private variables */
+
+  var overlay = $('<div id="galleryOverlay">'),
+    slider = $('<div id="gallerySlider">'),
+    prevArrow = $('<a id="prevArrow"></a>'),
+    nextArrow = $('<a id="nextArrow"></a>'),
+    overlayVisible = false;
+
+
+  /* Creating the plugin */
+
+  $.fn.touchTouch = function(){
+
+    var placeholders = $([]),
+      index = 0,
+      items = this;
+
+    // Appending the markup to the page
+    overlay.hide().appendTo('body');
+    slider.appendTo(overlay);
+
+    // Creating a placeholder for each image
+    items.each(function(){
+      placeholders = placeholders.add($('<div class="placeholder">'));
+    });
+
+    // Hide the gallery if the background is touched / clicked
+    slider.append(placeholders).on('click',function(e){
+      if(!$(e.target).is('img')){
+        hideOverlay();
+      }
+    });
+
+    // Listen for touch events on the body and check if they
+    // originated in #gallerySlider img - the images in the slider.
+    $('body').on('touchstart', '#gallerySlider img', function(e){
+
+      var touch = e.originalEvent,
+        startX = touch.changedTouches[0].pageX;
+
+      slider.on('touchmove',function(e){
+
+        e.preventDefault();
+
+        touch = e.originalEvent.touches[0] ||
+            e.originalEvent.changedTouches[0];
+
+        if(touch.pageX - startX > 10){
+          slider.off('touchmove');
+          showPrevious();
+        }
+        else if (touch.pageX - startX < -10){
+          slider.off('touchmove');
+          showNext();
+        }
+      });
+
+      // Return false to prevent image 
+      // highlighting on Android
+      return false;
+
+    }).on('touchend',function(){
+      slider.off('touchmove');
+    });
+
+    // Listening for clicks on the thumbnails
+
+    items.on('click', function(e){
+      e.preventDefault();
+
+      // Find the position of this image
+      // in the collection
+
+      index = items.index(this);
+      showOverlay(index);
+      showImage(index);
+
+      // Preload the next image
+      preload(index+1);
+
+      // Preload the previous
+      preload(index-1);
+
+    });
+
+    // If the browser does not have support 
+    // for touch, display the arrows
+    if ( !("ontouchstart" in window) ){
+      overlay.append(prevArrow).append(nextArrow);
+
+      prevArrow.click(function(e){
+        e.preventDefault();
+        showPrevious();
+      });
+
+      nextArrow.click(function(e){
+        e.preventDefault();
+        showNext();
+      });
+    }
+
+    // Listen for arrow keys
+    $(window).bind('keydown', function(e){
+
+      if (e.keyCode == 37){
+        showPrevious();
+      }
+      else if (e.keyCode==39){
+        showNext();
+      }
+
+    });
+
+
+    /* Private functions */
+
+
+    function showOverlay(index){
+
+      // If the overlay is already shown, exit
+      if (overlayVisible){
+        return false;
+      }
+
+      // Show the overlay
+      overlay.show();
+
+      setTimeout(function(){
+        // Trigger the opacity CSS transition
+        overlay.addClass('visible');
+      }, 100);
+
+      // Move the slider to the correct image
+      offsetSlider(index);
+
+      // Raise the visible flag
+      overlayVisible = true;
+    }
+
+    function hideOverlay(){
+      // If the overlay is not shown, exit
+      if(!overlayVisible){
+        return false;
+      }
+
+      // Hide the overlay
+      overlay.hide().removeClass('visible');
+      overlayVisible = false;
+    }
+
+    function offsetSlider(index){
+      // This will trigger a smooth css transition
+      slider.css('left',(-index*100)+'%');
+    }
+
+    // Preload an image by its index in the items array
+    function preload(index){
+      setTimeout(function(){
+        showImage(index);
+      }, 1000);
+    }
+
+    // Show image in the slider
+    function showImage(index){
+
+      // If the index is outside the bonds of the array
+      if(index < 0 || index >= items.length){
+        return false;
+      }
+
+      // Call the load function with the href attribute of the item
+      loadImage(items.eq(index).attr('href'), function(){
+        placeholders.eq(index).html(this);
+      });
+    }
+
+    // Load the image and execute a callback function.
+    // Returns a jQuery object
+
+    function loadImage(src, callback){
+      var img = $('<img>').on('load', function(){
+        callback.call(img);
+      });
+
+      img.attr('src',src);
+    }
+
+    function showNext(){
+
+      // If this is not the last image
+      if(index+1 < items.length){
+        index++;
+        offsetSlider(index);
+        preload(index+1);
+      }
+      else{
+        // Trigger the spring animation
+
+        slider.addClass('rightSpring');
+        setTimeout(function(){
+          slider.removeClass('rightSpring');
+        },500);
+      }
+    }
+
+    function showPrevious(){
+
+      // If this is not the first image
+      if(index>0){
+        index--;
+        offsetSlider(index);
+        preload(index-1);
+      }
+      else{
+        // Trigger the spring animation
+
+        slider.addClass('leftSpring');
+        setTimeout(function(){
+          slider.removeClass('leftSpring');
+        },500);
+      }
+    }
+  };
+
+})(jQuery);

data/vendor/assets/stylesheets/touch_touch.css

@@ -0,0 +1,185 @@
+/*----------------------------
+  Thumbnails
+-----------------------------*/
+
+#thumbs{
+  width:480px;
+  margin:60px auto 35px;
+  text-align:center;
+}
+
+#thumbs a{
+  width:120px;
+  height:120px;
+  display:inline-block;
+  border:7px solid #303030;
+  box-shadow:0 1px 3px rgba(0,0,0,0.5);
+  border-radius:4px;
+  margin: 6px 6px 40px;
+  position:relative;
+  text-decoration:none;
+
+  background-position:center center;
+  background-repeat: no-repeat;
+
+  background-size:cover;
+  -moz-background-size:cover;
+  -webkit-background-size:cover;
+}
+
+#thumbs a:after{
+  background-color: #303030;
+    border-radius: 7px;
+    bottom: -136px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+    color: #FFFFFF;
+    content: attr(title);
+    display: inline-block;
+    font-size: 10px;
+    max-width: 90px;
+    overflow: hidden;
+    padding: 2px 10px;
+    position: relative;
+    text-align: center;
+    white-space: nowrap;
+}
+
+/* The gallery overlay */
+
+#galleryOverlay{
+  width:100%;
+  height:100%;
+  position:fixed;
+  top:0;
+  left:0;
+  opacity:0;
+  z-index:100000;
+  background-color:#222;
+  background-color:rgba(0,0,0,0.8);
+  overflow:hidden;
+  display:none;
+
+  -moz-transition:opacity 1s ease;
+  -webkit-transition:opacity 1s ease;
+  transition:opacity 1s ease;
+}
+
+/* This class will trigger the animation */
+
+#galleryOverlay.visible{
+  opacity:1;
+}
+
+#gallerySlider{
+  height:100%;
+
+  left:0;
+  top:0;
+
+  width:100%;
+  white-space: nowrap;
+  position:absolute;
+
+  -moz-transition:left 0.4s ease;
+  -webkit-transition:left 0.4s ease;
+  transition:left 0.4s ease;
+}
+
+#gallerySlider .placeholder{
+  background: url(/assets/gallery/touch_touch/preloader.gif) no-repeat center center;
+  height: 100%;
+  line-height: 1px;
+  text-align: center;
+  width:100%;
+  display:inline-block;
+}
+
+/* The before element moves the
+ * image halfway from the top */
+
+#gallerySlider .placeholder:before{
+  content: "";
+  display: inline-block;
+  height: 50%;
+  width: 1px;
+  margin-right:-1px;
+}
+
+#gallerySlider .placeholder img{
+  display: inline-block;
+  max-height: 100%;
+  max-width: 100%;
+  vertical-align: middle;
+}
+
+#gallerySlider.rightSpring{
+  -moz-animation: rightSpring 0.3s;
+  -webkit-animation: rightSpring 0.3s;
+}
+
+#gallerySlider.leftSpring{
+  -moz-animation: leftSpring 0.3s;
+  -webkit-animation: leftSpring 0.3s;
+}
+
+/* Firefox Keyframe Animations */
+
+@-moz-keyframes rightSpring{
+  0%{   margin-left:0px;}
+  50%{  margin-left:-30px;}
+  100%{ margin-left:0px;}
+}
+
+@-moz-keyframes leftSpring{
+  0%{   margin-left:0px;}
+  50%{  margin-left:30px;}
+  100%{ margin-left:0px;}
+}
+
+/* Safari and Chrome Keyframe Animations */
+
+@-webkit-keyframes rightSpring{
+  0%{   margin-left:0px;}
+  50%{  margin-left:-30px;}
+  100%{ margin-left:0px;}
+}
+
+@-webkit-keyframes leftSpring{
+  0%{   margin-left:0px;}
+  50%{  margin-left:30px;}
+  100%{ margin-left:0px;}
+}
+
+/* Arrows */
+
+#prevArrow,#nextArrow{
+  border:none;
+  text-decoration:none;
+  background:url(/assets/gallery/touch_touch/arrows.png) no-repeat;
+  opacity:0.5;
+  cursor:pointer;
+  position:absolute;
+  width:43px;
+  height:58px;
+
+  top:50%;
+  margin-top:-29px;
+
+  -moz-transition:opacity 0.2s ease;
+  -webkit-transition:opacity 0.2s ease;
+  transition:opacity 0.2s ease;
+}
+
+#prevArrow:hover, #nextArrow:hover{
+  opacity:1;
+}
+
+#prevArrow{
+  background-position:left top;
+  left:40px;
+}
+
+#nextArrow{
+  background-position:right top;
+  right:40px;
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails-gallery
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.2.1
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-08-22 00:00:00.000000000 Z
+date: 2012-08-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rspec
@@ -253,12 +253,15 @@ files:
 - vendor/assets/images/gallery/slideshow/icons/prev.png
 - vendor/assets/images/gallery/slideshow/icons/prev_thumb.png
 - vendor/assets/images/gallery/slideshow/icons/up.png
+- vendor/assets/images/gallery/touch_touch/arrows.png
+- vendor/assets/images/gallery/touch_touch/preloader.gif
 - vendor/assets/javascripts/gallery/galleria-1.2.8.js
 - vendor/assets/javascripts/gallery/galleria-1.2.8.min.js
 - vendor/assets/javascripts/gallery/galleria/classic.js
 - vendor/assets/javascripts/gallery/galleria/classic.min.js
 - vendor/assets/javascripts/gallery/responsive.js
 - vendor/assets/javascripts/gallery/slideshow.js
+- vendor/assets/javascripts/gallery/touch_touch.js
 - vendor/assets/javascripts/jquery/jquery.easing-1.3.js
 - vendor/assets/javascripts/jquery/jquery.elastislide.js
 - vendor/assets/javascripts/jquery/jquery.tmpl.min.js
@@ -266,6 +269,7 @@ files:
 - vendor/assets/stylesheets/gallery/responsive.css
 - vendor/assets/stylesheets/gallery/responsive/elastislide.css
 - vendor/assets/stylesheets/gallery/slideshow.css
+- vendor/assets/stylesheets/touch_touch.css
 homepage: http://github.com/kristianmandrup/rails-gallery
 licenses:
 - MIT
@@ -281,7 +285,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: 1056637450518557715
+      hash: -1925983774391637922
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements: