- ベストアンサー
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>
関連するQ&A
- jQueryの基本的なことについて教えてください
自サイトで 「jQuery Slider²」http://wex.im/javascript/jquery-slider2 を設置しようと試みています。 私はhtmlとcssの知識しかありません。 今までずっと、HTML 4.01 Transitionalで、タグ打ちしながらサイトの作成をしていました。 行き詰ったらその都度ネットで調べて…という感じで 10年以上サイト製作をしていますが素人ほどの知識だと思っています。 それで、初めて上のスライドショーを設置しようと色んなサイトを参考にしたのですがうまく動きません。 （google chrome、IE8で見ています） 何が悪いのか…と上記URLの配布サイトを見たところ、 Examples <head> stuff <script type="text/javascript" src="js/jquery.slider.min.js"></script> <link href="css/jquery.slider.css" rel="stylesheet" type="text/css" /> と、2段目がtype="text/css" />という風に閉じてあって、 あぁ、これってページ全体をもうhtmlじゃなくて xhtmlで書かないと動かないって事なのかなぁ、という疑問が沸いてきました。 実際このスライドショーに限らず、jqueryのプラグインを使用している 色んなサイトがxhtml方式になっているのを確認しましたが jQueryのプラグインは、xhtmlでないと動かないものでしょうか？ それとも、このプラグインに限ってはxhtmlなのでしょうか？ よろしくお願いいたします。
- ベストアンサー
- JavaScript
- jQueryイメージギャラリーに関しての質問です。
jQueryに関して。下記URLを参考に、イメージギャラリーを設置しました。 http://www.webdesignerwall.com/demo/jquery/img-replacement.html この、大きく表示されている画像に対して、さらにリンクを設定し、画像をさらに大きく表示させられるようなjQueryプラグインはあるでしょうか。 たとえばこの画像は 550px × 400px となっていますが、さらにこの画像をクリックすることで、別に用意された倍のサイズの画像をlightbox効果を付けて表示できるような、そういったプラグインです。 また、この画像が表示されている部分に、別のHTMLファイルを表示させられるようなプラグインがあるかどうかも知りたいです。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jQueryイメージギャラリーでの画像保護方法
はじめまして。 jQueryプラグインの「lightbox」や「colorbox」などを用いたフォトギャラリーにて、 右クリックやドロップによる画像の持ち出しを禁止する方法を探しております。 表示画像に自動で透明画像を被せる、表示部分だけメニュー無効化などでしょうか。 保存に一手間を取らせる程度の簡単なもので構いません。 可能ならばlightboxもしくはcolorboxを利用したいのですが、似たようなものは多くあると思いますので、他のプラグインでも大丈夫です。 どうぞよろしくお願い申し上げます。
- ベストアンサー
- JavaScript
- jQueryを使ったフォトギャラリーが、Firefoxで動きません。
jQueryを使ったフォトギャラリーが、Firefoxで動きません。 下記のサイトは、jQueryを使って複数の写真を見やすくしたページです。 ただ、Firefox3（正確には3.5.9）で見ると、IEのように動きません。 http://coffeescripter.com/code/ad-gallery/ エラーコンソールを見ても原因が不明です。 できれば動くようにカスタマイズしたいのですが、何が問題なのでしょうか。
- ベストアンサー
- JavaScript
- こんな動きができるJqueryを探しています。
お客さまより、こんな動きができないか？と言われていろいろ探していたんですが、 全然見つからないので、こちらで質問させていただきます。 こちらのサイトの様な動きができるJqueryプラグインはありませんか？ ↓↓↓↓ ---- 摂南大学様サイト http://www.setsunan.ac.jp/ ---- 左右の画像は透明にならなくてもかまいません。（むしろならないほうがいいです） メインの画像が１枚だけ切り替わるスライダーは沢山あるみたいなんですが、 この様に、左右の画像が表示され、なおかつ下のまるい図の色が変わるものが見つからずに、 とても困っています。 どなたか教えていただけませんか？
- ベストアンサー
- JavaScript
- マウスホバーで見出しが変わるjquery
下記の参考URL先にあるようなマウスオーバーで見出しが変わるjquery？スライダーを探しています。 参考URL http://www.jfa.jp/samuraiblue/ 自分で探してみて一応それっぽいものは見付けることができたのですが、いずれも難があって使うことができません。 Image Rotator with DescriptionsやFeatured Content Slider Usingの場合、右側のリストをマウスホバーしても左側の画像や見出しを切り替えることができず、さらに右側リストをクリックしてマウスオーバーしていても左側の見出しがガンガン進んでしまうので使えませんでした。 参考URLhttp://designm.ag/previews/jquery-image-rotator/ 参考URLhttp://demo.webdeveloperplus.com/featured-content-slider/ http://www.jfa.jp/samuraiblue/にあるスライダーが一番理想的なのですが、似たような表現のできるjqueryプラグイン、又はその他の方法はないでしょうか？どうか宜しくお願いします。 ※jQuery初心者の為、伝わりにくいかと思いますがご容赦ください。
- ベストアンサー
- JavaScript
- jQueryスライダーの止め方
jQuery Destaque Plugin http://globocom.github.io/destaque/ こちらのサイトのパララックススライダーを使おうと考えていますが、 デフォルトでスライドをストップさせる方法がわかりません。 どなたかご教授下さいますでしょうか。 また、このプラグインを使って ページネーションをつけた例がございますが、 http://www.nxworld.net/sample/jquery-destaque/ 「３」「４」を表示中に「１」「２」を押すと、 スライドが左から右に遷移しますが、 この方向を固定で右から左へ動かすことは可能でしょうか？ こちらもわかる方がいらっしゃいましたら、是非宜しくお願い致します。
- 締切済み
- JavaScript
- jQueryで複数枚同時にスライダーをさせたい
色々改造したりしてみたのですが、何ともいかず行き詰ってしまいました。 jQueryを用いたスライダーで、画像のように5枚ずつスクロールをして写真を見せたく、 制作をしているのですが、 スライダー下にある○のナビゲーションも上記と同じように ５つアクティブになるようにするには、どのようにすればよいのでしょうか。 １つだけというものは数多くあると思うのですが、 複数枚となると、このナビゲーション部分はどこにどのように記述すればいいのでしょうか。 すみませんが、どなたかそのようなプラグインまたは記述方法をご存知の方、 ご教授くださいませ。 ちなみに今はこれをベースに使っています。 http://slidesjs.com/
- 締切済み
- JavaScript
- JQueryを使ったオートスライドショーについて
Webサイトを作っているのですが、トップページにフェード効果のあるスライドショーを自動切り替えしたいと思っております。 とりあえず今日JQueryをダウンロードしたのですが、JQueryだけではスライドショーの機能を付けるのは難しいのでしょうか？ それともスライダー用のJQueryプラグインを使う必要があるのでしょうか？ JQueryだけでスライドショーを実現したほうが良いのか、プラグインを使ってスライドショーを実現した方が良いのか、どちらが良いのでしょうか？ 双方のメリットやデメリットがあれば教えて下さい。
- ベストアンサー
- JavaScript
- たすけて！ｊQueryがさっぱりわかりません！
Dreamweaverでサイトを制作しています。 ｊQueryは何をどこにダウンロードして何をどこにうちこめばいいのか？ さっぱりわかりません…。 http://jquery.com/からなにかをダウンロードするということはわかるのですが…。いろいろありすぎて何をダウンロードすればいいのか…。 しかもダウンロードしたファイルはどこに保存してどうやってhtmlとむすびつけるのか。 タグはhtmlのどこに書けばいいのか、くわしく赤ちゃんに説明するつもりで教えていただけると助かります。 ちなみに（http://toddmotto.com/introducing-superbox-the-reimagined-lightbox-gallery/）を使いたいのです。 サイトを見たのですがこのコードはどこにいれたらいいのかさっぱりわかりません。 head内なのかbodyなのかはたまた別でcssを作るのか？ 【質問まとめ】 ・（http://toddmotto.com/introducing-superbox-the-reimagined-lightbox-gallery/）のギャラリーをつかいたいが取り込み方がわからない。 ・上記URLからのダウンロード以外で（http://jquery.com/）からのダウンロードは必要なのか？ ・ダウンロードしたものはファイルのどこにいれたらいいのか。 ・どうすれば現在つくっているhtmlにｊｓをむすびつけられるのか？ ・head、bodyそれぞれになにをいれたらいいのか？ ・ともかくなにをどこにいれたらいいのかさっぱりわかりません。 ・こういうものは$(function(){})どこにいれたらいいのか、これはなんなのか？ 質問が多くてすみません。どうかよろしくお願いします。
- 締切済み
- JavaScript
