`

在Kentico CMS中使用jQuery集成图像缩放效果

阅读更多

在使用Kentico CMS进行网站内容建设的时候,你是否希望有这样的效果:当用户在你的网上商店浏览图像时,用户只要在图像区域移动光标,图像就随之出现放大或缩小的画面,从而可以看清更多的细节?通过下面简单的几步,你就可以做到:

一、复制以下脚本到你的母版页的<head>部分,即CMS Desk -> Content -> <root document> -> Master page 下面并保存它。注意该脚本引用了两个文件——multizoom.css和multizoom.js,所以一定要确保路径设置正确无误。点击jQuery Zoom Image Script下载这两个文件压缩包。

<link rel="stylesheet" href="multizoom.css" type="text/css" />
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
 
<script type="text/javascript" src="multizoom.js">
 
// Featured Image Zoomer (w/ optional multizoom and adjustable power)- By Dynamic Drive DHTML code library (www.dynamicdrive.com)
// Multi-Zoom code (c)2012 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use
// Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
 
</script>
 
<script type="text/javascript">
 
jQuery(document).ready(function($){
 
    $('#image1').addimagezoom({ // single image zoom
        zoomrange: [3, 10],
        magnifiersize: [300,300],
        magnifierpos: 'right',
        cursorshade: true,
        largeimage: 'hayden.jpg' //<-- No comma after last option!
    })
 
 
    $('#image2').addimagezoom() // single image zoom with default options
     
    $('#multizoom1').addimagezoom({ // multi-zoom: options same as for previous Featured Image Zoomer's addimagezoom unless noted as '- new'
        descArea: '#description', // description selector (optional - but required if descriptions are used) - new
        speed: 1500, // duration of fade in for new zoomable images (in milliseconds, optional) - new
        descpos: true, // if set to true - description position follows image position at a set distance, defaults to false (optional) - new
        imagevertcenter: true, // zoomable image centers vertically in its container (optional) - new
        magvertcenter: true, // magnified area centers vertically in relation to the zoomable image (optional) - new
        zoomrange: [3, 10],
        magnifiersize: [250,250],
        magnifierpos: 'right',
        cursorshadecolor: '#fdffd5',
        cursorshade: true //<-- No comma after last option!
    });
     
    $('#multizoom2').addimagezoom({ // multi-zoom: options same as for previous Featured Image Zoomer's addimagezoom unless noted as '- new'
        descArea: '#description2', // description selector (optional - but required if descriptions are used) - new
        disablewheel: true // even without variable zoom, mousewheel will not shift image position while mouse is over image (optional) - new
                //^-- No comma after last option!    
    });
     
})
<_/script>

二、使用在上面代码中你定义的jQuery选择器为图像设置脚本。默认情况下,有4个选择器可供选择——‘image1’、‘image2’、‘multizoom1’、‘multizoom2’。图像需要明确定义尺寸(宽度和高度),这样就能确保脚本在任何时候都能依据原始图像的比例正确调整放大图像的大小。(选择器可用的所有选项都可以在官方网站www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm 上找到)。

Kentico CMS教程之使用jQuery集成图像缩放效果
点击查看大图

三、最后,你可能需要设置jQuery 到noConflict()模式使其能够正常运作。

该脚本可以免费用于个人或商业网站。

关于Kentico CMS更多资讯,尽在http://www.evget.com/product/238/resource#p

分享到:
评论

相关推荐

    KenticoCMS_C#门户网站cms程序.rar

    Kentico CMS是一款基于.NET框架,使用C#语言开发的全功能内容管理系统(CMS),它专为构建企业级的门户网站而设计。这个压缩包文件“KenticoCMS_C#门户网站cms程序.rar”包含了 Kentico CMS 的一个特定版本——v1.3b...

    Kentico CMS 5.5及6.0 中文语言包

    安装中文语言包通常涉及下载文件,然后在Kentico后台的“全局设置”中选择并应用语言。这将更新整个系统的界面文字,确保所有菜单、提示和错误消息都显示为中文。 5. **本地化的重要性** 对于在中国运营的公司或...

    Kentico CMS 8.2中文版part02

    在线营销工具 多语言网站和多站点管理 提供了70个模块 500个可配置的Web部件和源代码 目前在90多个国家 地区中超过18 000个网站使用 客户包括 Microsoft Chiquita Vodafone O2 Orange Brussels Airlines Mazda Ford ...

    Kentico CMS/EMS v8.2 中文版.zip

    Kentico CMS/EMS是一个综合的营销解决方案,迅速获取网站业务。它是完整的集成解决方案,包括 Web 内容管理、 在线营销、 电子商务、 在线社区,集和内联网和协作,提供多个预置的功能比其他CMS系统,使企业级、 ...

    Kentico CMS v8.2

    Kentico CMS是一个企业级Web内容管理系统和客户体验管理系统,它提供了一整套的功能,内置多国语言支持,用于在内部或云中基于Microsoft ASP.NET平台构建网站、Intranet、社区站点和电子商务解决方案。它支持移动...

    kentico cms 3.1 破解版 part1

    强大的kentico 3.1破解版,支持在线设计发布.

    Kentico CMS 8.2中文版part03

    在线营销工具 多语言网站和多站点管理 提供了70个模块 500个可配置的Web部件和源代码 目前在90多个国家 地区中超过18 000个网站使用 客户包括 Microsoft Chiquita Vodafone O2 Orange Brussels Airlines Mazda Ford ...

    Kentico CMS 8.2中文版part01

    在线营销工具 多语言网站和多站点管理 提供了70个模块 500个可配置的Web部件和源代码 目前在90多个国家 地区中超过18 000个网站使用 客户包括 Microsoft Chiquita Vodafone O2 Orange Brussels Airlines Mazda Ford ...

    Kentico CMS

    ASP.NET CMS .NET open content management system portal C# free

    [CMS程序]KenticoCMSv1.3b_kenticocms13b(ASP.NET源码).rar

    在 Kentico CMS v1.3b 中,我们可以注意到以下几个关键点: 1. **模块化设计**:Kentico CMS 强调模块化的开发方式,使得开发者可以轻松地创建、管理和扩展网站功能。每个模块都是独立的,可以单独安装和卸载,这极...

    KenticoCMSv1.3b_kenticocms13b.zip

    Kentico CMS 是一款功能强大的企业级内容管理系统,用于构建、管理和维护各类网站。这个压缩包“KenticoCMSv1.3b_kenticocms13b.zip”包含了Kentico CMS的1.3b版本,这是一个早期但仍然重要的版本,因为它为用户提供...

    使用Kentico CMS加速网站开发-ASP.NET的内容管理系统

    6. **移动优先设计**:随着移动设备的普及,Kentico CMS支持响应式设计,确保网站在各种屏幕尺寸上都能良好显示。 7. **API和扩展性**:强大的API允许开发者利用.NET Framework的功能进行深度定制,与第三方服务或...

    Kentico CMS 4.1 -3

    ASP.NET CMS .NET open content management system portal C# free

    Kentico CMS ASP.NET v3.1 part1

    Kentico CMS for ASP.NET flexible, all-in-one solution for web developers

    Kentico CMS ASP.NET v3.1 part3

    Kentico CMS for ASP.NET flexible, all-in-one solution for web developers

    Kentico CMS ASP.NET v3.1 part2

    Kentico CMS for ASP.NET flexible, all-in-one solution for web developers

    Kentico CMS 4.1

    ASP.NET CMS .NET open content management system portal C# free

    kentico cms 3.1 破解版part4

    强大的kentico 3.1破解版,支持在线设计发布.

    kentico cms 3.1 破解版part2

    强大的kentico 3.1破解版,支持在线设计发布.

    kentico cms 3.1 破解版part3

    强大的kentico 3.1破解版,支持在线设计发布.

Global site tag (gtag.js) - Google Analytics