Q&A
質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
###前提・実現したいこと
初めて、質問させていただきます。
例えです。階層構造になっている写真フォルダがあります。フォルダ1,フォルダ2,フォルダ3は、同じ階層。
それぞれの中に入っている写真を、画面上、同じ位置にポップアップの枠を設け、
スライドショーを使って、順次、自動で、或は手動で、表示させたいと考えます。
意図しているものは、年度ごとの発表会の写真(複数)を、年度を選択したら、その年度の複数の写真を、同じ位置で、見えるようにしたいのです。限られた画面を使って、より多くの写真を表示させたいのです。
下記の情報を参考にして、
https://levelf.jp/only_css_popup/#close
http://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_imagegallery
とにかく、作りました。何とか、動いています。しかし、余りにも、無駄な作りだと思います。年度の数分、同じjqueryの関数[slideSwitch]を用意しています。
jqueryの this を使って、slideSwitch を汎用化させたいと思います。
或は、target疑似クラスを使えばよいのかと思います。
サジェスチョンをいただければ、ありがたいです。
###発生している問題・エラーメッセージ
年度の数分、jqueryの関数 [slideSwitch]を用意しなければならいことが問題です。
現在、3年度分に対して
function slideSwitch1()
function slideSwitch2()
function slideSwitch3()
３つの関数を用意しています。
これをひとつの関数だけで済ませたい。
###該当のソースコード
HTML,CSS,jquery
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<title>発表会の写真</title> 6<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 7 8<script type="text/javascript"> 9 function slideSwitch1() { 10 var $active = $('#slideshow1 IMG.active'); 11 if ( $active.length == 0 ) $active = $('#slideshow1 IMG:last'); 12 var $next = $active.next().length ? $active.next() 13 : $('#slideshow1 IMG:first'); 14 $active.addClass('last-active'); 15 $next.css({opacity: 0.0}) 16 .addClass('active') 17 .animate({opacity: 1.0}, 1000, function() { 18 $active.removeClass('active last-active'); 19 }); 20 } 21 $(function() {setInterval( "slideSwitch1()", 2000 );}); 22 23 function slideSwitch2() { 24 var $active = $('#slideshow2 IMG.active'); 25 if ( $active.length == 0 ) $active = $('#slideshow2 IMG:last'); 26 var $next = $active.next().length ? $active.next() 27 : $('#slideshow2 IMG:first'); 28 $active.addClass('last-active'); 29 $next.css({opacity: 0.0}) 30 .addClass('active') 31 .animate({opacity: 1.0}, 1000, function() { 32 $active.removeClass('active last-active'); 33 }); 34 } 35 $(function() {setInterval( "slideSwitch2()", 2000 );}); 36 37 function slideSwitch3() { 38 var $active = $('#slideshow3 IMG.active'); 39 if ( $active.length == 0 ) $active = $('#slideshow3 IMG:last'); 40 var $next = $active.next().length ? $active.next() 41 : $('#slideshow3 IMG:first'); 42 $active.addClass('last-active'); 43 $next.css({opacity: 0.0}) 44 .addClass('active') 45 .animate({opacity: 1.0}, 1000, function() { 46 $active.removeClass('active last-active'); 47 }); 48 } 49 $(function() {setInterval( "slideSwitch3()", 2000 );}); 50 51</script> 52 53<style type="text/css"> 54 #slideshow1 {position:relative;height:350px;} 55 #slideshow1 IMG { 56 position:absolute; 57 top:0; 58 left:0; 59 z-index:8; 60 opacity:0.0; 61 } 62 63 #slideshow1 IMG.active { 64 z-index:10; 65 opacity:1.0; 66 } 67 68 #slideshow1 IMG.last-active { 69 z-index:9; 70 } 71 72 #slideshow2 {position:relative;height:350px;} 73 #slideshow2 IMG { 74 position:absolute; 75 top:0; 76 left:0; 77 z-index:8; 78 opacity:0.0; 79 } 80 81 #slideshow2 IMG.active { 82 z-index:10; 83 opacity:1.0; 84 } 85 86 #slideshow2 IMG.last-active { 87 z-index:9; 88 } 89 90 #slideshow3 {position:relative;height:350px;} 91 #slideshow3 IMG { 92 position:absolute; 93 top:0; 94 left:0; 95 z-index:8; 96 opacity:0.0; 97 } 98 99 #slideshow3 IMG.active { 100 z-index:10; 101 opacity:1.0; 102 } 103 104 #slideshow3 IMG.last-active { 105 z-index:9; 106 } 107 108 .popup-window { 109 -webkit-transform: translate(0, 100%); 110 -moz-transform: translate(0, 100%); 111 -o-transform: translate(0, 100%); 112 -ms-transform: translate(0, 100%); 113 transform: translate(0, 100%); 114 -webkit-transform: translate3d(0, 100%, 0); 115 transform: translate3d(0, 100%, 0); 116 position: fixed; 117 top: 0; 118 left: 0; 119 right: 0; 120 bottom: 0; 121 z-index: 999; 122 opacity: 0; 123 } 124 125 .popup-window:target { 126 -webkit-transform: translate(0, 0); 127 -moz-transform: translate(0, 0); 128 -o-transform: translate(0, 0); 129 -ms-transform: translate(0, 0); 130 transform: translate(0, 0); 131 opacity: 1; 132 } 133 134 .popup-window .popup-inner { 135 position: absolute; 136 top:300px; 137 left: 30%; 138 z-index: 20; 139 margin-left: -300px; 140 width: 350px; 141 height:400px; 142 padding:20px; 143 overflow-x: hidden; 144 text-align:center; 145 border-radius: 2px; 146 background: #fff; 147 -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.6); 148 box-shadow: 0 0 30px rgba(0, 0, 0, 0.6); 149 } 150 151 .popup-window .popup-inner p { 152 padding: 0 20px; 153 } 154 155 .popup-window .popup-close { 156 display: block; 157 text-indent: -100px; 158 overflow: hidden; 159 } 160 161 .popup-window .popup-close:before { 162 /* 元の表示に網掛けのフィルタをかける*/ 163 content: ''; 164 position: absolute; 165 top: 0; 166 left: 0; 167 right: 0; 168 bottom: 0; 169 z-index: 10; 170 background-color: rgba(0,0,0,0.6); 171 } 172 173 .popup-window .popup-close:after { 174 /* 閉じる為のボタンを設置する */ 175 content: 'Ⅹ'; 176 position: absolute; 177 top: 300px; 178 left: 21%; 179 z-index: 20; 180 margin-left: 200px; 181 border: solid 5px red; 182 background: red; 183 border-radius: 2px; 184 padding: 2px 15px; 185 font-size: 18px; 186 text-decoration: none; 187 text-indent: 0; 188 } 189 190 .popup-window { 191 -webkit-transition: opacity 0.4s; 192 -o-transition: opacity 0.4s; 193 transition: opacity 0.4s; 194 } 195 196</style> 197 198</head> 199 200<body> 201 <div> <!-- フォルダA --> 202 <h4>2000年9月 発表会</h4> 203 <div><a href="#popup01"><img src="aimages/are_01.jpg" alt="写真a(代表の小さな写真)" width="159" height="101"/></a></div> 204 <section class="popup-window" id="popup01"> 205 <div class="popup-inner"> 206 <div id="slideshow1"> 207 <img src="images/sample_a1.jpg" alt="写真a1__" width="350" class="active"/> 208 <img src="images/sample_a2.jpg" alt="写真a_2_" width="350" /> 209 <img src="images/sample_a3.jpg" alt="写真a__3" width="350" /> 210 </div> 211 </div> 212 <a href="#close" class="popup-close">YYY</a> 213 </section> 214 <hr> 215 </div> 216 <div class="clear"></div> 217 218 <div> <!-- フォルダB --> 219 <h4>2001年9月 発表会</h4> 220 <div><a href="#popup02"><img src="aimages/re_02.jpg" alt="写真b(代表の小さな写真)" width="159" height="101"/></a></div> 221 <section class="popup-window" id="popup02"> 222 <div class="popup-inner"> 223 <div id="slideshow2"> 224 <img src="images/sample_b1.jpg" alt="写真b1__" width="350" class="active"/> 225 <img src="images/sample_b2.jpg" alt="写真b_2_" width="350" /> 226 <img src="images/sample_b3.jpg" alt="写真b__3" width="350" /> 227 </div> 228 </div> 229 <a href="#close" class="popup-close">×</a> 230 </section> 231 <hr> 232 </div> 233 <div class="clear"></div> 234 235 <div> <!-- フォルダC --> 236 <h4>2002年9月 発表会</h4> 237 <div><a href="#popup03"><img src="aimages/re_03.jpg" alt="写真c(代表の小さな写真)" width="159" height="101"/></a></div> 238 <section class="popup-window" id="popup03"> 239 <div class="popup-inner"> 240 <div id="slideshow3"> 241 <img src="images/sample_c1.jpg" alt="写真c1__" width="350" class="active"/> 242 <img src="images/sample_c2.jpg" alt="写真c_2_" width="350" /> 243 <img src="images/sample_c3.jpg" alt="写真c__3" width="350" /> 244 </div> 245 </div> 246 <a href="#close" class="popup-close">×</a> 247 </section> 248 <hr> 249 </div> 250 <div class="clear"></div> 251 252</body> 253</html>
###試したこと
汎用の関数[slideSwitch]を設けた場合の、引数の受渡の方法が理解できていません。
###補足情報(言語/FW/ツール等のバージョンなど)
Bracketsの環境で、ソースは動くことを確認済みですが、質問サイトの環境で正しく
伝わるのかは、分かっておりません。もし動かない場合は、今後の為にも、ご教授願います。
また、HTMLを始めたばかりですので、参考のコードをとにかくつなぎ合わせて作っています。
各部の意味をきちんとわかっていないです。解説は、よろしくお願いします。
回答1件
0
ベストアンサー
まとめ方ややり方はいろいろありますが、idを引数に採るのが書き換えが少ないので採用しています。
JavaScript
1function slideSwitch( id ) { 2 var $active = $( id + ' IMG.active '); 3 if ( $active.length == 0 ) $active = $( id + ' IMG:last' ); 4 var $next = $active.next().length ? $active.next() : $( id + ' IMG:first' ); 5 $active.addClass( 'last-active' ); 6 $next.css( { opacity: 0.0 } ) 7 .addClass( 'active' ) 8 .animate( { opacity: 1.0 }, 1000, function() { 9 $active.removeClass( 'active last-active' ); 10 } ); 11} 12$( function() { 13 setInterval( function() { 14 slideSwitch( '#slideshow1' ); 15 slideSwitch( '#slideshow2' ); 16 slideSwitch( '#slideshow3' ); 17 }, 2000 ); 18} );
setIntervalの引数に渡す関数は文字列ではなく関数そのものか無名関数（上の例は無名関数）を使ってください。
【setTimeoutとかsetIntervalって内部的にevalしてんのかよ - tumblr】
http://shim0mura.hatenadiary.jp/entry/20110619/1308490737
投稿2017/08/05 11:47
総合スコア69407
ありがとうございます。うまく動きました。
基本的な質問ですが・・・・・
<div><a href="#popup01"><img 代表の小さな写真></a></div>
<section class="popup-window" id="popup01">
<div class="popup-inner">
<div id="slideshow1">
<img src="images/sample01の写真・・・>
<img src="images/sample02の写真・・・>
</div>
</div>
<a href="#close" class="popup-close">YYY</a>
</section> -->
ブラウザは、「代表の小さな写真」を描画して、次に、兎に角、sample01の写真、sample02の写真の写真を描画している。他の年度も、同様。但し、実際に目で見える表示にはなっているかは関係なし。
つまり、年度ごとの写真は、目で見えなくとも、ブラウザによって、すべて、仮想的に描画されている。
一方、jqueryのルーチンは、ブラウザによって、周期的にスキャンされ、そこ(jquery内)に「slideshow1」があれば、slideshow1の現在の状態を更新(結果、z-indexの値のコントロール)する。他の年度も同様。
画面に見えるのは、target疑似クラスによるポップアップ枠の使用権限を与えられたスライドショーのみ。
このように理解することは正しいでしょうか？
更に、2000ms経過の元となる切替の起点となった値は、一体どこにあるでしょうか？
当初の小生の作りでは、その切替の起点は、各スライドショー毎に存在していたと思います。とはいうものの、jquery内での構文の並びから、大きな時間差はないと思います。 貴兄のサジェスチョンでは、切替の起点の値は、ひとつだけであろうと考えます。
この点についても、ご教授願います。
選択された年度のみのスライドショー(選択されていない年度は、バックでのブラウザによる基本描画はあっても、jqueryによる状態更新はなし)を実現する為には、どのようにすればよいでしょうか？
多分、target疑似クラスを用いて、
①「slideshow1」が、ユーザーに選択された
② This を経由して、jqueryを起動して、「slideshow1」のみのスライドショーを実現する
このようなことは、可能でしょうか？
目で見えていなくとも、バックで相当な仕事をやっているという作りが、何とも落ち着かない気がするのです。
宜しくお願い致します。
ご自身で書かれたわけではないのですね。
> ブラウザは、「代表の小さな写真」を描画して・・・
要素の透過度を変えているだけなので、それを「描画」というのならそうでしょう。
> すべて、仮想的に描画されている。
「仮想的」ってなんでしょう。要素は透過度0の状態でそこにあります。
> jqueryのルーチンは、ブラウザによって、周期的にスキャンされ
JavaScriptの関数が定期実行されているだけです。
> 2000ms経過の元となる切替の起点となった値
「切替の起点」ってなんでしょう。「ブラウザが表示されたタイミング」くらいしか回答のしようがないのですが。
> その切替の起点は、各スライドショー毎に存在していたと思います。
いいえ。（「切替の起点」の内容によるかもしれませんが）
> ･･･を実現する為には、どのようにすればよいでしょうか？
コードを書いてからわからない部分を別途新規で質問されれば良いでしょう。
あなたの回答
tips
プレビュー
