- ベストアンサー
jQueryでのgalleryについて
http://sugoude.inuiyosuke.jp/ 上記のようなサイトのjQueryのプラグインはないでしょうか？ Google探してますが、スライダーやシンプルなギャラリーはありますがこういった流れるjQueryは 見当たりませんでした。 他の方法でもいいですが、最近jQueryにはまっているため質問させていただきました。 よろしくおねがいします。
- bwallace00
- お礼率60% (21/35)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
ご提示のサイトのものはオリジナルのようですね。 ＞流れるjQueryは見当たりませんでした。 通常の画像ギャラリー系のものでスライドしてゆくタイプがあるような気がしますが… 原理だけの簡略化したサンプルを作ってみましたので、jquery化などはご自由に。 とはいうものの、それなりの機能があるのであまり短くはなっていませんが、ご参考までに。 （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> <!-- #imageBox{ width:100%; margin-top:200px; position:relative; overflow:hidden; } #imageBox ul, #imageBox li{ list-style-type:none; position:relative; margin:0; padding:0; } #imageBox li{ width:200px; float:left; } #imageBox li img{ width:100%; height:100px; border:1px solid #fff; } #imageBox li span{ font-weight:bold; display:none; } //--> </style> </head> <body> <div id="imageBox"> <ul> <li> <a href="#"><img src="img/photo01.jpg" alt="photo01"></a> <span>画像01<br>photo01</span> </li> <li> <a href="#"><img src="img/photo02.jpg" alt="photo02"></a> <span>画像02<br>photo02</span> </li> <li> <a href="#"><img src="img/photo03.jpg" alt="photo03"></a> <span>画像03<br>photo03</span> </li> <li> <a href="#"><img src="img/photo04.jpg" alt="photo04"></a> <span>画像04<br>photo04</span> </li> <li> <a href="#"><img src="img/photo05.jpg" alt="photo05"></a> <span>画像05<br>photo05</span> </li> </ul> </div> <script type="text/javascript"> <!-- (function(addEvent, setOpacity){ var id = "imageBox"; var rap = document.getElementById(id); var box = rap.getElementsByTagName("ul")[0]; var units = box.getElementsByTagName("li"); var unitW = units[0].clientWidth * units.length; var animate = null; var interval = 50; var left = 0; var start = function(){ animate = setInterval(function(){ left +=2; if(left>0) left -= unitW; box.style.left = left + "px"; }, interval); } var stop = function(){ clearInterval(animate); } var mouseOn = function(img, li){ stop(); for(var i=0; i<units.length; i++) if(units[i]!=li) setOpacity(units[i], 40); li.getElementsByTagName("span")[0].style.display = "inline"; } var mouseOut = function(img, li){ for(var i=0; i<units.length; i++) setOpacity(units[i], 100); li.getElementsByTagName("span")[0].style.display = "none"; start(); } var handler = function(evt){ var t = evt.target || evt.srcElement; if(t.nodeName != "IMG") return; var elm = t.parentNode; var li; while(elm && elm!=box){ if(elm.nodeName=="LI") li = elm; elm = elm.parentNode; } if(elm){ if(evt.type=="mouseover") mouseOn(t, li); else mouseOut(t, li); } } var setUp = function(){ var rapW = rap.clientWidth; var html = box.innerHTML; var w = 0; while(rapW > w){ box.innerHTML += html; w += unitW; } box.style.width = (w + unitW) + "px"; addEvent("mouseover", handler); addEvent("mouseout", handler); start(); } setUp(); }( //@cc_on function(type, func){ document./*@if(1)attachEvent('on' + @else@*/addEventListener(/*@end@*/type, func, false); }, function(e, o){ e.style./*@if(1)filter = "alpha(opacity=" + o + ")" @else*/opacity = o/100/*@end@*/; } )); //--> </script> </body> </html>
