社区首页 >专栏 >jQuery Gallery Plugin在Asp.Net中使用

jQuery Gallery Plugin在Asp.Net中使用

Porschev

发布于 2018-01-16 06:30:54

1.3K00

代码可运行

文章被收录于专栏：Porschev[钟慰]的专栏Porschev[钟慰]的专栏

运行总次数：0

代码可运行

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; }
    }
}