spree_multi_slideshow 1.2.0 → 1.2.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (5) hide show
  1. data/README.md +1 -1
  2. data/app/assets/javascripts/store/fadeGallery.js +229 -0
  3. data/app/assets/javascripts/store/spree_multi_slideshow.js +1 -229
  4. data/app/helpers/spree/slideshow_types_helper.rb +0 -6
  5. metadata +2 -1
data/README.md CHANGED
@@ -9,7 +9,7 @@ Basic Installation
9
9
 
10
10
  1. Add the following to your Gemfile
11
11
  <pre>
12
- gem 'spree_multi_slideshow', '~> 1.2.0'
12
+ gem 'spree_multi_slideshow', '~> 1.2.1'
13
13
  </pre>
14
14
  2. Run `bundle install`
15
15
  3. To copy and apply migrations run:
data/app/assets/javascripts/store/fadeGallery.js ADDED
@@ -0,0 +1,229 @@
1
+ // page init
2
+ jQuery(function($) {
3
+ initGalleries();
4
+ });
5
+
6
+ // galleries init
7
+ function initGalleries(){
8
+ // main banner slideshow
9
+ jQuery('div.gallery').fadeGallery({
10
+ autoRotation: true,
11
+ switchTime: 5000, //ms
12
+ duration: 800 //ms
13
+ });
14
+ };
15
+
16
+ // slideshow plugin
17
+ jQuery.fn.fadeGallery = function(_options){
18
+ var _options = jQuery.extend({
19
+ slideElements:'div.gallery-inner > ul > li',
20
+ pagerGener: false,
21
+ pagerHold: false,
22
+ pagerLinks:'ul.nav-list li',
23
+ btnNext:'a.gallery-control.right',
24
+ btnPrev:'a.gallery-control.left',
25
+ btnPlayPause:'a.play-pause',
26
+ btnPlay:'a.play',
27
+ btnPause:'a.pause',
28
+ pausedClass:'paused',
29
+ disabledClass: 'disabled',
30
+ playClass:'playing',
31
+ activeClass:'active',
32
+ currentNum:false,
33
+ allNum:false,
34
+ startSlide:null,
35
+ noCircle:false,
36
+ caption:'ul.caption > li',
37
+ pauseOnHover:false,
38
+ autoRotation:false,
39
+ autoHeight:false,
40
+ onChange:false,
41
+ switchTime:3000,
42
+ duration:650,
43
+ event:'click'
44
+ },_options);
45
+
46
+ return this.each(function(){
47
+ // gallery options
48
+ var _this = jQuery(this);
49
+ var _slides = jQuery(_options.slideElements, _this);
50
+ var _btnPrev = jQuery(_options.btnPrev, _this);
51
+ var _btnNext = jQuery(_options.btnNext, _this);
52
+ var _btnPlayPause = jQuery(_options.btnPlayPause, _this);
53
+ var _btnPause = jQuery(_options.btnPause, _this);
54
+ var _btnPlay = jQuery(_options.btnPlay, _this);
55
+ var _pauseOnHover = _options.pauseOnHover;
56
+ var _autoRotation = _options.autoRotation;
57
+ var _activeClass = _options.activeClass;
58
+ var _disabledClass = _options.disabledClass;
59
+ var _pausedClass = _options.pausedClass;
60
+ var _playClass = _options.playClass;
61
+ var _autoHeight = _options.autoHeight;
62
+ var _duration = _options.duration;
63
+ var _switchTime = _options.switchTime;
64
+ var _controlEvent = _options.event;
65
+ var _currentNum = (_options.currentNum ? jQuery(_options.currentNum, _this) : false);
66
+ var _allNum = (_options.allNum ? jQuery(_options.allNum, _this) : false);
67
+ var _startSlide = _options.startSlide;
68
+ var _noCycle = _options.noCircle;
69
+ var _onChange = _options.onChange;
70
+ var _pagerGener = _options.pagerGener;
71
+ var _pagerHold = jQuery(_options.pagerHold,_this);
72
+ var _caption = jQuery(_options.caption,_this);
73
+ var _paging = '';
74
+ if(_pagerGener){
75
+ for(var i=0; i< _slides.length; i++){
76
+ _paging += '<li><a href="#">'+(i+1)+'</a></li>';
77
+ }
78
+ _pagerHold.html('<ul>'+_paging+'</ul>');
79
+ }
80
+ var _pagerLinks = jQuery(_options.pagerLinks, _this);
81
+ // gallery init
82
+ var _hover = false;
83
+ var _prevIndex = 0;
84
+ var _currentIndex = 0;
85
+ var _slideCount = _slides.length;
86
+ var _timer;
87
+ if(_slideCount < 2) return;
88
+
89
+ _prevIndex = _slides.index(_slides.filter('.'+_activeClass));
90
+ if(_prevIndex < 0) _prevIndex = _currentIndex = 0;
91
+ else _currentIndex = _prevIndex;
92
+ if(_startSlide != null) {
93
+ if(_startSlide == 'random') _prevIndex = _currentIndex = Math.floor(Math.random()*_slideCount);
94
+ else _prevIndex = _currentIndex = parseInt(_startSlide);
95
+ }
96
+ _slides.hide().eq(_currentIndex).show();
97
+ _caption.hide().eq(_currentIndex).show();
98
+ if(_autoRotation) _this.removeClass(_pausedClass).addClass(_playClass);
99
+ else _this.removeClass(_playClass).addClass(_pausedClass);
100
+
101
+ // gallery control
102
+ if(_btnPrev.length) {
103
+ _btnPrev.bind(_controlEvent,function(){
104
+ prevSlide();
105
+ return false;
106
+ });
107
+ }
108
+ if(_btnNext.length) {
109
+ _btnNext.bind(_controlEvent,function(){
110
+ nextSlide();
111
+ return false;
112
+ });
113
+ }
114
+ if(_pagerLinks.length) {
115
+ _pagerLinks.each(function(_ind){
116
+ jQuery(this).bind(_controlEvent,function(){
117
+ if(_currentIndex != _ind) {
118
+ _prevIndex = _currentIndex;
119
+ _currentIndex = _ind;
120
+ switchSlide();
121
+ }
122
+ return false;
123
+ });
124
+ });
125
+ }
126
+
127
+ // play pause section
128
+ if(_btnPlayPause.length) {
129
+ _btnPlayPause.bind(_controlEvent,function(){
130
+ if(_this.hasClass(_pausedClass)) {
131
+ _this.removeClass(_pausedClass).addClass(_playClass);
132
+ _autoRotation = true;
133
+ autoSlide();
134
+ } else {
135
+ _autoRotation = false;
136
+ if(_timer) clearTimeout(_timer);
137
+ _this.removeClass(_playClass).addClass(_pausedClass);
138
+ }
139
+ return false;
140
+ });
141
+ }
142
+ if(_btnPlay.length) {
143
+ _btnPlay.bind(_controlEvent,function(){
144
+ _this.removeClass(_pausedClass).addClass(_playClass);
145
+ _autoRotation = true;
146
+ autoSlide();
147
+ return false;
148
+ });
149
+ }
150
+ if(_btnPause.length) {
151
+ _btnPause.bind(_controlEvent,function(){
152
+ _autoRotation = false;
153
+ if(_timer) clearTimeout(_timer);
154
+ _this.removeClass(_playClass).addClass(_pausedClass);
155
+ return false;
156
+ });
157
+ }
158
+ // gallery animation
159
+ function prevSlide() {
160
+ _prevIndex = _currentIndex;
161
+ if(_currentIndex > 0) _currentIndex--;
162
+ else {
163
+ if(_noCycle) return;
164
+ else _currentIndex = _slideCount-1;
165
+ }
166
+ switchSlide();
167
+ }
168
+ function nextSlide() {
169
+ _prevIndex = _currentIndex;
170
+ if(_currentIndex < _slideCount-1) _currentIndex++;
171
+ else {
172
+ if(_noCycle) return;
173
+ else _currentIndex = 0;
174
+ }
175
+ switchSlide();
176
+ }
177
+ function refreshStatus() {
178
+ if(_pagerLinks.length) _pagerLinks.removeClass(_activeClass).eq(_currentIndex).addClass(_activeClass);
179
+ if(_currentNum) _currentNum.text(_currentIndex+1);
180
+ if(_allNum) _allNum.text(_slideCount);
181
+ _slides.eq(_prevIndex).removeClass(_activeClass);
182
+ _slides.eq(_currentIndex).addClass(_activeClass);
183
+ if(_noCycle) {
184
+ if(_btnPrev.length) {
185
+ if(_currentIndex == 0) _btnPrev.addClass(_disabledClass);
186
+ else _btnPrev.removeClass(_disabledClass);
187
+ }
188
+ if(_btnNext.length) {
189
+ if(_currentIndex == _slideCount-1) _btnNext.addClass(_disabledClass);
190
+ else _btnNext.removeClass(_disabledClass);
191
+ }
192
+ }
193
+ if(typeof _onChange === 'function') {
194
+ _onChange(_this, _currentIndex);
195
+ }
196
+ }
197
+ function switchSlide() {
198
+ _slides.eq(_prevIndex).stop().animate({opacity:0},{duration: _duration, queue: false,complete:function(){
199
+ jQuery(this).css({display:'none'});
200
+ }})
201
+ _slides.eq(_currentIndex).stop().css({display:'block',opacity:0}).animate({opacity:1},{duration: _duration, queue: false,complete:function(){
202
+ jQuery(this).css({opacity:''});
203
+ }})
204
+ _caption.eq(_prevIndex).fadeOut();
205
+ _caption.eq(_currentIndex).fadeIn();
206
+ if(_autoHeight) _slides.eq(_currentIndex).parent().animate({height:_slides.eq(_currentIndex).outerHeight(true)},{duration:_duration,queue:false});
207
+ refreshStatus();
208
+ autoSlide();
209
+ }
210
+
211
+ // autoslide function
212
+ function autoSlide() {
213
+ if(!_autoRotation || _hover) return;
214
+ if(_timer) clearTimeout(_timer);
215
+ _timer = setTimeout(nextSlide,_switchTime+_duration);
216
+ }
217
+ if(_pauseOnHover) {
218
+ _this.hover(function(){
219
+ _hover = true;
220
+ if(_timer) clearTimeout(_timer);
221
+ },function(){
222
+ _hover = false;
223
+ autoSlide();
224
+ });
225
+ }
226
+ refreshStatus();
227
+ autoSlide();
228
+ });
229
+ };
data/app/assets/javascripts/store/spree_multi_slideshow.js CHANGED
@@ -1,229 +1 @@
1
- // page init
2
- jQuery(function($) {
3
- initGalleries();
4
- });
5
-
6
- // galleries init
7
- function initGalleries(){
8
- // main banner slideshow
9
- jQuery('div.gallery').fadeGallery({
10
- autoRotation: true,
11
- switchTime: 5000, //ms
12
- duration: 800 //ms
13
- });
14
- };
15
-
16
- // slideshow plugin
17
- jQuery.fn.fadeGallery = function(_options){
18
- var _options = jQuery.extend({
19
- slideElements:'div.gallery-inner > ul > li',
20
- pagerGener: false,
21
- pagerHold: false,
22
- pagerLinks:'ul.nav-list li',
23
- btnNext:'a.gallery-control.right',
24
- btnPrev:'a.gallery-control.left',
25
- btnPlayPause:'a.play-pause',
26
- btnPlay:'a.play',
27
- btnPause:'a.pause',
28
- pausedClass:'paused',
29
- disabledClass: 'disabled',
30
- playClass:'playing',
31
- activeClass:'active',
32
- currentNum:false,
33
- allNum:false,
34
- startSlide:null,
35
- noCircle:false,
36
- caption:'ul.caption > li',
37
- pauseOnHover:false,
38
- autoRotation:false,
39
- autoHeight:false,
40
- onChange:false,
41
- switchTime:3000,
42
- duration:650,
43
- event:'click'
44
- },_options);
45
-
46
- return this.each(function(){
47
- // gallery options
48
- var _this = jQuery(this);
49
- var _slides = jQuery(_options.slideElements, _this);
50
- var _btnPrev = jQuery(_options.btnPrev, _this);
51
- var _btnNext = jQuery(_options.btnNext, _this);
52
- var _btnPlayPause = jQuery(_options.btnPlayPause, _this);
53
- var _btnPause = jQuery(_options.btnPause, _this);
54
- var _btnPlay = jQuery(_options.btnPlay, _this);
55
- var _pauseOnHover = _options.pauseOnHover;
56
- var _autoRotation = _options.autoRotation;
57
- var _activeClass = _options.activeClass;
58
- var _disabledClass = _options.disabledClass;
59
- var _pausedClass = _options.pausedClass;
60
- var _playClass = _options.playClass;
61
- var _autoHeight = _options.autoHeight;
62
- var _duration = _options.duration;
63
- var _switchTime = _options.switchTime;
64
- var _controlEvent = _options.event;
65
- var _currentNum = (_options.currentNum ? jQuery(_options.currentNum, _this) : false);
66
- var _allNum = (_options.allNum ? jQuery(_options.allNum, _this) : false);
67
- var _startSlide = _options.startSlide;
68
- var _noCycle = _options.noCircle;
69
- var _onChange = _options.onChange;
70
- var _pagerGener = _options.pagerGener;
71
- var _pagerHold = jQuery(_options.pagerHold,_this);
72
- var _caption = jQuery(_options.caption,_this);
73
- var _paging = '';
74
- if(_pagerGener){
75
- for(var i=0; i< _slides.length; i++){
76
- _paging += '<li><a href="#">'+(i+1)+'</a></li>';
77
- }
78
- _pagerHold.html('<ul>'+_paging+'</ul>');
79
- }
80
- var _pagerLinks = jQuery(_options.pagerLinks, _this);
81
- // gallery init
82
- var _hover = false;
83
- var _prevIndex = 0;
84
- var _currentIndex = 0;
85
- var _slideCount = _slides.length;
86
- var _timer;
87
- if(_slideCount < 2) return;
88
-
89
- _prevIndex = _slides.index(_slides.filter('.'+_activeClass));
90
- if(_prevIndex < 0) _prevIndex = _currentIndex = 0;
91
- else _currentIndex = _prevIndex;
92
- if(_startSlide != null) {
93
- if(_startSlide == 'random') _prevIndex = _currentIndex = Math.floor(Math.random()*_slideCount);
94
- else _prevIndex = _currentIndex = parseInt(_startSlide);
95
- }
96
- _slides.hide().eq(_currentIndex).show();
97
- _caption.hide().eq(_currentIndex).show();
98
- if(_autoRotation) _this.removeClass(_pausedClass).addClass(_playClass);
99
- else _this.removeClass(_playClass).addClass(_pausedClass);
100
-
101
- // gallery control
102
- if(_btnPrev.length) {
103
- _btnPrev.bind(_controlEvent,function(){
104
- prevSlide();
105
- return false;
106
- });
107
- }
108
- if(_btnNext.length) {
109
- _btnNext.bind(_controlEvent,function(){
110
- nextSlide();
111
- return false;
112
- });
113
- }
114
- if(_pagerLinks.length) {
115
- _pagerLinks.each(function(_ind){
116
- jQuery(this).bind(_controlEvent,function(){
117
- if(_currentIndex != _ind) {
118
- _prevIndex = _currentIndex;
119
- _currentIndex = _ind;
120
- switchSlide();
121
- }
122
- return false;
123
- });
124
- });
125
- }
126
-
127
- // play pause section
128
- if(_btnPlayPause.length) {
129
- _btnPlayPause.bind(_controlEvent,function(){
130
- if(_this.hasClass(_pausedClass)) {
131
- _this.removeClass(_pausedClass).addClass(_playClass);
132
- _autoRotation = true;
133
- autoSlide();
134
- } else {
135
- _autoRotation = false;
136
- if(_timer) clearTimeout(_timer);
137
- _this.removeClass(_playClass).addClass(_pausedClass);
138
- }
139
- return false;
140
- });
141
- }
142
- if(_btnPlay.length) {
143
- _btnPlay.bind(_controlEvent,function(){
144
- _this.removeClass(_pausedClass).addClass(_playClass);
145
- _autoRotation = true;
146
- autoSlide();
147
- return false;
148
- });
149
- }
150
- if(_btnPause.length) {
151
- _btnPause.bind(_controlEvent,function(){
152
- _autoRotation = false;
153
- if(_timer) clearTimeout(_timer);
154
- _this.removeClass(_playClass).addClass(_pausedClass);
155
- return false;
156
- });
157
- }
158
- // gallery animation
159
- function prevSlide() {
160
- _prevIndex = _currentIndex;
161
- if(_currentIndex > 0) _currentIndex--;
162
- else {
163
- if(_noCycle) return;
164
- else _currentIndex = _slideCount-1;
165
- }
166
- switchSlide();
167
- }
168
- function nextSlide() {
169
- _prevIndex = _currentIndex;
170
- if(_currentIndex < _slideCount-1) _currentIndex++;
171
- else {
172
- if(_noCycle) return;
173
- else _currentIndex = 0;
174
- }
175
- switchSlide();
176
- }
177
- function refreshStatus() {
178
- if(_pagerLinks.length) _pagerLinks.removeClass(_activeClass).eq(_currentIndex).addClass(_activeClass);
179
- if(_currentNum) _currentNum.text(_currentIndex+1);
180
- if(_allNum) _allNum.text(_slideCount);
181
- _slides.eq(_prevIndex).removeClass(_activeClass);
182
- _slides.eq(_currentIndex).addClass(_activeClass);
183
- if(_noCycle) {
184
- if(_btnPrev.length) {
185
- if(_currentIndex == 0) _btnPrev.addClass(_disabledClass);
186
- else _btnPrev.removeClass(_disabledClass);
187
- }
188
- if(_btnNext.length) {
189
- if(_currentIndex == _slideCount-1) _btnNext.addClass(_disabledClass);
190
- else _btnNext.removeClass(_disabledClass);
191
- }
192
- }
193
- if(typeof _onChange === 'function') {
194
- _onChange(_this, _currentIndex);
195
- }
196
- }
197
- function switchSlide() {
198
- _slides.eq(_prevIndex).stop().animate({opacity:0},{duration: _duration, queue: false,complete:function(){
199
- jQuery(this).css({display:'none'});
200
- }})
201
- _slides.eq(_currentIndex).stop().css({display:'block',opacity:0}).animate({opacity:1},{duration: _duration, queue: false,complete:function(){
202
- jQuery(this).css({opacity:''});
203
- }})
204
- _caption.eq(_prevIndex).fadeOut();
205
- _caption.eq(_currentIndex).fadeIn();
206
- if(_autoHeight) _slides.eq(_currentIndex).parent().animate({height:_slides.eq(_currentIndex).outerHeight(true)},{duration:_duration,queue:false});
207
- refreshStatus();
208
- autoSlide();
209
- }
210
-
211
- // autoslide function
212
- function autoSlide() {
213
- if(!_autoRotation || _hover) return;
214
- if(_timer) clearTimeout(_timer);
215
- _timer = setTimeout(nextSlide,_switchTime+_duration);
216
- }
217
- if(_pauseOnHover) {
218
- _this.hover(function(){
219
- _hover = true;
220
- if(_timer) clearTimeout(_timer);
221
- },function(){
222
- _hover = false;
223
- autoSlide();
224
- });
225
- }
226
- refreshStatus();
227
- autoSlide();
228
- });
229
- };
1
+ //= require store/fadeGallery
data/app/helpers/spree/slideshow_types_helper.rb CHANGED
@@ -3,12 +3,6 @@ module Spree
3
3
  module SlideshowTypesHelper
4
4
 
5
5
  def insert_slideshow(params={})
6
- @content_for_head_added ||= false
7
- if not @content_for_head_added
8
- content_for(:head) { stylesheet_link_tag 'store/spree_multi_slideshow.css' }
9
- content_for(:head) { javascript_include_tag 'store/spree_multi_slideshow.js' }
10
- @content_for_head_added = true
11
- end
12
6
  if slide_images(params)
13
7
  navigation = enable_navigation(params)
14
8
  content_tag(:div, navigation[:prev] + content_tag(:div, content_tag(:ul, raw(slide_images(params))), :class => "gallery-inner clearfix") + navigation[:succ], :class => "gallery #{params[:class]}", :style => "width: #{Spree::SlideshowType.enable(params[:category] || "home").first.slide_width}px; height: #{Spree::SlideshowType.enable(params[:category] || "home").first.slide_height}px;")
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: spree_multi_slideshow
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.2.0
4
+ version: 1.2.1
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -124,6 +124,7 @@ files:
124
124
  - app/assets/javascripts/admin/slides/index.js
125
125
  - app/assets/javascripts/admin/slides/new.js
126
126
  - app/assets/javascripts/admin/spree_multi_slideshow.js
127
+ - app/assets/javascripts/store/fadeGallery.js
127
128
  - app/assets/javascripts/store/spree_multi_slideshow.js
128
129
  - app/assets/stylesheets/admin/spree_multi_slideshow.css
129
130
  - app/assets/stylesheets/store/carousel_slideshow.css.scss