ベストアンサー

Javascriptスライドショーの件にて現在も質問中ですが補足致しま

2010/10/04 19:14

Javascriptスライドショーの件にて現在も質問中ですが補足致します。添付画像の緑部分に下部のサムネイル画像をロールオーバーで表示させたいと思っております。その際拡大表示も別途できればさらに良いです。特にデザイン重視ではないので、簡単にサクサク動くものを希望です。また、同一ブラウザ上に同じようなものを並べており、頻繁に順番を入れ替えたりもしますので緑部分をブラウザ上にて位置指定しない方が良いです。英語も稚拙なため、日本語のわかりやすい説明頂けますと幸いです。初心者ですがよろしくお願い致します。

want_zero
お礼率11% (2/17)

JavaScript
回答数10
ありがとう数2

みんなの回答 （10）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

yyr446
ベストアンサー率65% (870/1330)

2010/10/08 14:17 回答No.10

いろいろ手直しして、とりあえずの最終形が出来たんで勝手にクローズソースは↓を見てね。（例） <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Canvas Slide By HTML5</title> <style type="text/css"> </style>  <script type="text/javascript" src="/jslib/CanvasSlide.js"></script> </head> <body> <h2 style="text-align:center">Canvas Slide By HTML5 or IE(excanvas.js)</h2> <div style="text-align:center"> <button type="button" onclick="my_slide_1.slideShowInit(1000);">SlideShow Start</button> <button type="button" onclick="my_slide_1.slideShowStop();">SlideShow Stop</button> </div> <div id="slide1"> <div></div> <div> <a href="/image/azu.jpg"><img src="/image/s_azu.jpg" alt="azu"></a> <a href="/image/mio.jpg"><img src="/image/s_mio.jpg" alt="mio"></a> <a href="/image/yui.jpg"><img src="/image/s_yui.jpg" alt="yui"></a> <a href="/image/mugi.jpg"><img src="/image/s_mugi.jpg" alt="mugi"></a> <a href="/image/ritu.jpg"><img src="/image/s_ritu.jpg" alt="ritu"></a> </div> </div> <script type="text/javascript"> var my_slide_1 = new slide_canvas(document.getElementById("slide1")); </script> </body> </html>

質問者

お礼 2010/10/15 13:10

回答頂きほんとうにありがとうございます。少し教えて頂きましたjqueryでしらべまして、簡単なサンプルをみつけましたのでそちらを使用しようと思っておりますが少し質問があります。 http://myisland.jp/template/tips/gallery/gallery01/index.html 上記のサンプルコードなのですが同一ページで複数設置して個別に稼働することは可能でしょうか？再度質問あげてますのでよろしければ回答いただければと思います。またできれば、かなり簡単な説明いただければ幸いです＾＾；それではよろしくお願い致します。

その他の回答 (9)

yyr446
ベストアンサー率65% (870/1330)

2010/10/06 19:27 回答No.9

（その4）＜＝続き＝＞ slide_canvas.prototype.fadeOut = function(img){ 　 this.StopFade(); 　 var fadeTimer = setInterval((function(that){ 　　 return function(){ 　　　if (that.ctx.globalAlpha < 0.1) { 　　　　that.ctx.globalAlpha = 0; 　　　　that.StopFade(fadeTimer); 　　　}else that.ctx.globalAlpha -= 0.1; 　　　that.ctx.drawImage(img,0,0,that.canvas.width,that.canvas.height); 　　 } 　 })(this),100); } slide_canvas.prototype.StopFade = function(timer){ 　 if(timer){ 　　　clearInterval(timer); 　　　timer=null; 　 } } slide_canvas.prototype.popup = function(img){ 　this.popdiv.appendChild(img); 　document.body.appendChild(this.popdiv); 　this.popdiv.style.top = (window.pageYOffset||document.documentElement.scrollTop)+50+"px"; 　this.popdiv.style.left = (window.pageXOffset||document.documentElement.scrollLeft)+50+"px"; 　this.popdiv.style.display="block"; 　document.body.style.backgroundColor="gray"; } slide_canvas.prototype.popclose = function(){ 　document.body.removeChild(this.popdiv); 　document.body.style.backgroundColor=this.bgcolor; } //var my_slide_1 = new slide_canvas(document.getElementById("slide1"),640,480); var my_slide_1 = new slide_canvas(document.getElementById("slide1")); </script> </body> </html> これでおしまい。たぶん誰も見ないだろうな... 　我輩にも、もっとショートコーディングの技が備わってれば、もっと短く一回の回答で済ませられたかも。

yyr446
ベストアンサー率65% (870/1330)

2010/10/06 19:24 回答No.8

（その3）＜＝続き＝＞ //イベントハンドラーの振り分け（IE以外） slide_canvas.prototype.handleEvent = function(event){ 　switch (event.type){ 　 case 'load':this.load_handle(event);return; 　 case 'resize':this.resize_handle(event);return; 　 case 'mousemove':this.mousemove_handle(event);return; 　 case 'mouseout':this.mouseout_handle(event);return; 　 case 'click':this.click_handle(event);return; 　} } //イベントハンドラーのメソッドたち slide_canvas.prototype.load_handle = function(event){ 　this.ctx.globalAlpha = 0; 　this.fadeIn(this.main_img); } slide_canvas.prototype.resize_handle = function(event){ 　this.canvas.width=this.w?this.w:Math.floor(this.cotainer.clientWidth*0.9); 　var height=window.innerHeight||document.documentElement.clientHeight; 　this.canvas.height=this.h?this.h:Math.floor((height-this.clientHeight)*0.9); 　this.ctx.globalAlpha = 0; 　this.fadeIn(this.main_img); } slide_canvas.prototype.mousemove_handle = function(event){ 　this.ctx.globalAlpha = 0; 　var target = event.target || event.srcElement; 　this.main_img.src=target.parentNode.href+"?"+ new Date().getTime(); } slide_canvas.prototype.mouseout_handle = function(event){ 　this.fadeOut(this.main_img); } slide_canvas.prototype.click_handle = function(event){ 　if(window.event){ 　 event.returnValue = false; 　 event.cancelBubble = true; 　}else{ 　　 event.preventDefault(); 　} 　var target = event.target || event.srcElement; 　if(target.parentNode.id!="popdiv") 　 this.popup(this.main_img); 　else this.popclose(); } //CANVAS操作のメソッドたち slide_canvas.prototype.fadeIn = function(img){ 　 this.StopFade(); 　 var fadeTimer = setInterval((function(that){ 　　 return function(){ 　　　if (that.ctx.globalAlpha > 0.9) { 　　　　that.globalAlpha = 1; 　　　　that.StopFade(fadeTimer); 　　　}else that.ctx.globalAlpha += 0.1; 　　　that.ctx.drawImage(img,0,0,that.canvas.width,that.canvas.height); 　　 } 　 })(this),100); } ＝＝続くって、もういいかげんにしろってか＝＝

yyr446
ベストアンサー率65% (870/1330)

2010/10/06 19:21 回答No.7

（その2）＜＝続き＝＞ //初期画像セット　this.main_img = new Image(); 　this.main_img.src = "/image/mio.jpg?" + new Date().getTime(); //画像ロードイベント登録　if('undefined' !== typeof window.addEventListener) 　 this.main_img.addEventListener('load',this,false); 　else if ('undefined' !== typeof window.attachEvent) 　 this.main_img.attachEvent('onload',(function(that){ 　　 return function(){that.load_handle(event);}})(this)); //サブネールのイベント登録　for(var i=0;i<this.thumb.length;i++){ 　 if('undefined' !== typeof window.addEventListener){ 　　 this.thumb[i].getElementsByTagName("img")[0].addEventListener('mousemove',this,false); 　　 this.thumb[i].getElementsByTagName("img")[0].addEventListener('mouseout',this,false); 　　 this.thumb[i].getElementsByTagName("img")[0].addEventListener('click',this,false); 　 }else if ('undefined' !== typeof window.attachEvent){ 　　 this.thumb[i].getElementsByTagName("img")[0].attachEvent('onmousemove',(function(that){ 　　 return function(){that.mousemove_handle(event);}})(this)); 　　 this.thumb[i].getElementsByTagName("img")[0].attachEvent('onmouseout',(function(that){ 　　 return function(){that.mouseout_handle(event);}})(this)); 　　 this.thumb[i].getElementsByTagName("img")[0].attachEvent('onclick',(function(that){ 　　 return function(){that.click_handle(event);}})(this)); 　 } 　} //Windowリサイズのイベント　 if('undefined' !== typeof window.addEventListener) 　　 window.addEventListener('resize',this,false); 　 else if ('undefined' !== typeof window.attachEvent) 　　 window.attachEvent('onresize',(function(that){ 　　 return function(){that.resize_handle(event);}})(this)); //PopUp Windowのイベント　 if('undefined' !== typeof window.addEventListener) 　　 this.popdiv.addEventListener('click',this,false); 　 else if ('undefined' !== typeof window.attachEvent) 　　 this.popdiv.attachEvent('onclick',(function(that){ 　　 return function(){that.click_handle(event);}})(this)); } ＜＝続く＝＞

yyr446
ベストアンサー率65% (870/1330)

2010/10/06 19:19 回答No.6

レスがないので、連続回答を勝手に続けます。（※ポップアップとリサイズにも対応した。後、オートスクロールも機能追加すれば使い物になるかも）＝その1＝ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Test</title> <style type="text/css"> </style>  </head> <body> <h2 style="text-align:center">Canvas Slide By HTML5 or IE(excanvas.js)</h2> <div id="slide1"> <div></div> <div> <a href="/image/azu.jpg"><img src="/image/s_azu.jpg" alt="azu" width="130px"></a> <a href="/image/mio.jpg"><img src="/image/s_mio.jpg" alt="mio" width="130px"></a> <a href="/image/yui.jpg"><img src="/image/s_yui.jpg" alt="yui" width="130px"></a> <a href="/image/mugi.jpg"><img src="/image/s_mugi.jpg" alt="mugi" width="130px"></a> <a href="/image/ritu.jpg"><img src="/image/s_ritu.jpg" alt="ritu" width="130px"></a> </div> </div> <script type="text/javascript"> function slide_canvas(cotainer,w,h){ //初期値のセット　this.bgcolor=document.body.style.backgroundColor; 　this.cotainer=cotainer; 　this.cotainer.style.textAlign="center"; 　this.w=w; 　this.h=h; 　this.thumb=cotainer.getElementsByTagName("a"); //CANVAS初期化　this.canvas=document.createElement("canvas"); 　this.canvas.style.border = "solid 1px gray"; 　this.canvas.width=this.w?this.w:Math.floor(this.cotainer.clientWidth*0.9); 　this.clientHeight=this.cotainer.clientHeight; 　var height=window.innerHeight||document.documentElement.clientHeight; 　this.canvas.height=this.h?this.h:Math.floor((height-this.clientHeight)*0.9); 　cotainer.getElementsByTagName("div")[0].appendChild(this.canvas); //Canvasコントローラー生成　if (typeof(G_vmlCanvasManager) != 'undefined') 　 this.canvas = G_vmlCanvasManager.initElement(this.canvas); 　this.ctx = this.canvas.getContext('2d'); 　this.ctx.globalAlpha = 0; //PopUp Window初期化　this.popdiv=document.createElement("div"); 　this.popdiv.id="popdiv"; 　this.popdiv.style.border = "double 2px black"; 　this.popdiv.style.display="none"; 　this.popdiv.style.position = 'absolute'; ＜＝続く＝＞

yyr446
ベストアンサー率65% (870/1330)

2010/10/06 11:29 回答No.5

＝＝続き＝＝ slide_canvas.prototype.handleEvent = function(event){ 　switch (event.type){ 　 case 'load':this.load_handle(event);return; 　 case 'mousemove':this.mousemove_handle(event);return; 　 case 'mouseout':this.mouseout_handle(event);return; 　 case 'click':this.click_handle(event);return; 　} } slide_canvas.prototype.load_handle = function(event){ 　this.ctx.globalAlpha = 0; 　this.fadeIn(this.main_img); } slide_canvas.prototype.mousemove_handle = function(event){ 　this.ctx.globalAlpha = 0; 　var target = event.target || event.srcElement; 　this.main_img.src=target.parentNode.href+"?"+ new Date().getTime(); } slide_canvas.prototype.mouseout_handle = function(event){ 　this.fadeOut(this.main_img); } slide_canvas.prototype.click_handle = function(event){ 　if(window.event){ 　 event.returnValue = false; 　 event.cancelBubble = true; 　}else{ 　　 event.preventDefault(); 　} 　//this.popup(); } slide_canvas.prototype.fadeIn = function(img){ 　 this.StopFade(); 　 var fadeTimer = setInterval((function(that){ 　　 return function(){ 　　　if (that.ctx.globalAlpha > 0.9) { 　　　　that.globalAlpha = 1; 　　　　that.StopFade(fadeTimer); 　　　}else that.ctx.globalAlpha += 0.1; 　　　that.ctx.drawImage(img,0,0,that.canvas.width,that.canvas.height); 　　 } 　 })(this),100); } slide_canvas.prototype.fadeOut = function(img){ 　 this.StopFade(); 　 var fadeTimer = setInterval((function(that){ 　　 return function(){ 　　　if (that.ctx.globalAlpha < 0.1) { 　　　　that.ctx.globalAlpha = 0; 　　　　that.StopFade(fadeTimer); 　　　}else that.ctx.globalAlpha -= 0.1; 　　　that.ctx.drawImage(img,0,0,that.canvas.width,that.canvas.height); 　　 } 　 })(this),100); } slide_canvas.prototype.StopFade = function(timer){ 　 if(timer){ 　　　clearInterval(timer); 　　　timer=null; 　 } } var my_slide_1 = new slide_canvas(document.getElementById("slide1"),640,480); 終わり ※後はcanvasサイズの自動取得＆リサイズ対応と、クリック時のポップアップ対応の実装すれば、とりあえず完成。このソースちょろっと変えれば別に<canvas>でなくてもよさげだ。

yyr446
ベストアンサー率65% (870/1330)

2010/10/06 11:25 回答No.4

古いIE（IE6）でも動くように改造した。 <canvas>未サポートの人は「excanvas.js」が必用。しかもフェード効果無しです。 function slide_canvas(cotainer,w,h){ 　this.thumb=cotainer.getElementsByTagName("a"); 　this.canvas=document.createElement("canvas"); 　this.canvas.width=w; 　this.canvas.height=h; 　cotainer.getElementsByTagName("div")[0].appendChild(this.canvas); 　if (typeof(G_vmlCanvasManager) != 'undefined') 　 this.canvas = G_vmlCanvasManager.initElement(this.canvas); 　this.ctx = this.canvas.getContext('2d'); 　this.ctx.globalAlpha = 0; 　this.main_img = new Image(); 　this.main_img.src = "/image/mio.jpg?" + new Date().getTime(); 　if('undefined' !== typeof window.addEventListener) 　 this.main_img.addEventListener('load',this,false); 　else if ('undefined' !== typeof window.attachEvent) 　 this.main_img.attachEvent('onload',(function(that){ 　　 return function(){that.load_handle(event);}})(this)); 　for(var i=0;i<this.thumb.length;i++){ 　 if('undefined' !== typeof window.addEventListener){ 　　 this.thumb[i].getElementsByTagName("img")[0].addEventListener('mousemove',this,false); 　　 this.thumb[i].getElementsByTagName("img")[0].addEventListener('mouseout',this,false); 　　 this.thumb[i].getElementsByTagName("img")[0].addEventListener('click',this,false); 　 }else if ('undefined' !== typeof window.attachEvent){ 　　 this.thumb[i].getElementsByTagName("img")[0].attachEvent('onmousemove',(function(that){ 　　 return function(){that.mousemove_handle(event);}})(this)); 　　 this.thumb[i].getElementsByTagName("img")[0].attachEvent('onmouseout',(function(that){ 　　 return function(){that.mouseout_handle(event);}})(this)); 　　 this.thumb[i].getElementsByTagName("img")[0].attachEvent('onclick',(function(that){ 　　 return function(){that.click_handle(event);}})(this)); 　 } 　} } ＝＝続く＝＝

yyr446
ベストアンサー率65% (870/1330)

2010/10/05 18:45 回答No.3

＝＝続き＝＝ slide_canvas.prototype.handleEvent = function(event){ 　switch (event.type){ 　 case 'load': 　　 this.ctx.globalAlpha = 0; 　　 this.fadeIn(this.main_img); 　　 return; 　 case 'mousemove': 　　 this.ctx.globalAlpha = 0; 　　 this.main_img.src=event.target.parentNode.href+"?"+ new Date().getTime(); 　　 return; 　 case 'mouseout': 　　 this.fadeOut(this.main_img); 　　 return; 　 case 'click': 　　 event.preventDefault(); 　　 return; 　} } slide_canvas.prototype.fadeIn = function(img){ 　 this.StopFade(); 　 var fadeTimer = setInterval((function(that){ 　　 return function(){ 　　　if (that.ctx.globalAlpha > 0.9) { 　　　　that.globalAlpha = 1; 　　　　that.StopFade(fadeTimer); 　　　}else that.ctx.globalAlpha += 0.1; 　　　that.ctx.drawImage(img,0,0,that.canvas.width,that.canvas.height); 　　 } 　 })(this),100); } slide_canvas.prototype.fadeOut = function(img){ 　 this.StopFade(); 　 var fadeTimer = setInterval((function(that){ 　　 return function(){ 　　　if (that.ctx.globalAlpha < 0.1) { 　　　　that.ctx.globalAlpha = 0; 　　　　that.StopFade(fadeTimer); 　　　}else ctx.globalAlpha -= 0.1; 　　　that.ctx.drawImage(img,0,0,that.canvas.width,that.canvas.height); 　　 } 　 })(this),100); } slide_canvas.prototype.StopFade = function(timer){ 　 if(timer){ 　　　clearInterval(timer); 　　　timer=null; 　　} } これで全部。 ※全角空白は半角空白になおしてね。 ※「excanvas.js」でIEにも対応させようと思ったけど、 addEventListenerとhandleEventメソッドのIEのやり方がわからんかったのでやめた。IEの人はIE9を待とう（もうすぐ） ※fadeTimerという変数は、slide_canvasオブジェクトの中で、this.timer みたく一つあればよいのかも知れない。 ※window.setIntervalメソッドのハンドル関数もイベントハンドラーみたく、かっこよくオブジェクト(THIS)を渡せないのか．．．．

yyr446
ベストアンサー率65% (870/1330)

2010/10/05 18:37 回答No.2

HTML5のCANVAS要素を使って HTMLは↓<div id="slide1">----</div>のように配置する <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>CanvasSlide</title> <style type="text/css"> </style>  </head> <body> <div id="slide1" style="text-align:center"> <div></div> <a href="/image/azu.jpg"><img src="/image/s_azu.jpg" alt="azu" width="130px"></a> <a href="/image/mio.jpg"><img src="/image/s_mio.jpg" alt="mio" width="130px"></a> <a href="/image/yui.jpg"><img src="/image/s_yui.jpg" alt="yui" width="130px" ></a> <a href="/image/mugi.jpg"><img src="/image/s_mugi.jpg" alt="mugi" width="130px"></a> <a href="/image/ritu.jpg"><img src="/image/s_ritu.jpg" alt="ritu" width="130px" ></a> </div> <script type="text/javascript"> //下のように作成する（複数スライドセットがあってもOK） var my_slide_1 = new slide_canvas(document.querySelector("#slide1"),640,480); </script> <body> </html> 肝心のjavascriptはまず、 //var G_vmlCanvasManager; function slide_canvas(cotainer,w,h){ 　this.thumb=cotainer.querySelectorAll("a"); 　this.canvas=document.createElement("canvas"); 　this.canvas.width=w; 　this.canvas.height=h; 　cotainer.querySelector("div").appendChild(this.canvas); // if (typeof(G_vmlCanvasManager) != 'undefined') // this.canvas = G_vmlCanvasManager.initElement(this.canvas); 　this.ctx = this.canvas.getContext('2d'); 　this.ctx.globalAlpha = 0; 　this.main_img = new Image(); 　//↓は初期画像いらなければ不要　this.main_img.src = "/image/mio.jpg?" + new Date().getTime(); 　this.main_img.addEventListener('load',this,false); 　//イベント登録　for(var i=0;i<this.thumb.length;i++){ 　 this.thumb[i].querySelector("img").addEventListener('mousemove',this,false); 　 this.thumb[i].querySelector("img").addEventListener('mouseout',this,false); 　 this.thumb[i].querySelector("img").addEventListener('click',this,false); 　} } ＝＝続く＝＝