• 締切済み

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

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

みんなの回答

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

>スライドショーの領域内でさらに拡大画像ができるようにしてほしいと言われ~ 『スライドショーの領域内で』だとすると、通常時がほぼ領域サイズに表示でしょうから、さらに拡大して部分拡大表示でスクロール移動のようなことがしたいのでしょうか? でも、 >モーダルウィンドウは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スライドプラグイン

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

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

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

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

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

  • JQueryを使ったオートスライドショーについて

    Webサイトを作っているのですが、トップページにフェード効果のあるスライドショーを自動切り替えしたいと思っております。 とりあえず今日JQueryをダウンロードしたのですが、JQueryだけではスライドショーの機能を付けるのは難しいのでしょうか? それともスライダー用のJQueryプラグインを使う必要があるのでしょうか? JQueryだけでスライドショーを実現したほうが良いのか、プラグインを使ってスライドショーを実現した方が良いのか、どちらが良いのでしょうか? 双方のメリットやデメリットがあれば教えて下さい。

  • 【jquery】自動再生するスライドショー

    jquery プラグインで、  ○自動再生するスライドショーで、  ○画像に対して、hover イベントで再生を一時停止できる  ○左右の方向ボタン(「<」「 >」 )で再生方向をコントロールできる ものを探してます。 自動再生の動きは、 http://logicbox.net/jquery/simplyscroll/ がベストなんですが、このプラグインは、自動再生モードでは、 方向をコントロールするボタンを表示できないのです。 上記の条件に合致するものを、誰かご存知ないでしょうか? あるいは、上記のプラグインで、自動再生しながら、左右の方向ボタンを表示し、 ボタンをクリック、もしくは hover することで、方向を反転させられるように するにはどうすればいいでしょうか。 詳しい方、よろしくお願いいたします。

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

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

  • 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, に設定し、自動で再生(スライド)しています。 ただ、スライドバーをクリックすると、自動再生が停止していまいます。 スライドバーをクリックしても、停止しないコード追加もしくは、削除箇所などをお教えいただけますでしょうか。 よろしくお願い致します。

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

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

    • ベストアンサー
    • CSS
  • jQuery:マウスオーバーで画像が切り替わる

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

    • 締切済み
    • CSS
  • スクロールスライドショー

    https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js を使って モニター横100%で画像のスライドショーを作りたいのですが、 高さは300pxくらいで、3枚表示され、マウス操作かボタンクリックで右や左の画像に代わっていく ご指導お願いいたします。

専門家に質問してみよう