備忘録

備忘録:prettyPopinで開くポップアップページに画像を表示する場合の注意点

投稿日:2013年10月25日 更新日:

「iPad Air」「iPad Mini Retina」来月発売ですね。皆さんは購入されますか?私は「iPad Mini Retina」を在庫が潤沢になった頃に買う予定です。実はこのような仕事をしながらRetinaディスプレイモデルを所有していないので、もっぱらXCodeのシミュレータでの確認しかできていないので、そろそろ買おうかと思っています。

ということで本題

prettyPopinで開いたページに画像が入ることって有りますよねその際の注意点です。

  • 表示する画像サイズが非常に大きい場合(今回の例では1枚10MB以上の写真がありました)
  • <img>タグにサイズを指定できない場合
  • 開かれたポップアップウィンドウ内でスクロールをしたくない場合

上記のような条件でポップアップを開いた場合、ブラウザはイメージデータを全て取得できるまで表示するイメージデータの高さを取得することができません。prettyPopinでは自動的に開かれるポップアップウィンドウ内のコンテンツ全体の高さを取得して開く大きさを決めていますが、「回線の速度」、「PCの性能」、「表示するイメージの枚数」などにより、Javascriptの処理がページの高さを算出するまでにイメージデータを取得できない場合があります。

このような場合、prettyPopinは高さを算出する時点でのコンテンツ全体の高さを下に、開くウィンドウの高さを決定しますので、開かれたウィンドウの高さよりコンテンツの高さが高いため、ページ下部のコンテンツが表示できない状態が発生します。

ポップアップウィンドウに表示するイメージデータには高さを明示的に設定しましょう

今回の私の場合は「すでに大量のイメージデータがアップロードされていたため、表示データ用のサムネイルを再度作るのはことができない」ため、画面表示時に表示するイメージテータの高さを指定してGDを使い圧縮し表示することで対応しました。そもそもは初期設計時の要件定義漏れなので緊急的に対応しましたが、本来は要件定義時に画像アップロード時にサムネイル用のリサイズしたデータを作っておけば、こんなことにならなかったのですが・・・

GDを使った画像リサイズについてはまた今度書きたいと思います。

ad

ad

-備忘録
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

スパム対策 * Time limit is exhausted. Please reload the CAPTCHA.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

Mac版 Google日本語入力の環境設定:不具合

仕事用のPCが不調のため、OSを再インストールしました。 MacBook 2009LATEを使用中ですが、全てのソフトウェアを再インストールしTimeMachineのバックアップデータを戻す作業をして …

MAC OSX10.9 MavericksをMBAにクリーンインストール

MacBookAir late2010に最新のOS「Mavericks」をインストールしましたので、インストール手順を簡単に公開します。 インストール環境 MacBook Air Late 2010 …

PHP:ソケット通信サーバ・テスト用シミュレータの作成

久々にPHPでソケット通信アプリを開発してます。WEBシステムで管理ページを開発し、設定内容をDBではなくSocket通信でアプリケーションに渡すというものです。 通知先のアプリケーションは開発環境に …

備忘録:prettyPopinで開くポップアップが元のページより縦長の場合

久々の更新です、ご無沙汰しています。 とある案件で、ポップアップウィンドウを多用する物があったので 昔から使っているprettyPopinを使用して開発を行なっています。 開かれたポップアップが元のペ …

備忘録:jQuery-Datepickerの使い方

備忘録 いろいろな管理画面を開発している重宝する「Datepicker」ですが 過去のプロジェクトからコピペして新しいプロジェクトでも利用しています 過去のプロジェクトを開くのも面倒なので備忘録として …