10款最佳CSS/jQuery開源圖片說明

Web開發者在HTML當中使用圖片說明已經有很長的歷史了，這涉及到典型的<figure>和<figcaption>圖形元素，再附上一些額外的CSS樣式。在大的開源項目中我們甚至能找到更多更大的用在構建圖片說明上的插件和啟動器腳本的案例。

本文收集了關于制作HTML圖片說明所要的CSS3和jQuery的解決方案列表，以幫助開發者各取所需，創建更加優美的圖片說明代碼庫。

一、CSS2/CSS3

構建帶有CSS效果的個人圖片說明會很難，有時候你不得不求助于瀏覽器hacks或借助一些額外的語法。這些方案是很好的案例，能夠提供建立在CSS2屬性和CSS3過渡動畫基礎上的圖片說明效果。

1. Label.CSS

Label.CSS是CSS3圖片標題庫里最好的一個，它允許在被說明的圖片上添加類名稱，之后可以在HTML里更新。你可以把標題添加到圖片上的任何地方。添加Label.CSS庫可以讓鼠標懸停在圖片上時隱藏說明變得輕而易舉。這項技術很不錯，因為有時候你可能希望圖片說明在網頁上以靜態文本的形式出現，而有的時候隱藏的動畫效果更重要的。

2. Hongkiat圖片標題

關于Hongkiat，我最喜歡的就是各種圖片在使用不同的CSS3技術后顯示的圖片說明。它們都將被成對的放入一個大的圖片標題庫，你還可以挑選出你最喜歡的動畫來打造一個嶄新的界面。代碼都已經通過新的瀏覽器測試并且支持所有的CSS3前綴。

不過最大的問題在于一些用戶所使用的腳本不遵循<figure>和<figcaption> HTML結構。所有的標題內容都存放在div的范圍內。很明顯，標題內容被完美的呈現出來，但不會標記內容的確切類型。它的優點是只需5-10分鐘來更新圖形元素就能讓它在更格式化的結構中工作。點擊現場演示來觀察這些圖片標題的運行過程。

3. 動畫的HTML5標題

來自Coalmarch的HTML5 figcaption示例是一個漂亮簡單的CSS3圖片說明教程。在短短幾分鐘之內完成幾個步驟就可以得到一個炫耀的布局來展示隱藏的懸停字幕。腳本自身含有少量的jQuery，但它完全可以取代jQuery并使用CSS3圖片過渡效果。

4. 幻燈片圖片標題

CSS-Tricks博客在Web設計社區有很好的名聲，他們制作的滑動圖像說明教程已經在大量的瀏覽器上完美無瑕的測試過了。我對它的演示印象深刻，倒不僅僅是因為它的效果完美，還有它標準的HTML語法。<figure>和<figcaption>圖形元素不僅僅意味著好的方法，還可以幫助瀏覽器區分不同頁面元素之間的內容，點擊現場演示來觀察它的效果。

二、jQuery

使用jQuery的最大好處就是獲得很高的瀏覽器支持率。任何使用JavaScript的人都應該像檢查瀏覽器一樣查看圖片標題，CSS3使用起來更簡單因為開發人員沒有在其中加入腳本語言。這些方案都很重要，對前端體驗有極大地促成作用。

1. Caption.js

不久前發現Caption.js，此庫已經出色的為Web開發者提供優秀的來源。該腳本以圖片為目標建立在jQuery選擇器上并且能夠自動加入<figure>和<figcaption>圖形元素。這是非常重要的，因為最后頁的渲染將會伴隨著一些CSS的定位而被適當顯示。Caption.js是開源的，可免費從Github下載。

2. Capty

Capty插件和Caption.js的不同之處在于Capty插件的默認設置將會隱藏你的初始文本。當用戶將鼠標懸停在圖片上的時候，圖片會上滑或淡入標題，一旦移開鼠標時候它又會重新隱藏。這非常棒，因為你真的可以選擇讓這個標題固定或者隱藏，添加無數個插件選項。點擊Capty現場演示參觀更多的案例，同時提供可以連接到你自己網頁的代碼片段。

3. jQuery.imageCaption

現在我可以說jQuery.imageCaption是開發者運行CMS引擎的最完美解決方式，這個插件是超級簡單為客戶定制的，并能快速撤銷建立在圖像alt文本上的標題。因此這將呈現出<figure>和<figcaption>圖形元素，這對SEO大有裨益。

通過調用函數imageCaption()你不需要傳輸任何參數到調用程序里。這仍將適當地呈現在頁面上，還可以將此應用到任何WordPress博文當中。同樣任何等級添加到img元素上將轉移到現有的<figure>元素上，這意味著你有更多的控制經過CSS。

4. jQuery.caption

jQuery.caption 是另一個帶有簡單初始的解決方案。jQuery插件里的許多插件都是即插即用類型的，你只需要針對所有有標題的圖片啟動功能即可。jQuery.caption插件將自動執行<figure>和<figcaption>圖形元素，再加上您可自定義的標題文本和HTML元素。該項目的Github頁詳細地介紹了您可能想要使用的各個選項。

5. Captionate

Captionate是由North Krimsly 開發的一個開源項目，目的是為了在各種CMS引擎中使用。你可以找到在你自己的網站中執行Captionate程序的教程指南。

基本上編寫HTML5 img元素與類.caption將會被jQuery 腳本接收到，然后alt屬性文本被轉入figcaption元素，并寫入HTML。瀏覽示例頁面你可以看到Captionate的語法和其他解決方案相比起來是相當簡約的。

6. HCaptions

這個jQuery插件是為處理所有的標題內容而開發的，它可以轉換為HTML代碼。點擊現場演示頁，你將看到一個美妙的樣本收藏。同樣，各個選項允許你控制每個標題的速度和定位。有一些更好的解決方案僅用于管理HTML圖像，但HCaptions插件的確提供一個很棒的用途，專門為其他標準網頁元素添加標題。