在使用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 上找到)。
(点击查看大图)
三、最后,你可能需要设置jQuery 到noConflict()模式使其能够正常运作。
该脚本可以免费用于个人或商业网站。
关于Kentico CMS更多资讯,尽在http://www.evget.com/product/238/resource#p
相关推荐
Kentico CMS是一款基于.NET框架,使用C#语言开发的全功能内容管理系统(CMS),它专为构建企业级的门户网站而设计。这个压缩包文件“KenticoCMS_C#门户网站cms程序.rar”包含了 Kentico CMS 的一个特定版本——v1.3b...
安装中文语言包通常涉及下载文件,然后在Kentico后台的“全局设置”中选择并应用语言。这将更新整个系统的界面文字,确保所有菜单、提示和错误消息都显示为中文。 5. **本地化的重要性** 对于在中国运营的公司或...
在线营销工具 多语言网站和多站点管理 提供了70个模块 500个可配置的Web部件和源代码 目前在90多个国家 地区中超过18 000个网站使用 客户包括 Microsoft Chiquita Vodafone O2 Orange Brussels Airlines Mazda Ford ...
Kentico CMS/EMS是一个综合的营销解决方案,迅速获取网站业务。它是完整的集成解决方案,包括 Web 内容管理、 在线营销、 电子商务、 在线社区,集和内联网和协作,提供多个预置的功能比其他CMS系统,使企业级、 ...
Kentico CMS是一个企业级Web内容管理系统和客户体验管理系统,它提供了一整套的功能,内置多国语言支持,用于在内部或云中基于Microsoft ASP.NET平台构建网站、Intranet、社区站点和电子商务解决方案。它支持移动...
强大的kentico 3.1破解版,支持在线设计发布.
在线营销工具 多语言网站和多站点管理 提供了70个模块 500个可配置的Web部件和源代码 目前在90多个国家 地区中超过18 000个网站使用 客户包括 Microsoft Chiquita Vodafone O2 Orange Brussels Airlines Mazda Ford ...
在线营销工具 多语言网站和多站点管理 提供了70个模块 500个可配置的Web部件和源代码 目前在90多个国家 地区中超过18 000个网站使用 客户包括 Microsoft Chiquita Vodafone O2 Orange Brussels Airlines Mazda Ford ...
ASP.NET CMS .NET open content management system portal C# free
在 Kentico CMS v1.3b 中,我们可以注意到以下几个关键点: 1. **模块化设计**:Kentico CMS 强调模块化的开发方式,使得开发者可以轻松地创建、管理和扩展网站功能。每个模块都是独立的,可以单独安装和卸载,这极...
Kentico CMS 是一款功能强大的企业级内容管理系统,用于构建、管理和维护各类网站。这个压缩包“KenticoCMSv1.3b_kenticocms13b.zip”包含了Kentico CMS的1.3b版本,这是一个早期但仍然重要的版本,因为它为用户提供...
6. **移动优先设计**:随着移动设备的普及,Kentico CMS支持响应式设计,确保网站在各种屏幕尺寸上都能良好显示。 7. **API和扩展性**:强大的API允许开发者利用.NET Framework的功能进行深度定制,与第三方服务或...
ASP.NET CMS .NET open content management system portal C# free
Kentico CMS for ASP.NET flexible, all-in-one solution for web developers
Kentico CMS for ASP.NET flexible, all-in-one solution for web developers
Kentico CMS for ASP.NET flexible, all-in-one solution for web developers
ASP.NET CMS .NET open content management system portal C# free
强大的kentico 3.1破解版,支持在线设计发布.
强大的kentico 3.1破解版,支持在线设计发布.
强大的kentico 3.1破解版,支持在线设计发布.