Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

added touch-touch gallery

  • Loading branch information...
commit 81791329fe66a37751b3e085eb94ee06046bb796 1 parent 9f6a44f
Kristian Mandrup authored
19 README.md
Source Rendered
@@ -11,6 +11,7 @@ Popular Javascript Photo galleries/carousels ready to use with Rails 3+.
11 11 * slideshow
12 12 * responsive
13 13 * galleria
  14 +* touch_touch
14 15
15 16 Please add more using a similar convention as is used for these galleries ;)
16 17
@@ -25,16 +26,18 @@ In `application.css` manifest file:
25 26 * require gallery/responsive/style
26 27 * require gallery/slideshow
27 28 * require gallery/galleria
  29 + * require gallery/touch_touch
28 30 */
29 31 ```
30 32
31   -Using Compass, f.ex in `application.css.scss.erb`
  33 +Using Compass, f.ex in `application.css.scss`
32 34
33 35 ```
34 36 @import 'gallery/responsive/elastislide';
35 37 @import 'gallery/responsive';
36 38 @import 'gallery/slideshow';
37 39 @import 'gallery/galleria';
  40 +@import 'gallery/touch_touch';
38 41 ```
39 42
40 43 In `application.js` manifest file:
@@ -43,12 +46,26 @@ In `application.js` manifest file:
43 46 //= require gallery/responsive
44 47 //= require gallery/slideshow
45 48 //= require gallery/galleria
  49 +//= require gallery/touch_touch
46 50
47 51 //= require jquery/jquery.easing-1.3
48 52 //= require jquery/jquery.elastislide
49 53 //= require jquery/jquery.tmpl.min
50 54 ```
51 55
  56 +## Touch-Touch
  57 +
  58 +```javascript
  59 +$(function(){
  60 +
  61 + // Initialize the gallery
  62 + $('#thumbs a').touchTouch();
  63 +
  64 +});
  65 +```
  66 +
  67 +See [TouchTouch](http://tutorialzine.com/2012/04/mobile-touch-gallery/) and [github repo](https://github.com/martinaglv/touchTouch)
  68 +
52 69 ## Minimalistic Slideshow gallery
53 70
54 71 See [minimalistic-slideshow-gallery](http://tympanus.net/codrops/2010/07/05/minimalistic-slideshow-gallery/) for more info.
2  VERSION
... ... @@ -1 +1 @@
1   -0.2.0
  1 +0.2.1
BIN  vendor/assets/images/gallery/touch_touch/arrows.png
BIN  vendor/assets/images/gallery/touch_touch/preloader.gif
235 vendor/assets/javascripts/gallery/touch_touch.js
... ... @@ -0,0 +1,235 @@
185 vendor/assets/stylesheets/touch_touch.css
... ... @@ -0,0 +1,185 @@
  1 +/*----------------------------
  2 + Thumbnails
  3 +-----------------------------*/
  4 +
  5 +#thumbs{
  6 + width:480px;
  7 + margin:60px auto 35px;
  8 + text-align:center;
  9 +}
  10 +
  11 +#thumbs a{
  12 + width:120px;
  13 + height:120px;
  14 + display:inline-block;
  15 + border:7px solid #303030;
  16 + box-shadow:0 1px 3px rgba(0,0,0,0.5);
  17 + border-radius:4px;
  18 + margin: 6px 6px 40px;
  19 + position:relative;
  20 + text-decoration:none;
  21 +
  22 + background-position:center center;
  23 + background-repeat: no-repeat;
  24 +
  25 + background-size:cover;
  26 + -moz-background-size:cover;
  27 + -webkit-background-size:cover;
  28 +}
  29 +
  30 +#thumbs a:after{
  31 + background-color: #303030;
  32 + border-radius: 7px;
  33 + bottom: -136px;
  34 + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  35 + color: #FFFFFF;
  36 + content: attr(title);
  37 + display: inline-block;
  38 + font-size: 10px;
  39 + max-width: 90px;
  40 + overflow: hidden;
  41 + padding: 2px 10px;
  42 + position: relative;
  43 + text-align: center;
  44 + white-space: nowrap;
  45 +}
  46 +
  47 +/* The gallery overlay */
  48 +
  49 +#galleryOverlay{
  50 + width:100%;
  51 + height:100%;
  52 + position:fixed;
  53 + top:0;
  54 + left:0;
  55 + opacity:0;
  56 + z-index:100000;
  57 + background-color:#222;
  58 + background-color:rgba(0,0,0,0.8);
  59 + overflow:hidden;
  60 + display:none;
  61 +
  62 + -moz-transition:opacity 1s ease;
  63 + -webkit-transition:opacity 1s ease;
  64 + transition:opacity 1s ease;
  65 +}
  66 +
  67 +/* This class will trigger the animation */
  68 +
  69 +#galleryOverlay.visible{
  70 + opacity:1;
  71 +}
  72 +
  73 +#gallerySlider{
  74 + height:100%;
  75 +
  76 + left:0;
  77 + top:0;
  78 +
  79 + width:100%;
  80 + white-space: nowrap;
  81 + position:absolute;
  82 +
  83 + -moz-transition:left 0.4s ease;
  84 + -webkit-transition:left 0.4s ease;
  85 + transition:left 0.4s ease;
  86 +}
  87 +
  88 +#gallerySlider .placeholder{
  89 + background: url(/assets/gallery/touch_touch/preloader.gif) no-repeat center center;
  90 + height: 100%;
  91 + line-height: 1px;
  92 + text-align: center;
  93 + width:100%;
  94 + display:inline-block;
  95 +}
  96 +
  97 +/* The before element moves the
  98 + * image halfway from the top */
  99 +
  100 +#gallerySlider .placeholder:before{
  101 + content: "";
  102 + display: inline-block;
  103 + height: 50%;
  104 + width: 1px;
  105 + margin-right:-1px;
  106 +}
  107 +
  108 +#gallerySlider .placeholder img{
  109 + display: inline-block;
  110 + max-height: 100%;
  111 + max-width: 100%;
  112 + vertical-align: middle;
  113 +}
  114 +
  115 +#gallerySlider.rightSpring{
  116 + -moz-animation: rightSpring 0.3s;
  117 + -webkit-animation: rightSpring 0.3s;
  118 +}
  119 +
  120 +#gallerySlider.leftSpring{
  121 + -moz-animation: leftSpring 0.3s;
  122 + -webkit-animation: leftSpring 0.3s;
  123 +}
  124 +
  125 +/* Firefox Keyframe Animations */
  126 +
  127 +@-moz-keyframes rightSpring{
  128 + 0%{ margin-left:0px;}
  129 + 50%{ margin-left:-30px;}
  130 + 100%{ margin-left:0px;}
  131 +}
  132 +
  133 +@-moz-keyframes leftSpring{
  134 + 0%{ margin-left:0px;}
  135 + 50%{ margin-left:30px;}
  136 + 100%{ margin-left:0px;}
  137 +}
  138 +
  139 +/* Safari and Chrome Keyframe Animations */
  140 +
  141 +@-webkit-keyframes rightSpring{
  142 + 0%{ margin-left:0px;}
  143 + 50%{ margin-left:-30px;}
  144 + 100%{ margin-left:0px;}
  145 +}
  146 +
  147 +@-webkit-keyframes leftSpring{
  148 + 0%{ margin-left:0px;}
  149 + 50%{ margin-left:30px;}
  150 + 100%{ margin-left:0px;}
  151 +}
  152 +
  153 +/* Arrows */
  154 +
  155 +#prevArrow,#nextArrow{
  156 + border:none;
  157 + text-decoration:none;
  158 + background:url(/assets/gallery/touch_touch/arrows.png) no-repeat;
  159 + opacity:0.5;
  160 + cursor:pointer;
  161 + position:absolute;
  162 + width:43px;
  163 + height:58px;
  164 +
  165 + top:50%;
  166 + margin-top:-29px;
  167 +
  168 + -moz-transition:opacity 0.2s ease;
  169 + -webkit-transition:opacity 0.2s ease;
  170 + transition:opacity 0.2s ease;
  171 +}
  172 +
  173 +#prevArrow:hover, #nextArrow:hover{
  174 + opacity:1;
  175 +}
  176 +
  177 +#prevArrow{
  178 + background-position:left top;
  179 + left:40px;
  180 +}
  181 +
  182 +#nextArrow{
  183 + background-position:right top;
  184 + right:40px;
  185 +}

0 comments on commit 8179132

Please sign in to comment.
Something went wrong with that request. Please try again.