FullSize:一個新的IMG標簽屬性(附帶jQuery實現)
“img標簽添加了一個新屬性么?”,看到標題你也許會驚奇的問。呵呵,千萬莫誤會,這只是一位國外Web設計師的主張而已。為了推銷他的想法,他建立了這個主題網站(你可以在這個頁面的下方簽名,表示支持),而且用Jquery插件模擬了它。他的這個想法真的很有意思,也很有意義。我這里對它的想法做個簡單翻譯,略表支持。
FullSize屬性是什么?
我們在網頁設計中,經常會使用這樣一種解決方案:當點擊頁面中的某否圖片時,使用Javascript/Ajax技術用彈出層等方式獲取這張圖片的原始圖片(或大尺寸圖片)。我們可以注意到,這在當前的網頁設計中,尤其是圖片展示站點的設計中被廣泛應用。既然這樣,為什么這項功能不能成為一個標準,為什么不是由瀏覽器實現而是讓設計師費盡心思去設計。所以我建議能夠在img標簽中添加一個fullsize屬性,可以用來指定”src”中圖片的大尺寸圖片,瀏覽器可以原生支持點擊圖片時彈出大尺寸的圖片。
我希望這樣一個提議能夠得到W3C組織的關注,在下一個html版本中的img標簽中添加fullsize屬性,從而使他成為一個標準。我認為這絕不僅是一個貌似好聽的主意,它將對Web設計師有很大的幫助。如果你有什么好的想法或更好的建議,可以在Fullsize Google Group中討論。
關于Fullsize屬性設想的一些問答
-為什么要添加Fullsize屬性,而不是用javascript實現?
Fullsize屬性是希望這樣一個常用功能能夠輕松實現。當我們想實現這個功能時,僅僅是記住在img標簽中加入fullsize屬性就可以了。當然,如果你不愿意使用fullsize屬性,你也可以自己用javascript實現。
-如果Javascript被禁用,fullsize屬性會不會失效?
我的建議是fullsize屬性可以得到瀏覽器的原生支持,所以它與javascript是否禁用是不相干的。
-我不需要瀏覽器加入這樣的功能,因為我對圖片的彈出樣式無法控制?
如果fullsize屬性可以加入到下個版本的html中,它也應當能得到css的支持。如果你不喜歡瀏覽器這樣去實現你也可以自己使用javascript實現。雖然能夠得到css的支持會更好些,但我認為它并不是十分必要。
模擬這一想法的jQuery插件
盡管這一想法目前還不能通過html實現,不過我創建了一個jquery插件可以實現它。因為目前img標簽中沒有fullsize屬性,我使用longdesc(不知道img中的longdesc屬性?了解一下)來代替它。longdesc是img標簽的合法屬性,它原本是用來指向一個圖片詳細描述的url。這款Jquery插件非常容易就可以上手的,而且它在Safari,Firefox,Chrome,IE8,IE7,IE6中都測試通過。
下載這款插件:Fullsize Jquery Plugin [大小:23.59 KB - 下載次數:125]
它的壓縮版本僅有8kb!注釋版本是12kb。如何使用它:
1. 下載插件后,引用插件包中的js和css文件(當然,在這之前你要引用jquery代碼文件),如下:
<script type="text/javascript" src="your_path_here/fullsize/jquery.fullsize.js"></script>
2. 為頁面中所有img標簽綁定fullsize功能:
3. 在html的img標簽中指定longdesc屬性,例如:
這款插件同時可以設定一些參數,例如彈出圖片是否有陰影,圖片彈出速度等等,詳細內容可以在作者網站找到
我這里做了一個例子,可以直觀的看一下它的效果。
例子的源代碼下載:Fullsize Plugin Example
留言列表