jQuery Gallery Plugin在Asp.Net中使用
推薦一個簡單易用的Gallery插件：jQuery Gallery Plugin
下面是在Asp.Net開發中應用
示例截圖：
-------------------------------------------------------------------------------風騷分隔線-----------------------------------------------------------------------------------------------
| 第一步：認識一下這個插屬性及事件 |
jQuery Gallery Plugin介紹網站：
http://www.mudaimemo.com/p/gallery/
圖片切換的效果可以結合 jQuery Easing Plugin：
http://gsgd.co.uk/sandbox/jquery/easing/
這里主要介紹一個jQuery Gallery Plugin的參數和事件
| 名稱 | 介紹 | 類型 | 默認值 |
| 屬性 | |||
| barClass | 縮放列表的樣式名 | string | 'galleryBar' |
| barPosition | 縮放列表的位置（可填：‘top’ 或者 ‘buttom’） | string | null |
| contentClass | 大圖片展示區的樣式名 | string | 'galeryContent' |
| descClass | 描述展示區的樣式名 | string | 'galleryDesc' |
| easing | 可以用jQuery Easing Plugin做一些圖片展示的效果，詳情請看:http://gsgd.co.uk/sandbox/jquery/easing/ |
string | 'linear' |
| height | 大圖高（根據圖片大小自行設定） | string/integer | null |
| width | 大圖寬（根據圖片大小自行設定） | string/integer | null |
| thumbHeight | 縮放圖高（單位：px) | integer | 55 |
| thumbWidth | 縮放圖寬（單位：px) | integer | 55 |
| interval | 定時切換圖片（單位：ms) | integer | 4500 |
| infoClass | 文字信息部分樣式名 | string | 'galleryInfo' |
| prefix | 前綴 | string | 'gallery_' |
| ratio | 縮放列表和顯示文字信息層占整個圖片展示區的多少 | float | 0.35 |
| screenClass | 縮放列表和顯示文字信息層樣式名 | string | 'galleryScreen' |
| showOverlay | 是否顯示顯示文字信息層 | boolean | true |
| slideshow | 是否自動切換圖片及下部的縮放圖列表 | boolean | true |
| titleClass | 標題展示區樣式名 | string | 'gelleryTitle' |
| toggleBar | 縮放列表是否移上顯示，移開隱藏 | boolean | true |
| 事件 | |||
| onChange | 圖片改變時觸發 function(index, element) |
function | |
| onClick | 大圖點擊時觸發 function(event, element) |
function | |
| onSelect | 縮放圖點擊時觸發 function(event) |
function | |
| 第二步：編寫示例代碼 |
HTML代碼
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Porschev-jQuery Gallery Plugin</title>
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.gallery.0.3.js" type="text/javascript"></script>
<link href="Styles/jquery.gallery.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery.easing.1.3.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="id_of_gallery" class="gallery">
<ul class="galleryBar">
<%=htmlStr%>
</ul>
</div>
<!--下面標簽ID對應A標簽的rel屬性，用來顯示描述-->
<div id="id_desc" style="display:none;">
<p>我是第一張圖的描述<a href="http://www.dtan.so" target="_blank">dtan.so</a></p>
</div>
<script type="text/javascript">
$('#id_of_gallery').gallery({
interval: 5000,
height: '400px',
width: '500px',
});
</script>
</form>
</body>
</html>
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Text;
using System.Collections.Generic;
public partial class _Default : System.Web.UI.Page
{
public string htmlStr = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindData();
}
}
public void BindData()
{
#region##這里模擬從數據庫里取出圖片集合
ImageDataModel img1 = new ImageDataModel("第一張圖標題", "Images/1.jpg", "Images/t1.jpg", "第一張大圖描述");
ImageDataModel img2 = new ImageDataModel("第二張圖標題", "Images/2.jpg", "Images/t2.jpg", "第二張大圖描述");
ImageDataModel img3 = new ImageDataModel("第三張圖標題", "Images/3.jpg", "Images/t3.jpg", "第三張大圖描述");
ImageDataModel img4 = new ImageDataModel("第四張圖標題", "Images/4.jpg", "Images/t4.jpg", "第四張大圖描述");
List<ImageDataModel> list = new List<ImageDataModel>();
list.Add(img1);
list.Add(img2);
list.Add(img3);
list.Add(img4);
#endregion
StringBuilder sb = new StringBuilder();
foreach (ImageDataModel model in list)
{
sb.Append("<li><a href=\"");
sb.Append(model.BigUrl);
sb.Append("\" title=\"");
sb.Append(model.Description);
sb.Append("\"><img src=\"");
sb.Append(model.ThumbUrl);
sb.Append("\" title=\"");
sb.Append(model.Title);
sb.Append("\" /></a></li>");
}
htmlStr = sb.ToString();
}
/// <summary>
/// 模擬一個圖片實體類
/// </summary>
public class ImageDataModel
{
public ImageDataModel(string title, string bigUrl, string thumbUrl, string description)
{
Title = title;
BigUrl = bigUrl;
ThumbUrl = thumbUrl;
Description = description;
}
/// <summary>
/// 標題
/// </summary>
public string Title { get; set; }
/// <summary>
/// 大圖路徑
/// </summary>
public string BigUrl { get; set; }
/// <summary>
/// 小圖路徑
/// </summary>
public string ThumbUrl { get; set; }
/// <summary>
/// 描述
/// </summary>
public string Description { get; set; }
}
}
注意：1.HTML代碼中Id為id_desc的層，通過這個ID，對應輸出代碼中的A標簽的rel屬性，可以自定描述，本來A標簽Titlen屬性就可以做為描述，但是當描述中想加入一些自定義的東西，就要用這種方法;
比如示例中：描述中要加入一個A標簽跳轉的http://www.dtan.so,那就可以在輸出代碼中的A標簽中加入rel屬性，值設置為：id_desc;詳情大家可以去試一下;
2.示例采入后台拼接HTML代碼輸出到頁面的方式，也可用Jquery中$.ajax去請求一般處理程序返回結果集，返回結果集;（數據少，拼接html沒有問題，如果是大量的圖片展示，建議返回JSON結果集）
3.示例只是模擬了一下數據得到數據，沒有真正的去連接數據庫，不過也無妨，只需要把我#region#標簽模擬的部分改為讀取數據庫業務邏輯方法即可;
4.些插件中A標簽中href是大圖路徑、Title是描述，rel用於對應自定義描述的ID;image標簽src中是小圖，Title是標題;
5.gallery樣式很易改，各部分都有對應樣式，可以去樣式表按各自需求改對應的樣式，樣式名和各部分的對應關系可以對照上面的屬性表格;
| 第三步：源碼下載 |
源碼下載地址：jQueryGalleryPlugin.rar
Dtan網站導航 http://www.dtan.so