https://www.kanazawa-capsulehotel.com/js/jquery.responsivecrossfadeviewer.js

1jQuery(function(){
2
3	jQuery(window).load(function(){
4
5		var setElm      = jQuery('.viewer'),
6			setMaxWidth = max_width,
7			setMinWidth = min_width,
8			fadeSpeed   = fade_speed,
9			switchDelay = switch_delay,
10			sideNavi    = 'off',
11			sideHide    = 'show',
12			naviOpc     = 0.5;
13
14		setElm.each(function(){
15
16			var targetObj   = jQuery(this),
17				findUl      = targetObj.find('ul'),
18				findLi      = targetObj.find('li'),
19				findImg     = targetObj.find('img'),
20				findLiFirst = targetObj.find('li:first');
21
22			findLi.css({display:'block',opacity:'0',zIndex:'99'});
23			findLiFirst.css({zIndex:'100'}).stop().animate({opacity:'1'},fadeSpeed);
24
25			function timer(){
26				setTimer = setInterval(function(){
27					slideNext();
28				},switchDelay);
29			}
30
31			timer();
32
33			function slideNext(){
34				findUl.find('li:first-child').not(':animated').animate({opacity:'0'},fadeSpeed).next('li').css({zIndex:'100'}).animate({opacity:'1'},fadeSpeed).end().appendTo(findUl).css({zIndex:'99'});
35			}
36
37			function slidePrev(){
38				findUl.find('li:first-child').not(':animated').css({zIndex:'99'}).animate({opacity:'0'},fadeSpeed).siblings('li:last-child').css({zIndex:'100'}).animate({opacity:'1'},fadeSpeed).prependTo(findUl);
39			}
40
41			targetObj.css({width:setMaxWidth,display:'block'});
42
43			// メイン画像をベースにエリアの幅と高さを設定
44			var setLiImg   = findLi.find('img'),
45				baseWidth  = setLiImg.width(),
46				baseHeight = setLiImg.height();
47
48			// レスポンシブ動作メイン
49			function imgSize(){
50
51				// 現在開かれているウィンドウの横幅を取得
52				var windowWidth = parseInt(jQuery(window).width());
53
54				// 現在開かれているウィンドウの横幅から、高さを設定
55//				var windowHeight = parseInt(windowWidth/3) + 20;
56//				var windowHeight = parseInt(max_height * windowWidth/setMaxWidth) + 20;
57				var windowHeight = parseInt(max_height * windowWidth/setMaxWidth);
58
59				// 現在開かれているウィンドウの横幅から、画像の高さを設定（拡大・縮小）
60//				var resetHeight  = parseInt((windowWidth / baseWidth) * baseHeight);
61				var resetHeight  = parseInt((windowWidth / baseWidth) * max_height);
62
63				// ウィンドウの横幅100％であれば
64				if ( top_images_width_max == 'on' ) {
65
66					// ウィンドウの横幅が、最小値の横幅未満になったら止める
67					if ( setMinWidth < windowWidth ) {
68
69						// 画像の高さが、ウィンドウの高さを超えた場合、ウィンドウの高さに統一
70						if ( windowHeight < resetHeight ) {
71
72							targetObj.css({width:windowWidth,height:windowHeight});
73							findUl.css({width:windowWidth,height:windowHeight});
74							findLi.css({width:windowWidth,height:windowHeight});
75
76						} else {
77
78							targetObj.css({width:windowWidth,height:windowHeight});
79							findUl.css({width:windowWidth,height:windowHeight});
80							findLi.css({width:windowWidth,height:windowHeight});
81
82						}
83
84					} else {
85
86						targetObj.css({width:max_width,height:max_height});
87						findUl.css({width:max_width,height:max_height});
88						findLi.css({width:max_width,height:max_height});
89
90					}
91
92				} else {
93
94					targetObj.css({width:max_width,height:max_height});
95					findUl.css({width:max_width,height:max_height});
96					findLi.css({width:max_width,height:max_height});
97
98				}
99
100			}
101
102			// ウィンドウの横幅100％であれば
103			if ( top_images_width_max == 'on' ) {
104
105				jQuery(window).resize(function(){imgSize();}).resize();
106
107			}
108
109			// サイドナビボタン（有り無し）
110			var agent = navigator.userAgent;
111
112			if(sideNavi == 'on'){
113
114				targetObj.append('<a href="javascript:void(0);" class="btnPrev"></a><a href="javascript:void(0);" class="btnNext"></a>');
115
116				var btnPrev = targetObj.find('.btnPrev'),btnNext = targetObj.find('.btnNext'),btnPrevNext = targetObj.find('.btnPrev,.btnNext');
117
118				if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
119
120					btnPrevNext.css({opacity:naviOpc});
121
122				} else {
123
124					btnPrevNext.css({opacity:naviOpc}).hover(function(){
125
126						jQuery(this).stop().animate({opacity:naviOpc+0.2},200);
127
128					},function(){
129
130						jQuery(this).stop().animate({opacity:naviOpc},200);
131
132					});
133
134				}
135
136				if(sideHide == 'hide'){
137
138					if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
139
140						btnPrevNext.css({visibility:'visible'});
141
142					} else {
143
144						btnPrevNext.css({visibility:'hidden'});
145						targetObj.hover(function(){
146
147							btnPrevNext.css({visibility:'visible'});
148
149						},function(){
150
151							btnPrevNext.css({visibility:'hidden'});
152
153						});
154
155					}
156
157				}
158
159				btnPrev.click(function(){switchPrev();});

160				btnNext.click(function(){switchNext();});
161
162			}
163
164			// ボタン移動動作
165			function switchNext(){
166
167				findLi.not(':animated').parents('ul').each(function(){
168
169					clearInterval(setTimer);
170					slideNext();
171					timer();
172
173				});
174
175			}
176
177			function switchPrev(){
178
179				findLi.not(':animated').parents('ul').each(function(){
180
181					clearInterval(setTimer);
182					slidePrev();
183					timer();
184
185				});
186
187			}
188
189		});
190
191	});
192
193});