備忘録

備忘録: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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

備忘録:jQuery-Datepickerの使い方

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

MAC osx10.9 MavericksとiPhoneで地図情報を共有

osx10.9で「map」がmacにも追加されましたが、皆さんお使いですか? iPhoneをお持ちなら、PCで調べた情報を簡単にiPhoneと共有できます。 iPhoneの地図ソフトは「google …

jQuery tooltipの備忘録

Concrete5の外部フォームの記事は業務多忙の為、遅れています。期待している方がもしもいらっしゃったらばすみません・・・ 今日はjQueryのtooltipに関する備忘録です。 jQueryのto …

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

PHP関連の開発をメインに行なっていますが、 開発環境のEclipseのインストールについて簡単に手順を備忘録的に 1.Eclipseのダウンロード http://www.eclipse.org/do …

no image

備忘録:jQueryのlive-clickがiPadで効かない

ちょっと忙しく、ブロクが更新できていませんが jQueryを利用してiPadでのウェブアプリケーションを開発中です。 そこで起こったちょっとした不具合 jQueryでlive:clickを使用した際に …