• 締切済み

lightbox風隠し写真の表示

今回初めてlightboxのような写真表示を使いたいと思っています。 ページに表示した複数枚の写真をトップ写真として、それをクリックして拡大表示させたとき、ページに表示されていない写真を一緒に見れるようにすることはできますか？ 例えば、ページにハワイ、アメリカ、イギリスの写真が1枚ずつ表示されていて、ハワイをクリック拡大したときに、他のハワイの写真も続きで見れるようにしたいのです。（１of5と表示されるようにする） 続きで表示する他のハワイ写真はページ上に表示したくありません。 どのようにすれば、上記のようにできるでしょうか。 使おうとしているのは、LiteboxかGreyBoxです。 よろしくおねがいします。

みんなの回答

  • s1g3ru
  • ベストアンサー率100% (3/3)
回答No.1

２枚目以降の写真を、CSSで display: none; にしておけばいいんじゃないでしょうか。

mutu560
質問者

お礼

返事が遅くなってすみません。 アドバイスありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

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

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

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

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

  • lightboxの拡大された写真にリンクを張りたい

    lightboxを探しているのですが 拡大されたときに写真の下に別ページへ飛ぶよう リンクを張りたいです。 リンクは写真ごとに個々のページへ飛ばしたいと考えています。 そのような機能つきのlightboxを検索したのですが見つけることができず 質問させていただくにいたりました。 また現在下記lightboxを使用していますので http://leandrovieira.com/projects/jquery/lightbox/ こちらを改造する形でもかまいません。 お心当たりの方がいらっしゃいましたら ご教示願います。

  • lightboxがなぜ嫌われるか

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

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

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

  • jQuery版のlightbox.jsについての質問です。

    jQuery版のlightbox.jsについての質問です。 配布元：http://leandrovieira.com/projects/jquery/lightbox/ お客さまから、1つの画像から複数の拡大画像にリンクさせたいという要望があって困っています。 a要素に「lightbox」というclassが指定されているとlightboxが動くようになっており、 お客様の方で下記のソースコードで一応実現できているようなのですが バリデータでエラーがあるのでもっと良いやり方はないか、というご要望です。 <a href="拡大画像1" class="lightox"><img src="縮小画像1"></a> <a href="拡大画像2" class="lightox"></a> <a href="拡大画像3" class="lightox"></a> 上記のソースで、縮小画像1をクリックすると拡大画像1に「next」が付いて次の拡大画像も表示出来るようになりますが、1つ目以外のa要素が当然空になるので文法上よくない状態です。 文法もおかしくなく、1つの縮小画像から複数の拡大画像を表示していくことは可能でしょうか。 JavaScriptに詳しい方、方法をご存じの方がいらっしゃいましたら、教えていただけるとありがたいです。 よろしくお願いいたします。

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

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

  • lightbox plus機能が上手く作動しません

    lightbox plus機能が上手く作動せず、困っています。 ホームページビルダー14で、趣味のホームページを作っています。 「lightbox plus」機能を導入したく、all aboutの下記サイトを参考にしてダウンロードし、resourceファイルを写真ファイルにアップロードして、説明に沿ってｈｔｍｌを組み込んでみました。 all about のページ：　http://allabout.co.jp/gm/gc/23975/ hard内に、下記をペーストしました。 <link rel="stylesheet" type="text/css" href="resource/lightbox.css" media="screen,tv"> <script type="text/javascript" charset="UTF-8" src="./resource/spica.js"></script> <script type="text/javascript" charset="UTF-8" src="./resource/lightbox_plus.js"></script> そして、拡大させたい画像は、以下の様にしました。 <a href="photo/goods/up1/1111.jpg" width="320" height="527" rel="lightbox"><img src="photo/goods/up/111.jpg" width="91" height="150"alt=""/></a> 上記の様に組み込んだら、元の小さな画像から、拡大画像を表示するまでは出来たのですが、どうしても拡大画像が別ページで立ち上がってしまいます。 また、別ページに立ち上がった画像をクリックしても、元のページには戻らず、ブラウザの戻るボタンを押さなければ戻りません。。。 ページ上で拡大画像が立ち上がり、画面をクリックすると元のページに戻る様に設定したいのですが、どうすれば良いのか分かりません。 ホームページ作りは始めたばかりなので、恥ずかしいほど素人です。 どなたかお解りの方がいらっしゃいましたら、お手数ですがよろしくお願いいたします。 専門用語は、只今勉強中なので、出来れば分かり易い言葉で教えて頂けると幸いです。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • FC2ブログでlightboxを利用して

    FC2ブログでlightboxを利用して 写真を表示したいと思い、悪戦苦闘しています。 Internet Explorer v.8 と Firefox では問題なく表示できるようになったのですが、 Internet Explorer v.6 では　lightboxによる写真表示はできますが、 [続きを読む] を表示しようとすると、エラーが出てしまいます。 URL : http://keyblogfc2.blog70.fc2.com/ どこを修正すればいいのか全く解りません。 どうすれば Internet Explorer v.6 でも続きが読めるようになるのか、 ご教示よろしくお願いします。

  • FireFoxでLightbox2の下画面がずれる

    いつもお世話になっています。 Lightbox2を使用してフォトギャラリーを作りました。 写真を並べてサムネイルをクリックすると上に写真が表示される ベーシックなタイプです。 IEでは問題ないのですが、FireFoxでLightbox2では、 上の写真が表示されると同時に下の画面が左に少しずれます。 上の写真を閉じるとまた元に戻ります。 他にページ内でスクリプトは使っていません。 <div id="container"></div> #container { margin: 0 auto;} で全体を囲っています。 お力添えをお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する