jQuery Gallery Plugin在Asp.Net中使用

推荐一个简单易用的Gallery插件：jQuery Gallery Plugin

下面是在Asp.Net开发中应用

示例截图：

Jquery Gallery Plugin

-------------------------------------------------------------------------------风骚分隔线-----------------------------------------------------------------------------------------------

第一步：认识一下这个插属性及事件

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

posted @ 2012-02-21 10:31 porschev 阅读(2464) 评论(3) 编辑收藏举报

刷新页面返回顶部

jQuery Gallery Plugin在Asp.Net中使用

公告