*

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

公開日: 備忘録 , ,

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

ということで本題

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

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

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

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

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

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

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

ad

関連記事

jQuery tooltipの備忘録

Concrete5の外部フォームの記事は業務多忙の為、遅れています。期待している方がもしもいらっしゃ

記事を読む

jquery:autocompleteの改造

久々の更新です。個人的な備忘録なので、あしからず・・・(こうやったほうが、良いよ!!というご意見はど

記事を読む

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

MacBookAir late2010に最新のOS「Mavericks」をインストールしましたので、

記事を読む

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

久々にPHPでソケット通信アプリを開発してます。WEBシステムで管理ページを開発し、設定内容をDBで

記事を読む

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

仕事用のPCが不調のため、OSを再インストールしました。 MacBook 2009LATEを使

記事を読む

「event.layerX and event.layerY are ….」エラーについて

連投です。 開発中のシステムをGoogleChromeでチェックしていたところ、Develop

記事を読む

Eclipse(IDE)のインストールについて

PHP関連の開発をメインに行なっていますが、 開発環境のEclipseのインストールについて簡単に

記事を読む

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

サッカーワールドカップの組み合わせ抽選会速報なんて書いちゃいました。注目キーワードにあやかって

記事を読む

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

久々の更新です、ご無沙汰しています。 とある案件で、ポップアップウィンドウを多用する物があった

記事を読む

MAC OSX10.9 Mavericksをクリーンインストール・USBメモリ編

先日、Mac OSX10.9 MavericksをMBAにクリーンインストールを書きましたが、iMa

記事を読む

Message

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

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

ad

忙しときに限って、PCがこわれる・・・

久々の投稿 忙しいときに限って、PCが壊れるのは昔から・・・・

年末年始休業のお知らせ

平素は、弊社製品をご愛顧いただき、ありがとうございます。 誠に勝

年末年始休業のお知らせ

平素は、弊社製品をご愛顧いただき、ありがとうございます。 誠に勝

夏季休業のお知らせ

夏季休業のお知らせ 平素は、弊社製品をご愛顧いただき、ありがとう

臨時休業のお知らせ(3月30日〜4月1日)

平素は、弊社製品をご愛顧いただき、ありがとうございます。 誠に勝手な

→もっと見る

PAGE TOP ↑