分享一個比lightbox配置更方便的jQuery web2.0圖片顯示插件：Topup
日期：2011/11/12
Topup是一個使用非常簡單的javascript類庫用來使用web2.0的彈出方式展示圖片。這個類庫基于jQuery和jQuery UI以保證跨瀏覽器的兼容性。提供如下特性：
主要特性：
- 絕對免費，甚至對于商業使用也同樣免費
- 配置非常簡單，只需要包括一個include語句，沒有其它更多配置
- 使用Topup能保持你的HTML代碼簡單清晰，不需要添加多余的代碼
- 能夠顯示圖片，flash，電影(Quicktime, windows media和realplay),iframe, DOM元素和純HTML
- 可以和prototype一起使用
- 能夠使用Yahoo！YUI Compressor壓縮到47.6KB（包括JS, HTML和CSS）
- 可以使用CSS sprites來減少圖片請求，用來加快加載速度
- 支持多瀏覽器
- 非常棒的布局效果，動畫和變化
- 自動修改大小并且定位‘
- 可以創建分組
- 支持AJAX請求
- 開源，你可以自己修改Topup
- 更多其它特性
和其它的lightbox實現相比， Topup配置更簡單，不需要你配置復雜的HTML，CSS及其javascript。你只需要簡單將包含一個文件，就能實現蘋果類似的效果。
如何使用？
只需將topup的類庫加入head標簽即可，當然如果你需要下載到本地，也可以。
然后指定圖片出現的方式，你可以使用樣式表定義來設定，例如, top_up或者tu_ql，代碼如下：
<html>
<head>
<script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>
</head>
<body>
<a href="photos/1.jpg" class="top_up"><img src="thumbnails/1.jpg"/></a>
<a href="photos/2.jpg" class="tu_ql"><img src="thumbnails/2.jpg"/></a>
<a class="tu_iframe_800x600">Open Google</a>
</body>
</html>
歡迎訪問GBin1.com
浙公網安備 33010602011771號