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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏河湾欢儿的专栏

css3过渡与动画

过渡 当触发的时候会有过渡的效果 1.transition-property:none|all|某一个属性值 2.transition-duration:...

95210
来自专栏androidBlog

Android 正 N 边形圆角头像的实现

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/de...

15210
来自专栏淡定的博客

markdown基础语法

8220
来自专栏林德熙的博客

win10 uwp 进度条 WaveProgressControl

昨天看到了有个大神做出好看的进度条样式,于是我就去抄袭他的代码,但是发现看不懂,于是本文主要翻译就是大神说这个控件如何做。

10800
来自专栏向治洪

VectorDrawable与AnimatedVectorDrawable

VectorDrawable  Android L开始提供了新的API VectorDrawable 可以使用SVG类型的资源,也就是矢量图。先来一个例子吧...

22250
来自专栏数据小魔方

条件格式的特殊用法——创意百分比构成图

今天继续跟大家分享条件格式的特殊用法——创意百分比构成图。 ▽▼▽ 上一篇推送已经跟大家介绍过如何通过设置条件格式来完成特殊的单元格字体、填充效果。今天趁热打铁...

49160
来自专栏娱乐心理测试

轻松生成小程序分享海报

小程序分享到朋友圈只能使用小程序码海报来实现,生成小程序码的方式有两种,一种是使用后端方式,一种是使用小程序自带的canvas生成;后端的方式开发难度大,由于生...

65830
来自专栏儿童编程

【动画原理续篇】Python Turtle动画不连续难题解决方案

前一段时间发过一篇小文“心中有剑,落叶飞花,皆是兵器”-Python动画原理揭示及案例,在文末提出了一个疑问:画图的速度比较慢。即使speed()调到最大(sp...

54430
来自专栏HTML5学堂

CSS3圆角 border-radius

HTML5学堂:圆角是用一段与角的两边相切的圆弧替换原来的直角。在原有网页当中,如果需要实现圆角效果,可以使用背景图的实现,但是这样会造成背景图大小和数量的增加...

69170
来自专栏前端说吧

JS-事件之鼠标、键盘都能控制的下拉选框效果

38150

扫码关注云+社区

领取腾讯云代金券