• ベストアンサー

Lightbox2以外の拡大方法

今、サイトでLightbox2を使っています 前に見かけたのですが同じページ内で 例えば ジャンル1○○… ジャンル2●●… の画像があった時 ジャンル1○○…の画像をクリックするとそのジャンルだけを ループして表示させているところがありまして、 それはどうやっているのかな? と思いました 今からもう少し踏み込んだ事もしてみたいので その様な拡大画像を表示する方法はどうしたら良いのか教えて下さい

質問者が選んだベストアンサー

  • ベストアンサー
  • celtis
  • ベストアンサー率70% (2274/3213)
回答No.1

Lightbox2には特定の画像をグループ化する機能があります。 data-lightbox属性にグループ名を追加すると、同じグループ名の画像をまとめることができるので試してみてください。 https://wind-mill.co.jp/iwashiblog/2016/08/lightbox/ https://haniwaman.com/lightbox/

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • Lightboxを用いても拡大されない

    現在、自分が作っているHPでLightboxを使おうとしているのですが、 拡大したい画像は表示されるのですが、クリックしても何も起こりません。 CSSファイルやJavascriptファイル、 Lightboxを利用したいhtmlファイルで修正すべき箇所はしたと思うのですが・・・。 またパスは絶対パスが推奨されているようですが相対パスでは動かないでしょうか? ちなみに私が利用しているブラウザはSleipnirです。 ぜひ回答をお願いします。

  • Lightboxの表示が遅いので非表示にしたいです。

    ご質問させて下さい。 しばらく前から、Lightboxを多様したサイトが多くなっています。 見た目は綺麗なのですが クリックしてから画像の拡大表示まで、数秒送れて表示されるため、 多くの画像を見る時は、不便になっています。 以前は、JavaScriptを切ってアクセスしていましたが、 他のプログラムにも影響するため、ベストとは言えませんでした。 そのため、Lightboxの表示(作用)のみを停止させる JavaScriptは作れないものでしょうか? 他に良い方法がありましたら、ご教授いただけると幸いです。 よろしくお願いいたします。

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

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

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

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

  • LightBox

    LightBoxで拡大画像を表示させています。 この時キャプションのフォントサイズや色を変更する事はできますか? また画像を囲んでいる外枠の角を角丸にする方法を いくつか探してみたのですが、Firefoxのみ対応だとか IEに対応していてもサイズ固定だとか・・・ 結構条件が限定される場合が多いようでした。 (そもそも、その方法を紹介している所自体あまり数は見つけられませんでした。) どこか参考になるページがあれば紹介していただければと思います。

  • lightboxがなぜ嫌われるか

    はじめまして。 自分はデザイン系の学生で、ポートフォリオサイトを持っています。このたび作品紹介のページのデザインを更新するにあたって、lightboxの導入を考えています。 ちなみに使用を考えているサンプルスクリプトは以下です。 http://www.dolem.com/lytebox/ しかし、ネット上で調べてみると「lightboxを多用してるのが嫌でページ訪問をやめた」など、lightboxを嫌ってる人がある程度いるようです。雰囲気としてはFlashのみで構築されたページ(しかもページ移動などが考慮されていない)を毛嫌いするのと同じように自分は感じたのですが、どうしてlightboxが嫌がられるのかいまいちわかりません。 自分は今までlightboxを使ったサイトを見てきましたが、特にストレスを感じたことも無いのです(とはいえ、プロがデザインしたものがほとんどですが)。 なぜ自分がLightboxを使うかというと、作品写真のサムネイルを並べ、それをLightboxで表示する、という方法を使いたいからです。サムネイルはページに10枚以内。サムネイルページには極力少ない文字情報でプロジェクト等の情報を掲載し、あとはスライドショー形式でLightboxを使いたいのです。レイアウト上、サムネイルとメイン画像を同時に表示するスペースは確保しずらいです。なので別窓ではないけどオーバーレイで元のレイアウトを無視して大きく画像を表示できるLightboxは適当な解決策なのです。 ちなみにページレイアウトは、[TOP]-[作品一覧]-[個々の作品のサムネイル] となる予定です。 lightboxが嫌われる理由、ご存知の方教えていただけますでしょうか。

  • LightBoxなどで画像サイズが指定したい

    PHPでコードを書いています。 画像をクリックすると、拡大表示されるようにしたいのでLightBox(JQuery版)で作りました。 ↓↓↓これ http://leandrovieira.com/projects/jquery/lightbox/ しかし、画像サイズが1MBを超えると画像の表示サイズが大きすぎて、 スクロールバーが出ます。 画像サイズをWindowサイズくらいにしたいのですが、 拡大表示される画像サイズをカスタマイズ出来るライブラリはないでしょういか。 そもそもの画像サイズを小さくするという方法もありますが、 今回はそれは抜きにして考えています。 LightBoxでなくてもいいのですが、他の名前がわからなくて、調べきれませんでした。

  • Lightbox Plusで

    http://serennz.sakura.ne.jp/toybox/lightbox/?ja こちらのものを設置して、動作までは何とかこぎつけました。 ところが一つ困ったことがあります。 画像をクリックして拡大表示したときに、下のところに説明として一文つけたいのです。 そうするためには、リンクタグのところに「title=""」を付け足すと 拡大した画像の下にそれが表示されるのですが、 このタグはオンマウスでも表示されてしまいますよね。 これがちょっと鬱陶しく感じるし、改行も付けているのでみっともないんです・・・。 例えば画像にオンマウスした時に<BR>山頂です!<BR> などとタグまでそのままポップアップしてしまうんです。 こうならないようにする方法ってないでしょうか?ご存知の方がいましたら助けてくださいm(__)m

  • lightboxの利用方法について

    画像拡大の仕方としてlightboxの存在を知り、本家サイトから関連ファイルをDLし、試しているのですが、cssなどの内容の意味やカスタマイズなどを知りたくて、検索で探したもののなかなかいいサイトが見つかりません。本家は英語だし、ということでわかりやすいサイトがありましたら教えてください。 それと、本家の手法だと、クリック後の拡大画像を閉じるとき、右下のcloseボタンを押すようになっていますが、大きな画像だとボタンの存在に知らない人には気がつきません。 ほかの使用例で拡大画像そのものをクリックすると閉じるのを見つけたのですが、このカスタマイズの仕方をご存じの方教えていただければと思います。 また閉じ方で瞬時ではなくフェイドアウトのようなことはできますか?

  • Lightboxのグループをループさせる。

    Lightbox 2を使用しているのですが、 グループに指定した画像をループさせることは可能でしょうか。 http://lokeshdhakar.com/projects/lightbox2/ 1つめの画像の「prev」をクリックで、最後の画像を表示、 最後の画像の「next」をクリックで1つ目の画像を表示させたいです。 javascriptは書かれていることはだいたいわかるのですが、 新規に自分で何かを作ったりカスタマイズしたりするほどの知識がありませんので、 具体的に教えて頂けると有難いです。 お手数ですが、ご存知の方宜しくお願いします。