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

前へ 次へ
このQ&Aのポイント
  • フォトギャラリーのホームページを作っています。サムネイルをクリックしたら、ページ上で写真が拡大表示され、拡大写真の以外の部分がグレーになるような演出をしたく思っています。
  • Lightboxの「写真を表示するごとに、画像幅に合わせて枠が広がり、最後にクローズボタン部分が表示される」というアニメーションを無くしたいと思っています。
  • 知識不足のため、説明が拙くすみません。。。どうぞ宜しくお願いもうしあげます。
回答を見る
  • ベストアンサー

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

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

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

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

完全にアニメーションを切るのはややこしそうですが、 jquery.lightbox-0.5.jsであれば、 37行目のcontainerResizeSpeedの値を０にするとそれっぽくはなりますね。

hrykyk
質問者

お礼

御礼が遅くなり大変申し訳ございません。 おっしゃるとおりにわからないまでも設定をいじっていたら それっぽい表示になりました。 どうもありがとうございました。

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

関連するQ&A

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

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

  • lightboxがなぜ嫌われるか

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

  • 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に詳しい方、方法をご存じの方がいらっしゃいましたら、教えていただけるとありがたいです。 よろしくお願いいたします。

  • wordpress内lightbox 画像階層

    コンフリクト対策でwordpress内包のjQuery(プラグイン)を使わないで普通のjQueryだけを使うように設定しました。 その後に jquery.lightbox-0.5.jsを入れましたが、 「close」や「next」やらの画像が入ったimagesフォルダをどこに置いていいのか分かりません。 wordpress内でなかったら、lightboxを使用するページと同階層というのは知っていて、 テーマ内のindex.phpと同階層にimagesフォルダ置いてみたり、 cssフォルダと同階層にimagesフォルダ置いてみたりしましたが 画像が表示されません。 jquery.lightbox-0.5.js自体は動作しています。 lightbox適用したい画像は固定ページ内にあるのですがwordpressもPHPも初心者故、 固定ページもどのファイルから書き出されているのかもよく分かっていません。 (index.phpとデータベースから書き出されている内容の組み合わせなのでしょうか？) ざっくりと書いた質問で分かりにくいとは思いますが、宜しくお願い致します。

    • ベストアンサー
    • PHP
  • jQuery LightBox Plugin動かず

    複数の画像をLightBoxで表示したくて http://shanabrian.com/web/library/jlightbox.php#option のページ参考にテストしてみました。紹介されてるダウンロードページからデータを取得し、 解凍後、css、images、jsディレクトリを適用するファイルと同じディレクトリに設置しました。 そしてJavaScriptおよびCSSをhead内にコピーし a要素にrel="lightbox"を追加 これで完了のはずですが、しかし動作しません。 画像のページが開いてしまいます。なぜ動かないのでしょうか？ <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>テスト</title> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> </head> <body> <a href="images/sample1.jpg" rel="lightbox"><img src="photos/image1.jpg" width="200" height="300"></a> <a href="images/sample2.jpg" rel="lightbox"><img src="photos/image2.jpg" width="200" height="300"></a> <a href="images/sample3.jpg" rel="lightbox"><img src="photos/image3.jpg" width="200" height="300"></a> </body> </html> お願いします。

  • Lightboxとjqueryについて

    零細企業で素人WEB担当をやっております。 Lightboxとjqueryの設置でアドバイスを頂きたく投稿させて頂きました。 よろしくお願い致します。 最近の流れをうけてソーシャルボタンを設置しようかと思い、下記URLの方法が簡単でしたので設置してみたところです。ソーシャルボタンは簡単に設置出来ましたが従来使用していたLightboxが動作しなくなってしまいました。 当然なのでしょうが、ソーシャルボタン用に記述したjava scriptの読み込み部分を削除するとLightboxは動作するようになります。同時に設置出来ない場合には地道に1ページずつでもボタンを設置していこうかとも考えておりますが効率が悪いので躊躇しております。 知識があれば簡単な事なのではないかと思いご相談させて頂きました。 何卒よろしくお願い致しますm(_ _)m ○ソーシャルボタンの設置方法 http://itra.jp/jquery_socialbutton_plugin/

  • Dreamweaver CS5.5のJQuery

    PC用のホームページを作りたいのですが、iPadでも見れるようにしたいです。 トップページやギャラリーページはjQueryで写真を動かしたいのですが、 Dreamweaver　CS5.5にはjQueryが使える仕様になっていると聞きました。 Adobeのホームページを見てみても詳しく書いていません。 iPhone用の小さいサイズのものではなく、PC用の大きいサイズでもjQueryで簡単に作れるのでしょうか？ jQueryをやったことがないのですが、このソフトで簡単にFlashのように写真を動かしたり、 サムネイルをクリックすると、写真が大きく表示されるようなギャラリーページが作れるのでしょうか？ どなたか、Dreamweaver CS5.5　について教えてください。 よろしくお願いします。

    • ベストアンサー
    • CSS
  • LightBoxなどで画像サイズが指定したい

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

  • LightBoxで

    LightBox系のスクリプトで起こる現象なのですが、 画像単体ではなくて、複数舞をギャラリーとして扱う時に 画像にマウスを重ねるとNEXTという表示が出て クリックすると次の画像に飛ぶ、ということができると思います。 そのような設定にしてある時、画像をクリックした時に リンクを選んだ時の線が出てしまいます。 画像半分をくりぬいた様な感じでとても気になります。 うまく表現できないのですが添付の画像のように半分のところで リンクの線が出てしまいます。 これがとても気になります。 私のIE8だけの現象でしょうか？ またでないようにする対処法ってあるでしょうか？ 公式のExampleでも同じ現象が出ます。 ttp://leandrovieira.com/projects/jquery/lightbox/

  • jquery lightboxが作動しません

    ホームページビルダー14で、趣味のホームページを作っています。 jquery lightbox0.5を下記サイトからダウンロードし、アップロードしてＨＴＭＬを組み込みました。 ダウンロードしたjquery lightbox0.5のサイトＵＲＬ http://www.css-lecture.com/log/javascript/012.html ホームページビルダー上の確認画面、及び、ローカル画面では、スムーズに作動するのですが、 サイト上にアップすると、上手くいきません。 サイトの背景は暗くなり、白い拡大画面は立ち上がるのですが、その白い画面の真ん中に×印がついていて、写真が掲載されません。 ホームページ作りは初心者なので、行き詰ってしまっています。 どなたかお解りの方、教えて頂けると幸いです。 お手数をおかけいたしますが、よろしくお願いいたします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する