https://yonimdo.github.io/jGallery/js/gallery.js

1/**
2 *  A basic jQuery plugin using the Module Pattern
3 * *
4 *  @author      Yoni Mood
5 *  @since       Version 1.0
6 *
7 */
8
9
10!function(exports, $, undefined)
11{
12
13"use strict";
14
15    var Gallery = function()
16    {
17
18        /*-------- PLUGIN VARS ------------------------------------------------------------*/
19
20
21    var priv = {},Gallery = {},
22            // Gallery defaults
23    defaults = {
24            id : '',
25            name : '',
26            url : '',
27            speed : 600,
28            render : function(value){ return "<div class='flip-container'><div class='flipper'><div class='front'>"+
29               value+"<div class='back'></div></div></div>";}
30    },
31    widths = [0,100,300,320,300,160,0],
32    active = false;
33        /*-------- PRIVATE METHODS --------------------------------------------------------*/
34
35        priv.options = {}; //private options
36
37        priv.getDegree = function(index){
38            return (index-2)*-35;
39        }
40        priv.getWidth = function(index){
41            return widths[index+1];
42        }
43
44        priv.rotate = function (direction, duration,callback) {
45
46                  if(duration <= 0){
47                        $(priv.options.id).trigger( "indexChanged", priv.index );
48                        callback();
49                        return;
50                  }
51                  if(direction=='right'){
52                         priv.rotateR(function(){
53                         priv.rotate(direction, duration-1,callback)
54                         });
55                  }
56                  if(direction=='left'){
57                         priv.rotateL(function(){
58                         priv.rotate(direction, duration-1,callback)
59                         });
60                  }
61
62        }
63
64
65        priv.rotateL = function (callback) {
66
67                  var html = "";
68                  if(priv.index<=0){
69                        callback();
70                        return;
71                  }
72
73                  if(priv.index>2){
74                        html = priv.options.list[priv.index-3].html
75                  }
76
77                  var last = $(priv.options.id+" .flip-container").last();
78                  last.css('padding', '0 -5px' ).css('width', 0 ).children().css('transform', 'rotateY(-90deg)');//.after(function(){});
79
80                  //Update data
81                  priv.nextViewL.find('.front').html(html);
82                  priv.index -=1
83
84                  $(priv.options.id).prepend(priv.nextViewL);
85                  //last.delay(2000).detach();
86                  priv.nextViewL = last;
87                  setTimeout(function(){
88                                    $.each($(priv.options.id+" .flip-container"), function( index, value) {
89                                                         $(value).css('width', priv.getWidth(index) );
90                                                         $(value).children().css('transform', 'rotateY('+priv.getDegree(index)+'deg)')
91                                                         });
92                                    },100);
93                  setTimeout(function(){
94                               priv.nextViewL.detach();
95                               priv.nextViewL.css('padding', '0 -5px' ).css('width', 0 ).children().css('transform', 'rotateY(90deg)');
96                               callback();
97                   },priv.options.speed);
98
99        }
100
101        priv.rotateR = function (callback) {
102
103                  var html = "";
104                  if(priv.index>=(priv.options.list.length-1)){
105                        callback();
106                        return;
107                  }
108                  if(priv.index<(priv.options.list.length-3)){
109                        html = priv.options.list[(priv.index+3)].html
110                  }
111
112                  var first = $(priv.options.id+" .flip-container").first();
113                  first.css('width', 0 ).children().css('transform', 'rotateY(90deg)');//.after(function(){});
114
115                  //Update data
116                  priv.nextViewR.find('.front').html(html);
117                  priv.index +=1
118
119                  $(priv.options.id).append(priv.nextViewR);
120                  //last.delay(2000).detach();
121                  var prev = priv.nextViewR;
122                  priv.nextViewR = first;
123                  setTimeout(function(){
124                               while(prev.length){
125                                      var index = prev.index();
126                                      prev.css('width', priv.getWidth(index-1) );
127                                      prev.children().css('transform', 'rotateY('+priv.getDegree(index-1)+'deg)')
128                                      prev = prev.prev();
129                  }
130                  },100);
131
132                  setTimeout(function(){
133                               priv.nextViewR.detach();
134                               priv.nextViewR.css('width', 0 ).children().css('transform', 'rotateY(-90deg)');
135                               callback();
136                  },priv.options.speed);
137
138        }
139
140        priv.rotateFast = function (direction, duration,callback) {
141                  if(duration > 0){
142                    var tmp = priv.options.speed;
143                    priv.options.speed = 100;
144                    $(priv.options.id+" .flip-container").addClass('fast').children().addClass('fast');
145                    priv.nextViewL.addClass('fast').children().addClass('fast');
146                    priv.nextViewR.addClass('fast').children().addClass('fast');
147                    priv.rotate(direction, duration,function(){
148                        $(priv.options.id+" .flip-container").removeClass('fast').children().removeClass('fast');
149                        priv.nextViewL.removeClass('fast').children().removeClass('fast');
150                        priv.nextViewR.removeClass('fast').children().removeClass('fast');
151                        priv.options.speed = tmp;
152                        callback();
153                    });
154                  }
155        }
156/*-------- PUBLIC METHODS ----------------------------------------------------------*/
157        Gallery.rotate = function (direction,callback) {
158                    priv.rotate(direction, 1,callback)
159        }
160
161        Gallery.JumpTo = function (index){
162            var direction = index < priv.index ? 'left' : 'right';
163            var duration = Math.abs(priv.index-index);
164            priv.rotateFast(direction,duration,function(){})
165        }
166
167        Gallery.init = function(options){
168               $.extend(priv.options, defaults, options);
169               priv.options.id =  "#" + priv.options.id;
170               priv.index = 2;
171               for(var i=0; i<5;i++){
172                    $(priv.options.id).append(priv.options.render(priv.options.list[i].html));
173               }
174               var items = $(priv.options.id+" .flip-container");
175               var s = (priv.options.speed/1000);
176               items.children().css('transition', s + 's');
177               items.css('transition', s + 's');
178               priv.nextViewL = items.first().clone();

179               priv.nextViewR = items.last().clone();
180
181
182               priv.nextViewL.css('width', 0 ).children().css('transform', 'rotateY(90deg)');
183               priv.nextViewR.css('width', 0 ).children().css('transform', 'rotateY(-90deg)');
184
185               $.each(items, function( index, value) {
186                    $(value).css('width', priv.getWidth(index) );
187                    $(value).children().css('transform', 'rotateY('+priv.getDegree(index)+'deg)')
188               });
189
190               $(priv.options.id).on('click', '.flip-container', function(){
191                    if($(this).index()== 2|| active == true ){
192                    return;
193                    }
194                    active = true;
195                    if($(this).index() > 2){
196                    Gallery.rotate('right',function(){active = false});
197                    }
198                    if($(this).index() < 2){
199                    Gallery.rotate('left',function(){active = false});
200                    }
201
202                });
203               return Gallery;
204        }
205
206        // Return the Public API (Gallery) we want
207        // to expose
208
209        return Gallery;
210    }
211
212    exports.Gallery = Gallery;
213
214}(this, jQuery);
215