備忘録

備忘録: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 OSX10.9 MavericksをMBAにクリーンインストール

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

iMac再インストール:Eclipseにテーマを適用

iMacの再インストールが終わりましたが 色々と環境設定が残っています。 今日は私が使っているIDEのEclipseにテーマを適用する方法の備忘録 Eclipseのエディターはデフォルトのままでは背景 …

備忘録:Facebookページで「いいね」がクリックされているかどうかを判定

あけましておめでとうございます。 本年もよろしくお願いいたします。 昨年は様々なことが有りました。良いことも、悪いことも・・・今年は悪いことがないように願いたいものです。 さて、年末年始休暇中にFac …

Stinger3カスタマイズ 一覧系ページのショートコードに関する不具合

ブログの構築を行っている途中に気がついた不具合を修正しました エントリ一覧系のページで本文の一部が表示されていますが、Wordpressのショートコードが消えずにそのまま表示されている不具合が有りま …

WordPressのダッシュボードでJetpackのアクセス解析グラフが表示されない

サッカーワールドカップの組み合わせ抽選会速報なんて書いちゃいました。注目キーワードにあやかって さてさて、数日前にWordpressのプラグインのJetpackのバージョンアップをしたら管理画面のダッ …