- ベストアンサー
lightboxで複数サムネイル表示
lightboxのような動作で、ポップアップ画面の下に 複数のサムネイル画像を表示出来るスクリプトを探しています。 http://www.apple.com/jp/imac/design/ 上記のurlのギャラリーがほぼ理想なのですが それぞれの画像にキャプションを入れる必要があります。 lightbox系のスクリプトを探したのですが 探し方が悪いのか見つかりませんでした… そのようなスクリプトをご存じの方はお教えください。 よろしくお願いします。
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 ご質問をきちんと理解していませんで、失礼しました。 例示のサイトではprototypeを利用して実現しているみたいですね。 スライドショー関連のスクリプトは、それこそ山ほどあるようなので、丹念に探せばご希望のものに近いものがあるかもしれません。 ちょっとだけ探して見ましたが、そのまんまのものはありませんでした。サムネイル+スライドというものは数多く見つかりますので、これをそのままポップアプにするところだけ別に作るかすればよいのではないでしょうか？（一番簡単なのはiframeでポップアップかな？） ゼロから作らなくても、ポップアップのパッケージとリンクさせてもいいですけれど・・・ 一番近い機能を持っているものをベースに、手を加えて自分の希望のものにするのが手っ取り早いのではないでしょうか。大抵のパッケージはカスタマイズ可能になっていますし、その機能を利用しなくても組合せでも実現できそうですね。 jQueryやprototypeを利用しているものが多いようですので、追加するにしてもこの機能を利用して作成すれば、多少凝ったものでも比較的簡単にできそうです。 とりあえず、「サムネイル+スライド」で近イメージのものを・・・ http://www.link-log.net/slideshow/ http://www.skuare.net/2007/10/javascriptslideshow.html http://www.electricprism.com/aeron/slideshow/ http://opiefoto.com/articles/photoslider http://www.malsup.com/jquery/cycle/pager3.html
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
Lightboxそのものではまずいのでしょうか？（今はLightbox2みたいですが） http://www.huddletogether.com/projects/lightbox2/ 類似のものをいろいろ調べている方がいます。（15、6個あるようですね） http://www.goodpic.com/mt/archives2/2007/03/lightboxjs.html
お礼
ありがとうございます。 そちらのサイトは一応確認していたのですが、 普通のLightboxの仕組みではなく、アップルのサイトのように ポップアップした画面の下部にサムネイルがあり 他の画像を選択できる必要があります。 お教えいただいたURLにはその仕組みのスクリプトはなかったようです。 （見落としていたらごめんなさい…）
関連するQ&A
- Lightbox2でのキャプションについて
画像の拡大表示のために、Lightbox2を使用しております。 画像のキャプションとして、title属性内にHTMLで装飾した長い文章を入れています。 しかしLightboxのキャプションはtitle属性であるため、（当然ですが）サムネイル画像にマウスカーソルを置いたときにブラウザが表示するポップアップにおいて、キャプション用文章のHTMLタグまで表示されてしまってみっともないです。 出来ればtitle属性は本来の使い方にしておいて、Lightboxのキャプション専用の属性を新たに加える・・・というような感じにするには、どのように改造したら良いでしょうか？ ソースは以下のような感じです。 ●現状 <a href="/image/test.jpg" rel="lightbox" title="<h2>題名</h2><p>この写真はテストです。</p>"><img src="image/test_thumbnail.jpg"></a> ●理想（こんな感じに出来たらいいなぁというイメージです） <a href="/image/test.jpg" rel="lightbox" title="テスト画像" caption="<h2>題名</h2><p>この写真はテストです。</p>"><img src="image/test_thumbnail.jpg"></a> おそらくlightbox.jsのどこかをいじるのだと思いますが、試しに218行目の imageLink.title を imageLink.caption に書き換え、さらに223行目の anchor.title を anchor.caption に書き換えてみましたが、ダメでした。（JavaScriptの知識がゼロのため、まったく的外れなことをしているかもしれません） 他に何か良い方法はありますでしょうか？
- ベストアンサー
- JavaScript
- lightboxがなぜ嫌われるか
はじめまして。 自分はデザイン系の学生で、ポートフォリオサイトを持っています。このたび作品紹介のページのデザインを更新するにあたって、lightboxの導入を考えています。 ちなみに使用を考えているサンプルスクリプトは以下です。 http://www.dolem.com/lytebox/ しかし、ネット上で調べてみると「lightboxを多用してるのが嫌でページ訪問をやめた」など、lightboxを嫌ってる人がある程度いるようです。雰囲気としてはFlashのみで構築されたページ（しかもページ移動などが考慮されていない）を毛嫌いするのと同じように自分は感じたのですが、どうしてlightboxが嫌がられるのかいまいちわかりません。 自分は今までlightboxを使ったサイトを見てきましたが、特にストレスを感じたことも無いのです（とはいえ、プロがデザインしたものがほとんどですが）。 なぜ自分がLightboxを使うかというと、作品写真のサムネイルを並べ、それをLightboxで表示する、という方法を使いたいからです。サムネイルはページに１０枚以内。サムネイルページには極力少ない文字情報でプロジェクト等の情報を掲載し、あとはスライドショー形式でLightboxを使いたいのです。レイアウト上、サムネイルとメイン画像を同時に表示するスペースは確保しずらいです。なので別窓ではないけどオーバーレイで元のレイアウトを無視して大きく画像を表示できるLightboxは適当な解決策なのです。 ちなみにページレイアウトは、[TOP]-[作品一覧]-[個々の作品のサムネイル] となる予定です。 lightboxが嫌われる理由、ご存知の方教えていただけますでしょうか。
- ベストアンサー
- その他（カメラ・ビデオカメラ）
- インラインフレームを使って、lightboxを表示させたい
メインページ上にインラインフレームを使用して、写真のサムネイルを並べています。 このサムネイルをクリックするとlightboxで表示されるようにしたいのですが、上手くいきません。 メイン画像に表示されず、インラインフレーム内で、lightboxが動作せず、画像がリンクするだけです。 メインのHTML（main.html）のheadに下記の記述をし、 【main.html】 <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> インラインフレーム内（in.html）のサムネイルには下記を記述しています。 【in.html】 <a href="images/001.jpg" rel="lightbox" title="テスト"><img src="images/p01.jpg" border="0"></a> ちなみに、上記のタグをメインのHTMLに記述すると、ちゃんとlightboxは動きます。 インラインフレーム内だと、動かないのです。 ソースのどの部分に手を加えると、メインページ上に、表示されるようになるのでしょうか。 アドバイスお願い致します。
- ベストアンサー
- HTML
- LightBoxで
LightBox系のスクリプトで起こる現象なのですが、 画像単体ではなくて、複数舞をギャラリーとして扱う時に 画像にマウスを重ねるとNEXTという表示が出て クリックすると次の画像に飛ぶ、ということができると思います。 そのような設定にしてある時、画像をクリックした時に リンクを選んだ時の線が出てしまいます。 画像半分をくりぬいた様な感じでとても気になります。 うまく表現できないのですが添付の画像のように半分のところで リンクの線が出てしまいます。 これがとても気になります。 私のIE8だけの現象でしょうか？ またでないようにする対処法ってあるでしょうか？ 公式のExampleでも同じ現象が出ます。 ttp://leandrovieira.com/projects/jquery/lightbox/
- ベストアンサー
- JavaScript
- map とlightbox
以下のようにグーグルマップのように地図上のマークをクリックするとlightboxで画像がでるように したんですが機能しません。この組み合わせはだめなのでしょうか？ 或いは他の方法があるんでしょうか？ 出来ればマークを触れると画像がポップアップする方がいいのですが。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> <div><img src="images/map.png" alt="" usemap="#map" border="0"/></div> <div id="gallery"> <map name="map"> <area href="images/jtb.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();" target="_blank" shape="rect" coords="193,399,245,423" /> </map> </div>
- ベストアンサー
- JavaScript
- 「jQuery」Lightboxのアニメーションを無くしたい
フォトギャラリーのホームページを作っています。 サムネイルをクリックしたら、ページ上で写真が拡大表示され、 拡大写真の以外の部分がグレーになるような演出をしたく思っています。 つまりjQueryのLightboxのようにしたいのですが、 Lightboxの「写真を表示するごとに、画像幅に合わせて枠が広がり、 最後にクローズボタン部分が表示される」というアニメーションを無くしたいと思っています。 （シンプルに拡大画像がでてくるのみ、にしたい） このようなことは設定で可能でしょうか？ ちなみに「Lightbox」では無く、「ThickBox」というものを使ってみたのですが、 これが理想の動きではあるものの、IE６ですと画像を開いたときに背景のページが 少しずれる、という不具合があります。 Lightboxの設定や他のライブラリ等ご存知でしたら教えていただけないでしょうか？ 知識不足のため、説明が拙くすみません。。。 どうぞ宜しくお願いもうしあげます。
- ベストアンサー
- JavaScript
- lightboxの設置
<html lang="ja"> <head> <link href="css/lightbox.css" rel="stylesheet" media="all" type="text/css" /> <script src="jquery-3.1.1.min.js" type="text/javascript"></script> <meta charset="UTF-8"> <title></title> </head> <body><a href="img/bb123.jpg" data-lightbox="group" data-title="S001"><img src="img/bb123.jpg" alt="" width="256" /></a> <script src="css/lightbox.js" type="text/javascript"></script> <script> lightbox.option({ 'fitImagesInViewport' : true, 'wrapAround': false }) </script> </body> </html> とりあえずテストで、lightbox2の設置をしようとしているのですが、 サイトに書いてあるのと同じように、入力してみたのですが、 サムネイル画像が、プレビュー機能で拡大して見れるようにしたいのですが、 lightbox２が機能してくれません。 http://www.oikawa-sekkei.com/web/design/js/lightbox_v2_8_1.html 因みに、jqueryは、バージョンが解らないので最新版をダウンロードして使っています。 ご回答お願いします。
- 締切済み
- その他（プログラミング・開発）
- 複数スクリプトの読み込みでlightboxが動作しません
MT4.1でサイトを構築し、カレンダー、サイト内検索、画像表示（lightbox）をprototype.jsを用いたスクリプトを読み込む形で動かそうとしているのですが、画像表示（lightbox（最新版））のみを読み込ませた場合は動作するのですが、三種類とも読み込ませた場合画像表示（lightbox）が正常に動作せず、拡大画像のページに移動してしまいます。 ヘッダ内に組み込んでいるソースは下記となります。 --------------------------------------------------------- <!-- カレンダー表示 --> <script type="text/javascript" src="<$MTBlogURL$>_ajax/calendar/prototype.js"></script> <script type="text/javascript" src="<$MTBlogURL$>_ajax/calendar/ajaxCalendar.js"></script> <script type="text/javascript" src="<$MTBlogURL$>_ajax/calendar/dayChecker.js"></script> <!-- カレンダー表示 --> <!-- lightbox --> <link rel="stylesheet" href="<$MTBlogURL$>_ajax/lightbox/css/lightbox.css" type="text/css" media="screen" /> <script src="<$MTBlogURL$>_ajax/lightbox/js/prototype.js" type="text/javascript"></script> <script src="<$MTBlogURL$>_ajax/lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="<$MTBlogURL$>_ajax/lightbox/js/lightbox.js" type="text/javascript"></script> <!-- lightbox --> <!-- 検索窓処理 --> <script type="text/javascript" src="<$MTBlogURL$>_ajax/search/js/prototype.js"></script> <script type="text/javascript" src="<$MTBlogURL$>_ajax/search/js/blog_ajax_json_search.js"></script> <!-- 検索窓処理 --> --------------------------------------------------------- 画像表示（lightbox）のみにすると動作するので、他のスクリプトと衝突しているのだとは思いますが読み込みの順番などを変更しても効果がありませんでした。 解決策をご存知の方、ご教授をお願いいたします。
- 締切済み
- JavaScript
- アメブロでのlightbox設置について
アメブロでのlightbox設置について教えてくださいませ。 アメブロにjQuery版のlightboxを設置したいと思い、下記の参考サイトさまの手順とおりに設定したのですが、画像がいつまでも読み込み中になりうまく表示されません。 http://ameblo.jp/new-bulue9/entry-10487238040.html 私が行った手順としては １：jQuery lightBox plugin 0.5をダウンロードし、フォルダ名を「Lightboxj5」に変更したのちレンタルサーバーにアップロード。 ２：下記プラグインの「ホームページのURL/」をレンタルサーバーのＵＲＬに書き換えて保存。 <!--■ jQuery Lightbox 5.0 ■--> <head> <link href="ホームページのURL/Lightboxj5/css/jquery.lightbox-0.5.css" type="text/css" rel="stylesheet" media="screen" /> <script src="ホームページのURL/Lightboxj5/js/jquery.js" type="text/javascript"></script> <script src="ホームページのURL/Lightboxj5/js/jquery.lightbox-0.5.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('a[rel*=lightbox]').lightBox({ overlayBgColor:'#000009', overlayOpacity:0.6, imageLoading:'ホームページのURL/Lightboxj5/images/lightbox-ico-loading.gif', imageBtnClose:'ホームページのURL/Lightboxj5/images/lightbox-btn-close.gif', imageBtnPrev:'ホームページのURL/Lightboxj5/images/lightbox-btn-prev.gif', imageBtnNext:'ホームページのURL/Lightboxj5/images/lightbox-btn-next.gif', containerResizeSpeed:350, txtImage:'画像：', txtOf:'／' }); }); </script> </head> <!--■■■■■■■■■--> ３：「ブログを書く」段階で画像にで指示されたとおりrel="lightbox"を a タグの最後に記述。 <a href="http://stat.ameba.jp/user_images/20100221/22/new … rel="lightbox"><img src="http://stat.ameba.jp/user_images/20100221/22/new … /></a> 以上です。他のプラグインとバッティングしている可能性も考え他をすべて削除して起動してみましたが、これも駄目でした。 稚拙な文章でわかりつらいかとは思いますが何卒お知恵をお貸しくださいませ。
- ベストアンサー
- ブログ
- lightbox2をiframeから外に表示したい
lightbox2を iframe内で使っています。 iframe内のサムネイル画像をクリックした時、画面全体に表示できるようにしたいのですが、良く分かりません。 自分でも調べて「http://bontetsu.jp/?p=41」にそれらしい物を見付けたのですが、 iframe内のサムネイルは左のフレームによって変化するのでこちらの方法では無理だと思うのですが・・・。 ご存知の方いらっしゃいましたら宜しくお願い致します。
- ベストアンサー
- JavaScript
お礼
アップルのオリジナル？でそのままのスクリプトは難しいですよね。 ギャラリーサンプルをたくさんお教えいただいたので 既存のjQueryやprototypeを使ったスクリプトと組み合わせて 近いイメージの物を制作していきたいと思います。 大変参考になりました。ありがとうございます！