• 締切済み
  • すぐに回答を!

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

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

共感・応援の気持ちを伝えよう!

  • 回答数1
  • 閲覧数1032
  • ありがとう数0

みんなの回答

  • 回答No.1
  • fujillin
  • ベストアンサー率61% (1594/2576)

>スライドショーの領域内でさらに拡大画像ができるようにしてほしいと言われ~ 『スライドショーの領域内で』だとすると、通常時がほぼ領域サイズに表示でしょうから、さらに拡大して部分拡大表示でスクロール移動のようなことがしたいのでしょうか? でも、 >モーダルウィンドウはthick.boxを使って表示させています。 (確認していませんが)thisckboxだと、概ねwindowサイズに近い拡大ではありませんでしたっけ? 一方で、(↑)の『スライドショーの領域内』はwindowサイズより小さいのでは? よくわかりませんが、thickbox風に拡大表示できればよいのであれば、ご提示のサイトのデモがそのようになっているので、もともとの機能に含まれているのではないかと思われます。  http://galleria.aino.se/ 右下の「PopoutImage」の機能か「fullscreen」のような動作では不足なのでしょうか? documentation、APIなどをざっと見てみると、(英語がわからないので、拾い読み程度ですが)  showLightbox()、hideLightbox()、.enterFullscreen()などなどのメソッドも用意されているようですし、 http://galleria.aino.se/docs/1.2/api/methods/#using-the-api  extend( [ options ] )などもそろっていて、拡張にも配慮してあるみたいなので、最悪の場合にはこのあたりを利用して拡張すればよさそう。 http://galleria.aino.se/docs/1.2/options/extend/

共感・感謝の気持ちを伝えよう!

関連するQ&A

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

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

  • ページ横スクロールでjQuery lightBox

    横に長いwebページを作っています。 ページの途中でjQuery lightBox plugin (http://leandrovieira.com/projects/jquery/lightbox/) を使って拡大画像を表示させたいのですが、 サムネイルをクリックすると、ページのはじめの方に拡大画像が表示されてしまいます。(拡大時の背景のオーバーレイもずれている) これを、サムネイルのあるページ上に表示させるようにしたいのですが、javascriptがよくわからないので、どのように修正したらよいか教えていただけないでしょうか。

  • 画像ギャラリー

    画像ギャラリーを取り入れたく探してみたところこちらのURLのサンプルが近く試してみました。 http://www.monc.se/galleria/demo/demo_02.htm 問題なく動作はするのですが仕様の問題かクリックしないと拡大画像が表示されない状態なので 初めから指定の画像をもしくは以下のように最初に画像を表示している状態にしたいと思っております。 <ul> <li>画像1(これを拡大表示の状態に)</li> <li>画像2</li> </ul> カスタマイズしたくoptionを見てみたのですが全く英語もわからず日本語で説明している サイトもないか探してみましたがみつかりませんでした。 初めから特定の拡大画像を表示させるようにはどうすればいいでしょうか?宜しくお願い致します!

  • 「jQuery」Lightboxのアニメーションを無くしたい

    フォトギャラリーのホームページを作っています。 サムネイルをクリックしたら、ページ上で写真が拡大表示され、 拡大写真の以外の部分がグレーになるような演出をしたく思っています。 つまりjQueryのLightboxのようにしたいのですが、 Lightboxの「写真を表示するごとに、画像幅に合わせて枠が広がり、 最後にクローズボタン部分が表示される」というアニメーションを無くしたいと思っています。 (シンプルに拡大画像がでてくるのみ、にしたい) このようなことは設定で可能でしょうか? ちなみに「Lightbox」では無く、「ThickBox」というものを使ってみたのですが、 これが理想の動きではあるものの、IE6ですと画像を開いたときに背景のページが 少しずれる、という不具合があります。 Lightboxの設定や他のライブラリ等ご存知でしたら教えていただけないでしょうか? 知識不足のため、説明が拙くすみません。。。 どうぞ宜しくお願いもうしあげます。

  • jQuery:マウスオーバーで画像が切り替わる

    下記のサイトのような事が実装できるjQueryプラグインを探しています。 http://www.sumitomo-rd-mansion.jp/shuto/shinjuku/private.html 実装したい事 ================================== 1)メイン画像の切り替えは 矢印をクリックするか サムネイルをマウスオーバーすると切り替わるようにしたい。 (スライドショーはなし) 2)メイン画像にはテキスト(説明文)も入れられる 3)メイン画像の下には、サムネイル画像も表示できる ================================== 参考になるサイト等、ご存知でしたら教えていただけば幸いです。

    • 締切済み
    • CSS
  • JQueryでサムネ付スライドショークロスフェード

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

  • jQueryスライドプラグイン

    jQueryスライドプラグイン FLASHを使用せずにjQueryのプラグインで以下のような表現は可能でしょうか? http://www.starcat.co.jp/ 以下が実現したいです。 ・メイン画像がフェードまたは、スライドで切り替わる ・メイン画像クリックで別のページへリンク ・サムネイルクリックでメイン画像が切り替わる ・ランダムで表示できる ・自動で遷移する。

  • メイン画像とサムネイル画像のスライドショー

    サムネイル付きのスライドショーのJavaScriptを探しているのですが、サムネイル画像がメイン画像の上にくるスライドショーはありますか? イメージを添付します。 http://black-flag.net/jquery/20111122-3597.html 上記のサイトとかでcssを使用してみたのですが、メイン画像の下にサムネイル画像がきてしまいます。 サムネイル画像をメインの画像の上にもっていくことはもしかしてできないのでしょうか。 よろしくお願いします。

  • jQuery等で背景をフル表示+スライドショー

    http://www.daichifive.com/ ↑のサイトのような感じに背景を画面サイズに合わせてフル表示にし、 サムネイル出して、クリックすれば、次の画像に切り替えたいと思っています。 画像は3枚で、3枚目の画像だけ、縦長になっているので、 背景が3枚目になったときだけ縦スクロールバーを付けて、 上から下まで見れるようにしたいです。 サムネイルを出して、次の画像に切り替えるくらいですと、 jQueryを探せば何かあると思うのですが、 3枚目だけ縦スクロールバーをつけることなどできるのでしょうか。 できるとすれば、どのjQueryを使って、どうゆうカスタマイズをすればできるのでしょうか? jQuery以外の方法でも、上記のような動きを実装できるやり方があれば ご教授いただけないでしょうか。 よろしくおねがい致します。

    • ベストアンサー
    • CSS
  • jquery-galleryviewのカスタマイズ・・・

    jquery-galleryviewをカスタマイズして自分のページに使用したいのですが、JavaScriptの知識に乏しく、どこをいじれば良いのかわかりません。 http://www.spaceforaname.com/jquery/galleryview 画像のサイズなどは変更できたのですが、 ・pointer ・next ・prev この画像だけがどこで変更させるのかが分からず困っています。 画像を置き換えても、サイズが固定されているようで、小さな画像に置き換えてもデフォルトの大きさに引き伸ばされます。 解説サイトやおわかりになる方、是非アドバイスお願いします><