• 締切済み

■jQuery「Galleria」のカスタマイズ

どうぞ宜しくお願いいたします。 jQueryプラグインの「Galleria」を使用して、 写真のスライドショーを作成しています。 Galleria http://galleria.io/ ※下記からダウンロードできる、無料のものを使用しています http://galleria.io/download/ 自動でスライドショーが流れるように Galleriaのオプションを「autoplay: 6000」と秒数を設定しているのですが、 最後の写真が表示された後、最初の写真に戻ってしまいます。 これを、最後の写真が表示された後はループさせず、 スライドショーを停止させたいのです。 もしかしたらGalleriaにはそのようなオプションが無いかもしれないのですが、 カスタマイズでループさせないようにできましたら どのように変更すれば良いか教えていただきたいです。 よろしくお願いいたします。

みんなの回答

  • ONEONE
  • ベストアンサー率48% (279/575)
回答No.1

スクリプトを読み込んだ後に下記のコードを読み込めばいいみたいです。 var gallery = Galleria.get(0); var totalImages = parseInt(gallery.$('total').html()); gallery.bind("loadfinish", function(e) { if (e.index == 0 || e.index == totalImages - 1) { gallery.pause(); } }); http://stackoverflow.com/questions/8500950/stop-galleria-from-looping-slideshow

pencil2013
質問者

お礼

ありがとうございます。 参考になりました。

関連するQ&A

  • jQueryのスライドショーのカスタマイズについて

    仕事であるサイトを作っているのですが、製品ページの所で製品画像をスライドショーにして実装しようと思っており、jQueryで理想に近いプラグイン(galleriaというものです)を発見したのですが、スライドショーの領域内でさらに拡大画像ができるようにしてほしいと言われ自分でカスタマイズしようとやってみましたがうまくできません。 皆様のお力をお貸しいただけないでしょうか。 ■galleriaのプラグインを使ってカスタマイズする内容 galleriaのサイトからファイルをダウンロードし(http://galleria.aino.se/download/)メイン画像(サムネイルの上にある画像)内、もしくは外に「拡大画像」というボタンを設置し、クリックするとモーダルウィンドウで拡大画像が表示されるようにしたい。 ■自分でうまくできないところ このプラグインはサムネイル、もしくは左右にある矢印をクリックすると画像が変わる仕様になっており、「拡大画像」ボタンに今表示されているメイン画像を判別させて拡大画像を表示させる処理が必要となると思うのですが、うまくいきません。 モーダルウィンドウはthick.box(http://jquery.com/demo/thickbox/)を使って表示させています。 その他に、もっと簡単にできる方法など教えていただければ助かります。 よろしくお願いいたします。

  • jQuery スライド(カルーセル)のカスタマイズ

    jQuery スライド(カルーセル)のカスタマイズで困っています。 http://slidesjs.com/ こちらのサイトのJqueryライブラリを使って、 常時3つ表示のスライドギャラリー(カルーセル)を作成したいと思っています。 サンプルの中に3つ表示のタイプが含まれているのですが、(/Slides/examples/Carousel/) スライドも3つ同時に動きます。この部分を1つずつ動かしたいと思いカスタマイズしていますが、 うまくいきません。 要件としては、下記です。 ・同時に3つ表示させたい ・スライドは1つずつ動かしたい ・きれいにループさせたい(最後と最初のアイテムをスムースに接続) ・「Prev」「Next」「pagination」はそのまま活かしたい ・「pagination」のボタンは現状、1つに対して3つのアイテムがスライドするが、1つに対して1つにしたい。 別のライブラリをベースにしたほうがよいでしょうか。 何分素人なので、どなたかご教授くださいませ。よろしくお願いします。

  • jQueryでスライドショー作成(無限ループ)

    jQueryでスライドショーを作成したいです。 仕様としては、進むボタンと戻るボタンがあって、どちらかを押すと、画像が前または後ろにスライドして変わります。 ここまではできるんですが、以下のような無限にループさせることができません。 ・最後まで行ったときに、進むボタンを押すと、最初の画像が右から現れてスライドし、最初に戻る。 ・最初の画像のときに戻るボタンを押すと、最後の画像が左から現れてスライドし、現在地が最後の画像になる。 具体的には、下記サイトのような挙動にしたいです。 http://www.slidesjs.com/ このようなスライドショーの無限ループは、どのように考えれば実現できるのか、どなたかご教授いただけないでしょうか?

  • jQueryのプラグイン「Skitter」について

    下記サイトで配布されているjQueryのプラグイン「Skitter」について、 質問させて下さい。 http://thiagosf.net/projects/jquery/skitter/ スライドショー用にjQueryの良いプラグインはないかと探して見つけたのが、 このSkitterで、実装も簡単だしアニメーションのエフェクトも多彩で、お気に入りです。 質問は、スライドショーが無限にループしてしまうのを、 最後の画像がきたところで、ストップさせる、 というカスタマイズが出来ないかという事です。 ファイルの中身を見たり、検索エンジンも使ってみましたが、 答えが見つけられず、思い切って質問してみました。 わかる方いらっしゃいましたら、ぜひお教え願いたいと思ってます。 よろしくお願いしますm(_ _)m

  • jQuery Cycle Pluginについて

    jQuery Cycle Plugin(http://jquery.malsup.com/cycle/)を使用して、8枚の画像を次々と表示するスライドショーを実装しました。 1枚目から7枚目の間は「Skip」ボタンを表示してクリックしたら、最後の画像が表示されてスライドが停止するといったような動きは、jQuery Cycle Pluginで実現することは可能でしょうか。 知っている方がいらっしゃいましたら何かヒントを頂けませんでしょうか。 どうぞ宜しくお願いいたします。

  • JQueryのスライドショーを停止させたい

    サイトの背景画像のスライドショーを「VEGAS BACKGROUND JQUERY PLUGIN」を利用して行いたいのですが、スライドショーを1回で停止(ループさせない)ようにしたいのです。 どこをいじってもうまくいかなく困っています。 お教えいただけないでしょうか? http://vegas.jaysalvat.com/ (SLIDE SHOWを利用しています。) よろしくおねがいします。

  • jQueryでスライドショーを作っているのですが

    jQueryを使用し、下記URLの様な画像がスライドショーになるサイトを製作しているのですが、 (http://maxb.net/scripts/jbgallery-2.0/docs/nomenu.html) JavaScrip初心者の為、スライドショーを最後の画像でストップするやり方が分からず 困っております。 スライドショーにはjbgallery-2.0.jsといファイルを使用しております。 (ファイルを製作された方のサイトはこちら:http://maxb.net/scripts/jbgallery-2.0/) スライドショーが最後の一枚でストップする方法をおわかりの方がいらっしゃいましたら、 ぜひ教えていただきたいと思っております。 ご教授のほど、何卒よろしくお願いいたします。

  • JQueryでサムネ付スライドショークロスフェード

    JQueryでクリックを使用せず、自動クロスフェードのサムネイル付きスライドショー&マウスオーバーでもクロスフェードで切り替わるようにするためにはどうすればよいでしょうか? 更にはスライドショーにキャプションがつけられたら最高です。 スライドショーの幅はwidth: 354px; height: 280px;、サムネイルはその下に縦3つ、横3つの計9つ配置します。 スライドショーは自動フォロスフェードによるループ、またサムネイルをマウスオーバーでもその画像にクロスフェードイン、その際スライドショー内に表示されている&マウスオーバーされているサムネイルの画像は罫で仕切るか、半透明がクリアに表示されるといった処理を考えております。 恥ずかしながら調べても分からなかったので、皆さまの知識を拝借したく投稿させて頂きました。 恐れ入りますが、何卒ご助言下さいますよう、よろしくお願い致します。

  • jQueryスライダーの止め方

    jQuery Destaque Plugin http://globocom.github.io/destaque/ こちらのサイトのパララックススライダーを使おうと考えていますが、 デフォルトでスライドをストップさせる方法がわかりません。 どなたかご教授下さいますでしょうか。 また、このプラグインを使って ページネーションをつけた例がございますが、 http://www.nxworld.net/sample/jquery-destaque/ 「3」「4」を表示中に「1」「2」を押すと、 スライドが左から右に遷移しますが、 この方向を固定で右から左へ動かすことは可能でしょうか? こちらもわかる方がいらっしゃいましたら、是非宜しくお願い致します。

  • JQueryを使用して画像をゆっくり表示させる

    JQueryを使用して画像をゆっくり表示させる ご覧いただきましてありがとうございます。 今回新規でHPを作るにあたり、トップの画像をゆっくりと表示させようと思っています。 そういった画像はFlashで良く見るのですが、Flashを使わずJQueryで作成しようと思っています。 ただ、逆引きのサイトなどを見てもボランクリックで表示やスライドショーの表示方法は載っているのですが 私の理想としている風のはなかなか見つけられません。 詳しい方、ご教授いただけると幸いです。 http://www.wasedasai.net/about このような風に表示するのが理想です。 ソースを見るとこのサイトもJQueryを使用しているみたいなのですが・・・