1 | // FlickSlide v1.0.2 |
---|
2 | // Copyright (c) 2011 Kosuke Araki - twitterF@kaleido_kosuke |
---|
3 | // Modified by Kentaro Ohkouchi <ohkouchi@loop-az.jp> |
---|
4 | // Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php |
---|
5 | (function($){ |
---|
6 | $.fn.flickSlide=function(settings){ |
---|
7 | var currentX; |
---|
8 | var maxX; |
---|
9 | var strUA=navigator.userAgent.toLowerCase(), |
---|
10 | webkitUA=['iphone','android','ipad'], |
---|
11 | runiLayout=false, |
---|
12 | iLayoutLocation='', |
---|
13 | currentX=0, |
---|
14 | maxX=0, |
---|
15 | slideObj={}, |
---|
16 | slideLock=1, |
---|
17 | slideTimer={}, |
---|
18 | slideLotation={}, |
---|
19 | slideDuration=4000, |
---|
20 | slideCount=0, |
---|
21 | pagerMax=0, |
---|
22 | orientationChangeDelay=0; |
---|
23 | for(var i=0;i<webkitUA.length;i++){ |
---|
24 | if(strUA.indexOf(webkitUA[i],0)!=-1){ |
---|
25 | runiLayout=true; |
---|
26 | if(webkitUA[i]==='android'){ |
---|
27 | orientationChangeDelay=400; |
---|
28 | } |
---|
29 | if(webkitUA[i]==='iphone'){ |
---|
30 | orientationChangeDelay=0; |
---|
31 | } |
---|
32 | } |
---|
33 | } |
---|
34 | //if(runiLayout!==true){return;} |
---|
35 | //if(typeof $(this)===undefined||$(this).length===0){return;} |
---|
36 | window.addEventListener("orientationchange", |
---|
37 | function(){ |
---|
38 | if(runiLayout!==true){ |
---|
39 | return; |
---|
40 | } |
---|
41 | switch(window.orientation){ |
---|
42 | case 0: |
---|
43 | orientationChangeCore(); |
---|
44 | break; |
---|
45 | |
---|
46 | case 90: |
---|
47 | orientationChangeCore(); |
---|
48 | break; |
---|
49 | |
---|
50 | case -90: |
---|
51 | orientationChangeCore(); |
---|
52 | break; |
---|
53 | } |
---|
54 | },false); |
---|
55 | |
---|
56 | function orientationChangeCore(){ |
---|
57 | clearTimeout(slideTimer); |
---|
58 | setTimeout(function(){ |
---|
59 | var styles=getComputedStyle($('.moveWrap').get(0)); |
---|
60 | if(styles){ |
---|
61 | $('.resizable').css('width',styles.width); |
---|
62 | $('.slideMask').css('height',$('.move').outerHeight()) |
---|
63 | .css('width',styles.width-1); |
---|
64 | if($('#whobought_area').size()>0){ |
---|
65 | maxX = Number( |
---|
66 | $(settings.parentArea + ' .flickSlideContainer li.slideUnit').length-1) * Number( |
---|
67 | getComputedStyle( |
---|
68 | $(settings.parentArea + ' .flickSlideContainer li.slideUnit').get(0)) |
---|
69 | .width.replace('px',''))*-1; |
---|
70 | |
---|
71 | $('div.flickSlideContainer ul.move').get(0).style.webkitTransform = 'translate3d(0,0,0)'; |
---|
72 | } |
---|
73 | currentX=0; |
---|
74 | slideCount=0; |
---|
75 | slidePager(); |
---|
76 | slideTimer=setTimeout(lotation,slideDuration); |
---|
77 | }else{ |
---|
78 | } |
---|
79 | },orientationChangeDelay); |
---|
80 | } |
---|
81 | function lotation(){ |
---|
82 | //if(slideLock===0){var slideUnitWidth=slideObj.children('li.slideUnit').outerWidth();slideObj.get(0).style.webkitTransition='-webkit-transform 0.6s ease-out';diffX=-151;if(currentX===maxX){slideObj.get(0).style.webkitTransform='translate3d(0, 0, 0)';currentX=0;slideCount=0;slidePager();}else{currentX=currentX-slideUnitWidth;slideObj.get(0).style.webkitTransform='translate3d('+currentX+'px, 0, 0)';slideCount++;slidePager();}} |
---|
83 | //slideLock=0;slideTimer=setTimeout(lotation,slideDuration); |
---|
84 | } |
---|
85 | function slidePager(){ |
---|
86 | var currentPager=$('.slidePagerPointer.active'); |
---|
87 | var nextID='#pager'+String(slideCount); |
---|
88 | currentPager.removeClass('active'); |
---|
89 | $(nextID).addClass('active'); |
---|
90 | switch(slideCount){ |
---|
91 | case 0: |
---|
92 | $('.flickSlideBottom .bottomLeft').addClass('off'); |
---|
93 | $('.flickSlideBottom .bottomRight').removeClass('off'); |
---|
94 | break; |
---|
95 | |
---|
96 | case pagerMax: |
---|
97 | $('.flickSlideBottom .bottomRight').addClass('off'); |
---|
98 | $('.flickSlideBottom .bottomLeft').removeClass('off'); |
---|
99 | break; |
---|
100 | |
---|
101 | default: |
---|
102 | $('.flickSlideBottom .bottomLeft').removeClass('off'); |
---|
103 | $('.flickSlideBottom .bottomRight').removeClass('off'); |
---|
104 | break; |
---|
105 | } |
---|
106 | } |
---|
107 | |
---|
108 | $.fn.slideButton=function(settings){ |
---|
109 | var settings = $.extend({ |
---|
110 | direction:'prev', |
---|
111 | widthSource:{} |
---|
112 | },settings); |
---|
113 | var self=$(this); |
---|
114 | self.click(function(){ |
---|
115 | var slideUnitWidth=settings.widthSource.outerWidth(); |
---|
116 | slideLock=1; |
---|
117 | clearTimeout(slideTimer); |
---|
118 | slideObj.get(0).style.webkitTransition='-webkit-transform 0.6s ease-out'; |
---|
119 | if(settings.direction==='prev'){ |
---|
120 | if(currentX==0){ |
---|
121 | slideObj.get(0).style.webkitTransform='translate3d(0, 0, 0)'; |
---|
122 | slideTimer=setTimeout(lotation,slideDuration); |
---|
123 | slideLock=0; |
---|
124 | }else{ |
---|
125 | currentX = currentX+slideUnitWidth; |
---|
126 | slideObj.get(0).style.webkitTransform = 'translate3d('+currentX+'px, 0, 0)'; |
---|
127 | slideCount--; |
---|
128 | slidePager(); |
---|
129 | slideTimer=setTimeout(lotation,slideDuration); |
---|
130 | slideLock=0; |
---|
131 | } |
---|
132 | }else if(settings.direction==='next'){ |
---|
133 | if(currentX===maxX){ |
---|
134 | slideObj.get(0).style.webkitTransform='translate3d('+maxX+'px, 0, 0)'; |
---|
135 | slideTimer=setTimeout(lotation,slideDuration); |
---|
136 | slideLock=0; |
---|
137 | }else{ |
---|
138 | currentX=currentX-slideUnitWidth; |
---|
139 | slideObj.get(0).style.webkitTransform='translate3d('+currentX+'px, 0, 0)'; |
---|
140 | slideCount++; |
---|
141 | slidePager(); |
---|
142 | slideTimer=setTimeout(lotation,slideDuration); |
---|
143 | slideLock=0; |
---|
144 | } |
---|
145 | } |
---|
146 | }); |
---|
147 | }; |
---|
148 | |
---|
149 | $.fn.touchDrag=function(settings){ |
---|
150 | var settings=$.extend({ |
---|
151 | slideDuration:4000, |
---|
152 | targetWidth:150 |
---|
153 | },settings); |
---|
154 | var diffX=0; |
---|
155 | slideObj=$(this); |
---|
156 | slideDuration=settings.slideDuration; |
---|
157 | slideObj.bind('touchstart',{type:'start'},touchHandler); |
---|
158 | slideObj.bind('touchmove',{type:'move'},touchHandler); |
---|
159 | slideObj.bind('touchend',{type:'end'},touchHandler); |
---|
160 | function touchHandler(e){ |
---|
161 | var slideUnitWidth=slideObj.children('li.slideUnit').outerWidth(); |
---|
162 | var touch=e.originalEvent.touches[0]; |
---|
163 | if(e.type=="touchstart"){ |
---|
164 | clearTimeout(slideTimer); |
---|
165 | diffX=0; |
---|
166 | startX=touch.pageX; |
---|
167 | startY=touch.pageY; |
---|
168 | startTime=(new Date()).getTime(); |
---|
169 | }else if(e.type=="touchmove"){ |
---|
170 | diffX=touch.pageX-startX; |
---|
171 | diffY=touch.pageY-startY; |
---|
172 | if(Math.abs(diffX)-Math.abs(diffY)>0){ |
---|
173 | e.preventDefault(); |
---|
174 | moveX=Number(currentX+diffX); |
---|
175 | slideObj.css('-webkit-transition','none'); |
---|
176 | slideObj.get(0).style.webkitTransform='translate3d( '+moveX+'px, 0, 0)'; |
---|
177 | } |
---|
178 | }else if(e.type=="touchend"){ |
---|
179 | var endTime=(new Date()).getTime(); |
---|
180 | var diffTime=endTime-startTime; |
---|
181 | if(diffTime<300){ |
---|
182 | slideObj.get(0).style.webkitTransition='-webkit-transform 0.5s ease-out'; |
---|
183 | }else{ |
---|
184 | slideObj.get(0).style.webkitTransition='-webkit-transform 0.6s ease-out'; |
---|
185 | } |
---|
186 | if(diffX>settings.targetWidth||(diffX>60&&diffTime<400&&orientationChangeDelay===0)){ |
---|
187 | if(currentX==0){ |
---|
188 | slideObj.get(0).style.webkitTransform='translate3d(0, 0, 0)'; |
---|
189 | }else{ |
---|
190 | currentX=currentX+slideUnitWidth; |
---|
191 | slideObj.get(0).style.webkitTransform='translate3d('+currentX+'px, 0, 0)'; |
---|
192 | slideCount--; |
---|
193 | slidePager(); |
---|
194 | } |
---|
195 | }else if(diffX<(settings.targetWidth*-1)||(diffX<-60&&diffTime<400&&orientationChangeDelay===0)){ |
---|
196 | if(currentX===maxX){ |
---|
197 | slideObj.get(0).style.webkitTransform='translate3d('+maxX+'px, 0, 0)'; |
---|
198 | }else{ |
---|
199 | currentX=currentX-slideUnitWidth; |
---|
200 | slideObj.get(0).style.webkitTransform='translate3d('+currentX+'px, 0, 0)'; |
---|
201 | slideCount++;slidePager(); |
---|
202 | } |
---|
203 | }else{ |
---|
204 | if(currentX===0){ |
---|
205 | slideObj.get(0).style.webkitTransform='translate3d(0, 0, 0)'; |
---|
206 | }else if(currentX===maxX){ |
---|
207 | slideObj.get(0).style.webkitTransform='translate3d('+maxX+'px, 0, 0)'; |
---|
208 | }else{ |
---|
209 | slideObj.get(0).style.webkitTransform='translate3d('+currentX+'px, 0, 0)'; |
---|
210 | } |
---|
211 | } |
---|
212 | slideTimer=setTimeout(lotation,slideDuration);slideLock=0;}} |
---|
213 | slideTimer=setTimeout(lotation,slideDuration); |
---|
214 | }; |
---|
215 | |
---|
216 | var settings=$.extend({ |
---|
217 | target:'', |
---|
218 | colum:1, |
---|
219 | height:170, |
---|
220 | duration:4000, |
---|
221 | parentArea:'' |
---|
222 | },settings); |
---|
223 | var contents=$(this); |
---|
224 | var targetWidth=contents.outerWidth(); |
---|
225 | var contentsLength=contents.length; |
---|
226 | var wrap=$('<div class="flickSlideContainer"><div class="moveWrap"><ul class="move"></ul></div></div>'); |
---|
227 | var slideMask=$('<div class="slideMask resizable"></div>'); |
---|
228 | var bottom=$('<div class="flickSlideBottom"><div class="bottomLeft off"><</div><ul class="slidePager"></ul><div class="bottomRight">></div></div>');var bottom2=$('<div class="flickSlideBottom"><div class="bottomLeft off"></div><ul class="slidePager"></ul><div class="bottomRight"></div></div>'); |
---|
229 | |
---|
230 | var img = $(this).contents().find('img'); |
---|
231 | |
---|
232 | /* |
---|
233 | img.removeAttr('width') |
---|
234 | .removeAttr('height') |
---|
235 | .css({ |
---|
236 | width:'100%', |
---|
237 | height:'auto' |
---|
238 | }); |
---|
239 | */ |
---|
240 | var loop=Math.floor(contentsLength/settings.colum); |
---|
241 | loop=contentsLength%settings.colum>0?loop++:loop; |
---|
242 | pagerMax=loop-1; |
---|
243 | |
---|
244 | var contentsCount=0; |
---|
245 | for(var i=0;i<loop;i++){ |
---|
246 | var unitElem=$('<li/>') |
---|
247 | .addClass('slideUnit'). |
---|
248 | addClass('resizable'); |
---|
249 | |
---|
250 | var pager=$('<li id="pager'+i+'" class="slidePagerPointer"></li>'); |
---|
251 | if(i===0){ |
---|
252 | pager.addClass('active'); |
---|
253 | } |
---|
254 | for(var j=0;j<settings.colum;j++){ |
---|
255 | var itemElem=$('<div/>'); |
---|
256 | if(typeof contents[contentsCount]!==undefined){ |
---|
257 | itemElem.append($(contents[contentsCount]).children()); |
---|
258 | } |
---|
259 | unitElem.append(itemElem); |
---|
260 | contentsCount++; |
---|
261 | } |
---|
262 | // 画像の高さに合わせて padding-top を入れるよう変更 |
---|
263 | var imgHeight = unitElem.children().find('img').attr('height'); |
---|
264 | if (imgHeight < 1) { |
---|
265 | imgHeight = settings.height; |
---|
266 | } |
---|
267 | var paddingSize = (settings.height / 2) - (imgHeight / 2); |
---|
268 | unitElem.css('padding-top', paddingSize + 'px'); |
---|
269 | wrap.contents().find('ul.move').append(unitElem); |
---|
270 | bottom.children('ul.slidePager').append(pager); |
---|
271 | } |
---|
272 | //スライド最大幅を表示エリアの横幅×liの数→liの横幅×liの数に変更 |
---|
273 | $(settings.target).after(wrap); |
---|
274 | $(settings.target).remove(); |
---|
275 | bottom.children('.bottomLeft').slideButton({ |
---|
276 | direction:'prev', |
---|
277 | widthSource:wrap.contents().find('li.slideUnit') |
---|
278 | }); |
---|
279 | bottom.children('.bottomRight').slideButton({ |
---|
280 | direction:'next', |
---|
281 | widthSource:wrap.contents().find('li.slideUnit') |
---|
282 | }); |
---|
283 | wrap.contents().find('ul.move').touchDrag({ |
---|
284 | duration:settings.duration, |
---|
285 | targetWidth:(targetWidth*0.4) |
---|
286 | }); |
---|
287 | if(contentsLength > 1) { |
---|
288 | wrap.after(bottom); |
---|
289 | } else { |
---|
290 | wrap.after(bottom2); |
---|
291 | }; |
---|
292 | $(window).bind('load',function(){ |
---|
293 | var styles=getComputedStyle($('.moveWrap').get(0)); |
---|
294 | if(styles){ |
---|
295 | $('.resizable').css('width',styles.width); |
---|
296 | $('.slideMask').css('height',$('.move').outerHeight()) |
---|
297 | .css('width',styles.width-1); |
---|
298 | |
---|
299 | if ($(settings.parentArea + ' .flickSlideContainer li.slideUnit').get(0)){ |
---|
300 | maxX=Number($(settings.parentArea + ' .flickSlideContainer li.slideUnit').length-1)*Number(getComputedStyle($(settings.parentArea + ' .flickSlideContainer li.slideUnit').get(0)).width.replace('px',''))*-1; |
---|
301 | } |
---|
302 | } |
---|
303 | var slideFirstChild=$('ul.move li:first').clone(); |
---|
304 | $('ul.move').show(); |
---|
305 | }); |
---|
306 | }; |
---|
307 | })(jQuery); |
---|
308 | var is={ |
---|
309 | ie:navigator.appName=='Microsoft Internet Explorer', |
---|
310 | java:navigator.javaEnabled(), |
---|
311 | ns:navigator.appName=='Netscape', |
---|
312 | ua:navigator.userAgent.toLowerCase(), |
---|
313 | version:parseFloat(navigator.appVersion.substr(21))|| parseFloat(navigator.appVersion),win:navigator.platform=='Win32' |
---|
314 | }; |
---|
315 | is.mac=is.ua.indexOf('mac')>=0; |
---|
316 | if(is.ua.indexOf('opera')>=0){ |
---|
317 | is.ie=is.ns=false;is.opera=true; |
---|
318 | } |
---|
319 | if(is.ua.indexOf('gecko')>=0){ |
---|
320 | is.ie=is.ns=false;is.gecko=true; |
---|
321 | } |
---|