2011年11月9日 星期三

依據圖片大小自動調整popup window大小

撰寫此篇的源由是目前負責的系統有提供使用者上傳圖片,在未撰寫上傳圖片自動依據長邊縮圖的功能下,只針對前端的img標籤設定寬度及高度,所以使用者在觀看網頁時實際上是下載圖片後再做縮小以達到縮圖效果,那為了讓使用者能觀看原本圖片的原貌則提供了點撃縮圖彈跳出原圖視窗,在這裡有二個需求
  1. popup window希望開啟後能置中
  2. popup window的大小希望能依據圖片實際大小縮放
以下針對部份程式碼做相關說明


當我們為img設定屬性width及height時我們無法取得圖片的實際寬度及高度,所以這裡需要做一些處理,處理步驟
  1. Step1 以二個變數暫存目前縮圖的寬度及高度。
  2. Step2 移除目前縮圖的寬度及高度,目的在取得實際圖片的寛度及高度,並利用二個全域變數暫存實際寬度及高度。
  3. Step3 將Step1取得的寬度及高度回存到圖片物件。
至於為什麼要利用$(window).load而不利用$(document).ready請參考文章最後的相關連結,至於視窗置中部份因為我們的視窗等於圖片的大小,所以只要利螢幕長寬減去實際圖片的長寬除2即可得知未來視窗要放置的位置。

參考

沒有留言:

張貼留言