- 締切済み
jqueryを使用したギャラリー
http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm 上記URLを利用しているのですが自動再生をtrueにすると1番最初の画像で停止してしまいます。 希望としては自動で画像の切り替えを行い最後の画像であれば停止させたいのですがオプション 設定で可能なものでしょうか？ ドキュメントを読んでみたのですが英文で全く理解できない状態です。 また、サムネイルや再生ボタン等は必要ないので指定のdiv内にフェードインフェードアウトで 画像の切り替えができるものがありましたら教えてください！
- dcx147
- お礼率33% (214/636)
- JavaScript
- 回答数3
- ありがとう数6
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- yyr446
- ベストアンサー率65% (870/1330)
他のライブラリーとしては、いろいろあるでしょうが、 最近みかけたもので、少々古いですが「CSS Crossfader」 http://oshiete1.goo.ne.jp/qa5522443.html http://www.brandspankingnew.net/archive/2006/09/javascript_css_crossfader.html なんかシンプルですね。 それなんか、ほとんど説明がついていないんですよ。 画像じゃなくても、選択したIDのついた<div>の内容を、 次々にフェードイン・フェードアウトするのが売りみたいですね。 それにしても、この手のライブラリーって海外製のものばかりで、 英文説明を読むのは必須ですね。たまに日本のサイトがあったと 思ったら、海外製ライブラリーの使い方サイトだったりして、 なぜ、国産のがないのか、我の探し方が悪いのか．．．．
- mtaka2
- ベストアンサー率73% (867/1179)
オプションで onslide:function(curslide, i){ if (i == this.setting.imagearray.length-1) this.navigate("pause"); } といった指定をすれば、最後の画像を表示したところで止まるようになるかと思います。
お礼
お返事ありがとうございます。 教えて頂いた方法でバッチリできました！マニュアルを見てもさっぱりだったので 本当に助かりました。ありがとうございます^^
- fujillin
- ベストアンサー率61% (1594/2576)
jqueryとかよく知らないので、直に… 指定のdiv(サンプルではphoto)内の画像を重ねておいて、単純に上から順にフェードアウトさせているだけです。 <html> <head><title>test</title> <style type="text/css"> div#photo { position:relative; width:200px; height:100px; } div#photo img { position:absolute; top:0; left:0; } </style> <script type="text/javascript"> window.onload = function() { func('photo'); } function func(id) { var intvl = 4000; //←次の画像処理までの時間(msec) var fspeed = 50; //←フェードアウトの速度(msec) var fstep = 3; // ←フェードアウトの透明度の変化率 if (id) this.id = id; var i, e, op = 100; setTimeout(search, intvl); function search() { var elm = document.getElementById(this.id).getElementsByTagName('IMG'); for (i = elm.length-1; i>0; i--) if (elm[i].style.display != 'none') { e = elm[i]; fade(); break; } } function fade(){ op -= fstep; if (op<0) op = 0; //@cc_on e.style. /*@if( @_jscript ) filter = 'alpha(opacity='+ op +')' @else@*/ opacity = ( op / 100 ) + '' /*@end@*/; if (op>0) { setTimeout(fade, fspeed); } else { e.style.display = 'none'; setTimeout(function(){ func(); }, fspeed); } } } </script> </head> <body> <div id="photo"> <img src="A.jpg" alt="testA"> <img src="B.jpg" alt="testB"> <img src="C.jpg" alt="testC"> <img src="D.jpg" alt="testD"> <img src="E.jpg" alt="testE"> </div> </body> </html>
お礼
お返事ありがとうございます。 試してみたところ問題なく動作しました！jqueryというのも流行りに乗っているだけという 感じなのですがこのような方法でも実現可能なのですね。jsは難しいです^^;
関連するQ&A
- jQueryのスライドショーについて
jQueryのスライドショー「Elastic Image Slideshow with Thumbnail Preview」に関して、 お分かりになる方がいらっしゃればご教授いただけますでしょうか？ ■Elastic Image Slideshow with Thumbnail Preview http://tympanus.net/codrops/2011/11/21/elastic-image-slideshow-with-thumbnail-preview/ ご質問の内容ですが、 現在、スライドを autoplay: true, に設定し、自動で再生（スライド）しています。 ただ、スライドバーをクリックすると、自動再生が停止していまいます。 スライドバーをクリックしても、停止しないコード追加もしくは、削除箇所などをお教えいただけますでしょうか。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- 折りたたみメニューをスライドして開く
題名の通りなのですが、リンクをクリックすると指定した(DIVタグで)部分が展開したり閉じたりしたいと思っています。 下記URLの「Example 2」が理想なのですが、これを複数に適用することができないんです… http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm 解決方法をご存知の方がおられましたらご教示お願いできないでしょうか。 どうかよろしくお願いします。
- ベストアンサー
- JavaScript
- javascript画像の切り替えについて
javascriptでの画像切り替えについて、どなたか教えていただけますでしょうか？ やりたいことは、ユニクロの商品ページのカラー選択のような、↓↓ http://store.uniqlo.com/jp/CSaGoods/472513 サムネイルにマウスオーバーするとメイン画像が切り替わり、 マウスアウトすると、一番最初の画像に戻り、 クリックすると、選択した画像が固定されてメイン画像に表示される、 という動きです。 実際に下のようなソースを作ったのですが、 マウスオーバーとマウスアウトはきちんと動作しても、 クリックしたときに画像が固定されなくて困っています。 どなたか教えて頂けませんでしょうか？ よろしくお願いいたします。 ------------------------------------------- <div id="item_main"> <img src="メイン画像のURL" alt="" name="main" /></div> <div id="item_sum"> <p> <img src="サムネイルのURL1" width="24" height="24" onMouseOver="document.main.src='メイン部分に表示させたい画像のURL1;" onMouseOut="document.main.src='メイン画像のURL';" onClick="document.main.src='メイン部分に表示させたい画像のURL1';" /> <img src="サムネイルのURL2" width="24" height="24" onMouseOver="document.main.src='メイン部分に表示させたい画像のURL2;" onMouseOut="document.main.src='メイン画像のURL';" onClick="document.main.src='メイン部分に表示させたい画像のURL1';" /> <img src="サムネイルのURL3" width="24" height="24" onMouseOver="document.main.src='メイン部分に表示させたい画像のURL3;" onMouseOut="document.main.src='メイン画像のURL';" onClick="document.main.src='メイン部分に表示させたい画像のURL1';" /> </p> </div> </div> ----------------------------------------------------
- 締切済み
- JavaScript
- jQueryでappleっぽい画像ギャラリー設置したいです
http://www.skuare.net/test/jAppleGal.htmlで紹介されていた画像ギャラリーを私のホームページにも組み込みたいと思っているのですが、CSS・JAVAを最近本を買ったりして勉強しはじめた初心者なだけに、紹介されている設置方法だけでは理解できなく質問させていただきました。 (1)とりあえずjQueryからjquery.jsをダウンロードはしましたが、こjquery.jsはどこにどうすればいいのでしょうか？ (2) <div id="main"> <div id="gallery"> <div id="slides"> <div class="slide"><img src="画像パス1" width="920" height="400" /></div> <div class="slide"><img src="画像パス2" width="920" height="400" /></div> <div class="slide"><img src="画像パス3" width="920" height="400" /></div> <!-- 画像にはwidthとheightを指定します --> </div> <div id="menu"> <ul> <li class="fbar"> </li> //区切り線用 <li class="menuItem"><a href=""><img src="サムネイル画像パス1" /></a></li> <li class="menuItem"><a href=""><img src="サムネイル画像パス2" /></a></li> <li class="menuItem"><a href=""><img src="サムネイル画像パス3" /></a></li> </ul> </div> </div> </div> このコードはhtmlのheadに組み込むのでしょうか？それともbodyでしょうか？ (3) 次にCSSを記述します。 特に難しい部分はないので、cssを見ていただくとして・・・ とありますが、リンク先のcssはいじらなくてもそのまま使用すればいいのでしょうか？ 最後に、jQueryを記述すれば完成です。 $(document).ready(function(){ var totWidth=0; var positions = new Array(); $('#slides .slide').each(function(i){ positions[i]= totWidth; totWidth += $(this).width(); if(!$(this).width()) { alert("Please, fill in width & height for all your images!"); return false; } }); $('#slides').width(totWidth); $('#menu ul li a').click(function(e){ $('li.menuItem').removeClass('act').addClass('inact'); $(this).parent().addClass('act'); var pos = $(this).parent().prevAll('.menuItem').length; $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450); e.preventDefault(); }); $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact'); }); とありますが、これはどこに組み込めばいいのでしょうか？また何も触らなくてもいいのでしょうか？ 他にも分からないところだらけなので、立て続けに質問させていただくと思いますが、お手数おかけしますが力を貸してください。 よろしく御願いいたします。
- ベストアンサー
- JavaScript
- flashのギャラリー作成で
flash8です。 サムネイル1をクリックすると、 画面中央に、該当する写真が大きく表示され 大きい写真をクリックすると指定されたurlに飛ぶという ギャラリーを作りたいです。 （サムネイルは4つあり、クリックするとそれぞれの画像が表示される） できればＡＳ2.0で作りたいです。 すみませんが教えてください。 よろしくお願いします。
- ベストアンサー
- Flash
- 画像ギャラリー
画像ギャラリーを取り入れたく探してみたところこちらのURLのサンプルが近く試してみました。 http://www.monc.se/galleria/demo/demo_02.htm 問題なく動作はするのですが仕様の問題かクリックしないと拡大画像が表示されない状態なので 初めから指定の画像をもしくは以下のように最初に画像を表示している状態にしたいと思っております。 <ul> <li>画像1(これを拡大表示の状態に)</li> <li>画像2</li> </ul> カスタマイズしたくoptionを見てみたのですが全く英語もわからず日本語で説明している サイトもないか探してみましたがみつかりませんでした。 初めから特定の拡大画像を表示させるようにはどうすればいいでしょうか？宜しくお願い致します！
- ベストアンサー
- JavaScript
- jQueryの画像を使ったタブメニューについて
下記のサイトを参考にタブメニューを制作いたしました。 jQueryを使ったタブ（画像）による画面切り替え http://web.showjin.me/2011/05/jquery_tab_image.html 各コンテンツの中にリストタグやpタグなどで内容を記載すると うまくいくのですが、divタグを使用するとまったく表示されないようです。 divタグに style="display: none;"と読み込まれてしまいます。 各コンテンツの内容にjqueryを使用してサムネイルのアルバムを設置したいと 思っているので、divタグなどでも問題なく表示されるようにしたいと思っています。 scriptを修正して実現できる方法が分かる方がおられましたら お教え頂けないでしょうか？ どうぞ宜しくお願い致します。
- ベストアンサー
- JavaScript
- jQueryでスクロールボックスを・・・
添付画像のような縦の自動スライドショーを作ったのですがスクロールボックスのバーがそのままなのが非常に気になります。 そこで自動スライドと共にスクロールバーもそのイメージに合わせて自動スクロールさせたいのですがどうすればいいでしょうか？プラグイン、もしくはＪavaScriptの記述例を教えていただけると幸いです。宜しくお願いします。 【一部ソース】 ▼script <script type="text/javascript"> $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000, true); }); </script> ▼html <div id="featured"> <ul class="ui-tabs-nav"> <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"></li> <li class="ui-tabs-nav-item" id="nav-fragment-2"></li> <li class="ui-tabs-nav-item" id="nav-fragment-3"></li> ：繰り返し ： </ul> <div id="fragment-1" class="ui-tabs-panel" > <img src="img/no.jpg" alt="" width="250" /> <div class="info" > <h2></h2> </div> </div> ：繰り返し ： </div>
- ベストアンサー
- JavaScript
- androidの「ギャラリー」の非表示フォルダ
ギャラリーに表示したくないフォルダを作りたいと思っています。 １、ブラウザの設定で、 ダウンロードフォルダを「.nomedia」に指定しました。 ２、ブラウザから画像のダウンロードを行うと、 ギャラリーの中に「.nomedia」のフォルダが表示されてしまいます。 ３、ダウンロードした画像のサムネイルのみが表示されて、 「.nomedia」にある全部の画像が表示されるわけではないです。 ４、何らかの方法でメディアスキャンを実行して再読み込みすると、 非表示になるようです。 ブラウザからダウンロードした段階では やっぱり自動でサムネイルが作成されてしまうのでしょうか？ 直で「.nomedia」ではなく、手動で画像を移動するしかないのでしょうか？ よろしくお願い致します。
- 締切済み
- Android
- jQueryでセレクタに複数のIDを指定する方法
助けてください。 今jQueryでボタンを押すと画像を切り替えるものを作成しています。 画像を表示しているところは <div id="contents"> <div id="contentsleft"> <img src="./imgs/aaa1.jpg" alt="ホーム"> </div> </div> となっていて、ボタンを押す処理のところに jQuery(document).ready( function() { $("button#btn01").click(function(){ $("img#contentsleft").attr("src", "./imgs/aaa2.jpg"); }); としていますが画像が切り替わりません。 $("img#contentsleft")のところのセレクタが間違っているのでしょうか？ 指定方法のご教授をお願いいたします。
- ベストアンサー
- JavaScript
お礼
お返事ありがとうございます。 確かに探し方が悪いのか基本的に海外製のライブラリばかりですよね。 読む努力はしているのですが理解できるはずもなくサンプル通り以外の使い方がわからないという 状況に陥ります^^: ライブラリーのご紹介ありがとうございます。単純にフェードイン、フェードアウトの切り替えが したかったので一度チャレンジしてみたいと思います。