https://www.izumo-royal.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 = 310,
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				var windowHeight = parseInt(jQuery(window).height());
54
55				// 現在開かれているウィンドウの横幅から、高さを設定
56//				var windowHeight = parseInt(windowWidth / 3) + 20;
57//				var windowHeight = parseInt(windowWidth / 3);
58//				var windowHeight = parseInt(max_height * windowWidth / setMaxWidth) + 20;
59				var windowHeight = parseInt(baseHeight * windowWidth / baseWidth);
60
61				// 現在開かれているウィンドウの横幅から、画像の高さを設定（拡大・縮小）
62				var resetHeight  = parseInt((windowWidth / baseWidth) * baseHeight);
63//				var resetHeight  = parseInt((windowWidth / baseWidth) * max_height);
64
65				// ウィンドウの横幅100％であれば
66				if ( top_images_width_max == 'on' ) {
67
68					// ウィンドウの横幅が、最小値の横幅未満になったら止める
69					if ( setMinWidth < windowWidth ) {
70
71						// 画像の高さが、ウィンドウの高さを超えた場合、ウィンドウの高さに統一
72						if ( windowHeight < resetHeight ) {
73
74							targetObj.css({width:windowWidth,height:windowHeight});
75							findUl.css({width:windowWidth,height:windowHeight});
76							findLi.css({width:windowWidth,height:windowHeight});
77
78						} else {
79
80							targetObj.css({width:windowWidth,height:windowHeight});
81							findUl.css({width:windowWidth,height:windowHeight});
82							findLi.css({width:windowWidth,height:windowHeight});
83
84						}
85
86					} else {
87
88//						targetObj.css({width:max_width,height:max_height});
89//						findUl.css({width:max_width,height:max_height});
90//						findLi.css({width:max_width,height:max_height});
91						targetObj.css({width:windowWidth,height:windowHeight});
92						findUl.css({width:windowWidth,height:windowHeight});
93						findLi.css({width:windowWidth,height:windowHeight});
94
95					}
96
97				} else {
98
99//					targetObj.css({width:max_width,height:max_height});
100//					findUl.css({width:max_width,height:max_height});
101//					findLi.css({width:max_width,height:max_height});
102					targetObj.css({width:windowWidth,height:windowHeight});
103					findUl.css({width:windowWidth,height:windowHeight});
104					findLi.css({width:windowWidth,height:windowHeight});
105
106				}
107
108			}
109
110			// ウィンドウの横幅100％であれば
111			if ( top_images_width_max == 'on' ) {
112
113				jQuery(window).resize(function(){imgSize();}).resize();
114
115			}
116
117			// サイドナビボタン（有り無し）
118			var agent = navigator.userAgent;
119
120			if(sideNavi == 'on'){
121
122				targetObj.append('<a href="javascript:void(0);" class="btnPrev"></a><a href="javascript:void(0);" class="btnNext"></a>');
123
124				var btnPrev = targetObj.find('.btnPrev'),btnNext = targetObj.find('.btnNext'),btnPrevNext = targetObj.find('.btnPrev,.btnNext');
125
126				if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
127
128					btnPrevNext.css({opacity:naviOpc});
129
130				} else {
131
132					btnPrevNext.css({opacity:naviOpc}).hover(function(){
133
134						jQuery(this).stop().animate({opacity:naviOpc+0.2},200);
135
136					},function(){
137
138						jQuery(this).stop().animate({opacity:naviOpc},200);
139
140					});
141
142				}
143
144				if(sideHide == 'hide'){
145
146					if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
147
148						btnPrevNext.css({visibility:'visible'});
149
150					} else {
151
152						btnPrevNext.css({visibility:'hidden'});
153						targetObj.hover(function(){
154
155							btnPrevNext.css({visibility:'visible'});
156
157						},function(){
158
159							btnPrevNext.css({visibility:'hidden'});
160
161						});
162
163					}
164
165				}
166
167				btnPrev.click(function(){switchPrev();});

168				btnNext.click(function(){switchNext();});
169
170			}
171
172			// ボタン移動動作
173			function switchNext(){
174
175				findLi.not(':animated').parents('ul').each(function(){
176
177					clearInterval(setTimer);
178					slideNext();
179					timer();
180
181				});
182
183			}
184
185			function switchPrev(){
186
187				findLi.not(':animated').parents('ul').each(function(){
188
189					clearInterval(setTimer);
190					slidePrev();
191					timer();
192
193				});
194
195			}
196
197		});
198
199	});
200
201});