- ベストアンサー
複数の自動スライドショーの設置方法
- 自動スライドショーを複数設置する方法を教えてください。
- 参考にしたサイトのコードを変更しても動かないです。
- 他の類似のスライドショーを探していますが、条件に合うものが見つかりません。
- みんなの回答 (3)
- 専門家の回答
関連するQ&A
- 同HTML内で複数のjQueryを設置する方法
複数のjQueryを使用し、 タブメニュータイプのものと自動スライドショータイプのを 同じHTML内にいれようとしていますが、 片方のみしか作動しません。 色々と探した結果、複数使う場合はちゃんとした記述方法があるということがわかったのですが、その方法が詳しくわかりません。 http://stacktrace.jp/jquery/with_other_lib.html こちらのサイトでは意味がわからず・・・ 使用しているものは以下です。 ---------------------------------------- <script type="text/javascript" src="js3/accordian.pack.js"></script> <script type="text/javascript" src="js2/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js2/jquery.galleryview-1.1.js"></script> <script type="text/javascript" src="js2/jquery.timers-1.1.2.js"></script> <script type="text/javascript" src="js2/jquery.easing.1.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#photos').galleryView({ filmstrip_size: 6, frame_width: 145, frame_height: 160, background_color: 'transparent', nav_theme: 'dark', border: 'none', show_captions:true, caption_text_color: 'black' }); }); </script> ---------------------------------------- タブメニューがaccordian.pack.js、 その下のすべてがスライドショーのものです。 スライドショーはこちらを参考にしてつくりました。 http://spaceforaname.com/filmstrip.html 本当に困っております。 どうかご回答お願い致します。
- ベストアンサー
- JavaScript
- jQuery GalleryViewスライドショー
http://spaceforaname.com/gallery-customized.html このスライドショーを使いたくて色々と試していますが(ローカル環境・IE8) 1) オーバーレイ部分に表示されるテキストの位置、大きさの設定方法が分かりません。 2) カーソルを画像に持っていった時にスライドショーがストップするハズなのですが止まりません。 3) 画面上部の矢印ボタン(←・→・↓)が表示されません。 4) JSに色々なバージョンがあり、どの組み合わせが最適なのか分かりません。 XP-Pro SP3,Dreamweaver8で製作しております。 どなたかお助けください。
- ベストアンサー
- JavaScript
- jQueryで簡易なスライドショーを作ったのですが
jQueryの練習に簡易なスライドショーを作ったのですが、画像を変えるごとに画面の一番上まで戻ってしまいます。以下にコードを載せますので、どなたかご教示いただければ幸いです。 $(function(){ var num = 0; $(".slideshow").click(function(){ $(this).fadeOut("500",function(){ var ptnum = (++num)%5 + 1; //5枚の画像をクリックで変える var ptname = "photos/pt_00" + ptnum + ".jpg"; $(this).attr("src",ptname); $(this).fadeIn("500"); }); }); }) HTMLの方は何の変哲もない <img src="photos/pt_001.jpg" class="slideshow" /> となっています。
- ベストアンサー
- JavaScript
- GalleryView 3.0の設置方法について
画像スライドさせるためのCSS、jqueryjsについての質問です。 私はCSS入門したてのド素人ですが、GalleryViewをどうしてもサイトに掲載したく頑張ってみたのですが、どうしてもうまくいきません。 GalleryViewのキーワードで検索してあらゆるサイトを見て回ったのですが、バージョンが古かったり、いまいち分かりずらく、設置稼働できませんでした。 本当に初歩的で申し訳ないのですが、ド素人でも、その通りやれば表示ができる!! というような分かりやすく日本語で説明されているサイトを探しております。 GalleryView3.0 http://spaceforaname.com/galleryview こちらのサイトで現時点(2011.04.04)GalleryView 3 Beta 3 をダウンロードできます。 同胞されている内容はcssとjsのフォルダです。 このフォルダをindexファイルと同じ階層にそのままアップして、README.txtに書かれているソースを記述してもうまくいきませんでした。その他、以下の過去質問の返答にあるようなリンク元も参考にイジってみたのですが、やはり作動しません。。。 http://okwave.jp/qa/q6229237.html 本当に困り果ててしまいました(´-∀-`;) どなたか、こんな馬鹿野郎ド素人でも分かりやすくご教授いただくか、同様のサイトがあれば参考サイトをご教授いただけましたら幸いです。 最悪、素人では難しいということでしたら、初心者向けのプラグインツールもしくはサンプルCSSなどがあれば、代替でも問題なしです。 結果として複数の画像が1画像づつ自動スクロールしてメインに表示され、下にサムネイルがあれば問題なしです。 本当に初歩的な質問になってしまいますが、宜しくお願いいいたします。
- ベストアンサー
- JavaScript
- フェードスライドショーを設置したい
JavaScript 初心者。 既存のホームページにスライドショーを設置したく勉強中です。 希望するスライドショートしては ・既存のページの中に設置。 ・ページを開けば自動で始まり(開始等ボタンなしで)ループする。 ・画像の切り替えがゆったりしたもの。 まずは設置してみようとサンプル等探した中 下記が希望したものに一番近く自分のホームページでも動かせたのですが http://miyakekobo.fc2web.com/photo_parts/cp_01.html フェードスライドショーに編集できますか? もし出来るなら、よろしければソースを教えていただけますか。 記述していただけるなら 許す限りの解説もしていただければありがたいのですが・・・ あつかましいお願いですがよろしくご教授ください。
- ベストアンサー
- JavaScript
- html内にスライドショーを複数設置
こんにちは、質問があります。 http://allabout.co.jp/gm/gc/417216/3/ ↑のサイトさんに載っているコードを参考に、スライドショーをhtml内に書きました。html内にスライドショーを複数設置をしたいので、#slideshow の部分を#slideshow2や#slideshow3にしたりしたのですが、スライドショーが#slideshow3の部分しか動きません。全てのスライドショーを同時に動かすにはどうしたらいいのでしょうか?当方初心者なので分からないのです。どなたか教えていただけるとうれしいです。 以下が書いたコードです。 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow img.active'); var $active = $('#slideshow2 img.active'); var $active = $('#slideshow3 img.active'); if ( $active.length == 0 ) $active = $('#slideshow,#slideshow2,#slideshow3 img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow,#slideshow2,#slideshow3 img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 2000 ); }); </script> <p id="slideshow"> <img src="img/slide1.jpg" alt="" /> <img src="img/slide2.jpg" alt=""/> <img src="img/slide3.jpg" class="active" /> </p> <p id="slideshow2"> <img src="img/slide4.jpg" alt="" /> <img src="img/slide5.jpg" alt=""/> <img src="img/slide6.jpg" class="active" /></p> <p id="slideshow3"> <img src="img/slide7.jpg" alt="" /> <img src="img/slide8.jpg" alt=""/> <img src="img/slide9.jpg" class="active" /></p> どなたか回答よろしくお願いいたします。
- 締切済み
- JavaScript
- 再開ボタンを連打するとずっとスライドショーが変
http://okwave.jp/qa/q9260560.html のつづき //停止した場合の再開ボタンのJS $('#js-play-btn').click(function() { startTimer(); }); 上記でスライドショーを再開することには成功したのですが 再開ボタンを連打するとずっとスライドショーが超高速で動き続けるという、BAGU?が起きます。 実務ではそこまで対処する必要はありますか? そこまでする人はふつういないので、このような場合は製作者側の問題でないといってもよいのでしょうか? もし連打をしてもおかしくならないような方法があれば教えてください。
- ベストアンサー
- JavaScript
- galleryviewのjavascriptについ
下記の画像の部分にどうしてもリンクを貼りたいのですが上手くいきません。ご教授願います。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>GalleryView - Default Demo</title> <!-- First, add jQuery (and jQuery UI if using custom easing or animation --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> <!-- Second, add the Timer and Easing plugins --> <script type="text/javascript" src="../js/jquery.timers-1.2.js"></script> <script type="text/javascript" src="../js/jquery.easing.1.3.js"></script> <!-- Third, add the GalleryView Javascript and CSS files --> <script type="text/javascript" src="../js/jquery.galleryview-3.0-dev.js"></script> <link type="text/css" rel="stylesheet" href="../css/jquery.galleryview-3.0-dev.css" /> <!-- Lastly, call the galleryView() function on your unordered list(s) --> <script type="text/javascript"> $(function(){ $('#myGallery').galleryView(); }); </script> </head> <body> <ul id="myGallery"> <li><a href="http://ariacompany-since2010.com/shop/products/list.php?category_id=47"><img src="http://www.spaceforaname.com/galleryview/img/photos/bp1.jpg" alt="Lone Tree Yellowstone" /></a> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp2.jpg" alt="Is He Still There?!" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp4.jpg" alt="Noni Nectar For Green Gecko" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp7.jpg" alt="Flight of an Eagle Owl" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp14.jpg" alt="Winter Lollipops" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp26.jpg" alt="Day of Youth" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp27.jpg" alt="Sunbathing Underwater" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp28.jpg" alt="Untitled" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp41.jpg" alt="New Orleans Streetcar" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp49.jpg" alt="By The Wind of Chance" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp52.jpg" alt="Fishing on the Cloud" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp53.jpg" alt="Blue Lagoon" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp54.jpg" alt="Time" /> </ul> <p>Please view the source of this page if you are having difficulties setting up GalleryView.</p> </body> </html>
- 締切済み
- JavaScript
- 横にスクロールするだけのスライドショーを探しています
こんにちは。 JSとかJQUERYなどを使ってフィルムのように横に流れるスライドショーを探しています。 うまく表現できないのですが、一枚ずつ表示して一枚ずつ横にスクロールするのではなく、回転寿司みたいに自動でゆっくりと画像が流れてゆくものが欲しいのですが、意外に見つからずに困っています。 このようなスライドショーを公開しているサイトさんをご存知でしたらお教えください。
- ベストアンサー
- JavaScript
- ウェブアルバム(スライドショー)を探しています。
友人間でホームページを作るにあたり、ホームページにスライドショーを掲載しようという案が出ました。 イメージとしては、 ・ホームページを閲覧すると写真が掲載されていて、その写真が自動的に変わっていく。 ・各々が写真を自由にアップロードでき、アップロードした写真が自動的にスライドショーに反映される。 サイトに登録して、そのIDとPWを各々が知っていればそこに自由に写真をアップロードでき、その画像をホームページに埋め込めて、なおかつスライドショー形式で自動的にに変わっていく。 このようなものをイメージしているのですが・・・何かありませんでしょうか? GoogleのPicasaを見つけたのですが、これは専用のソフトをPCに入れる必要があるのでしょうか? できればアップロードのみで行えるものがいいです。 ご存知の方おられましたら、是非お教えください。
- ベストアンサー
- ブログ
お礼
ご回答ありがとうございます。 ご丁寧に説明して下さったおかげで、 無事2つとも動くようになりました。 "transition" を timerLabel にするのを誤って解釈しており、" "の間にtimerLabelを入れたのが恐らく原因だと思います・・・。 photos3としてスライダーを増やしても無事動きました。 前回に引き続き、本当に本当にありがとうございます。 とても助かりました。 ありがとうございました!