jQuery Gallery Plugin在Asp.Net中使用
jQuery Gallery Plugin在Asp.Net中使用
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
腾讯云开发者
