修改ECSHOP首页FLASH幻灯改为JQuery图片切换效果
话说我好久没用过ECSHOP了,无奈最近朋友要做个商城,想来想去,还是用ECSHOP+自定义模板吧。于是乎,我很不情愿的又开始搞ECSHOP了。
下面步入正题,说下怎么修改ECSHOP默认的首页FLASH幻灯,改为漂亮的JQuery图片切换特效。PS:说点题外话,我刚才发现在某个卖EC的网站上对这个功能的修改要500元。
(这里默认你已经了解基本PHP知识及Smarty原理和JQuery插件的使用,如果不会而只想实现效果的话,请直接看本文最下面的代码部分。)
首先呢,我说下大概的思路,分为5个步骤:后台上传图片->找到上传到位置->想办法在前台调用->将图片信息数组赋值给模板->在首页模板中循环输出
下面我一一解释。
第1步,上传图片,登陆后台,依次选择:系统设置->首页主广告管理->添加图片,如图1;
第2步,怎么找到上传位置呢?可以通过百度或直接查看后台源码(我2者都利用了)。最终找到的位置为data\afficheimg 目录,不过这个意义不大,重要的是知道它是保存在一个xml文件(data\flash_data.xml)里面的。
第3部,重中之重,就是怎么调用。这个怎么找呢?我的思路是,直接去后台,查看图片列表的那个PHP文件(flashplay.php?act=list),打开这个文件,看看源码,看看系统怎么调用的。不罗嗦了,据说观察,调用一个函数就行了, $flashdb = get_flash_xml(); 这个 $flashdb 就是一个保存图片信息的二维数组。至于在前台调用,请看以下操作。
打开前台 index.php,在第92行(推荐这个位置)插入以下代码:
//首页幻灯调用 | http://blog.phpha.com
function get_flash_xml()
{
$flashdb = array();
if (file_exists(ROOT_PATH . DATA_DIR . ‘/flash_data.xml’))
{
// 兼容v2.7.0及以前版本
if (!preg_match_all(‘/item_url=”([^"]+)”\slink=”([^"]+)”\stext=”([^"]*)”\ssort=”([^"]*)”/’, file_get_contents(ROOT_PATH . DATA_DIR . ‘/flash_data.xml’), $t, PREG_SET_ORDER))
{
preg_match_all(‘/item_url=”([^"]+)”\slink=”([^"]+)”\stext=”([^"]*)”/’, file_get_contents(ROOT_PATH . DATA_DIR . ‘/flash_data.xml’), $t, PREG_SET_ORDER);
}
if (!empty($t))
{
foreach ($t as $key => $val)
{
$val[4] = isset($val[4]) ? $val[4] : 0;
$flashdb[] = array(‘src’=>$val[1],’url’=>$val[2],’text’=>$val[3],’sort’=>$val[4]);
}
}
}
return $flashdb;
}
$playerdb = get_flash_xml();
现在这个 $playerdb 里面保存了图片相关的二维数组信息。
第4步,将二维数组赋值给模板。打开前台 index.php,在第135行(推荐这个位置)插入以下代码:
$smarty->assign(‘playerdb’, $playerdb); //图片数组
第5步,在模板中调用。其中位置为 index_ad.lbi ,直接修改这个就行了。
<div id=”flash”>
<!– {foreach from=$playerdb item=row} –>
<a href=”{$row.url}” target=”_blank”><img src=”{$row.src}” alt=”{$row.text}” /></a>
<!– {/foreach}> –>
</div>
原文地址:http://blog.phpha.com/archives/319.html
<!--EndFragment-->
分享到:
相关推荐
"js幻灯片"和"jq调用"指的是利用JavaScript和jQuery库来实现幻灯片的动态切换效果。 JavaScript是一种广泛应用于网页和网络应用的编程语言,它允许开发者在用户与网页交互时执行动态更新、改变内容等操作。jQuery则...
因此,在ECSHOP中利用Flash实现的图片切换效果,如淡入淡出、滑动、缩放等过渡动画,不仅提高了商品页面的吸引力,而且使用户的交互体验更加丰富和流畅。 安装此类插件后,网站管理员可以在ECSHOP后台进行一系列...
3. **更新JQuery代码**:之后,所有使用$的地方都需要替换为`jq`,例如`$('selector').function()`应更改为`jq('selector').function()`。 4. **异步加载和封装**:如果可能,考虑使用异步加载库(如`require.js`)...
3. 调整`transport.js`,使其兼容jQuery,或直接替换为新的jQuery插件。 4. 使用上述的`jQuery.noConflict()`或命名空间方法,确保全局作用域不冲突。 5. 测试所有相关功能,确保在移除Prototype.js或解决冲突后仍能...
标题中的“支持jQuery的ECShop”指的是ECShop这个开源电子商务平台与jQuery库的集成。ECShop是一款基于PHP和MySQL的电商系统,它为企业提供了一套完整的网上购物解决方案。而jQuery是一个广泛使用的JavaScript库,...
这款"幻灯广告插件"是专为ECShop设计的一款增强功能组件,旨在提升网站的视觉效果和用户体验,通过动态的幻灯片展示吸引顾客的注意力。 首先,让我们详细了解一下这个插件的主要特点: 1. **高度自定义**:该插件...
ECSHOP是一款广泛使用的开源电子商务系统,而jQuery是一个强大的JavaScript库,被广泛应用于网页的交互和动态效果处理。在ECSHOP中,由于其自带的JavaScript代码可能与引入的jQuery产生冲突,导致页面功能异常或脚本...
ecshop的首页幻灯js版 参考 www.chinahongjiu.net 使用方法 1、将文件夹下载到 data/flashdata 中 2、修改admin文件夹中的flashplay.php 大约 870行添加 case 'Myjs';注意文件夹名称要一直,否则更新不了。这样就...
这样可以在全局作用域下创建一个新的变量(如`window.jQuery`),并将原始的`$`符号替换为这个新变量。 2. **修改Ecshop内置脚本库**: - 对于一些重要的Ecshop功能模块(如购物车、订单等),可以通过修改其源...
结合以上信息,我们可以推测这可能是某个开发者在更新或修复ECShop项目中遇到的问题,他们可能需要引入这些jQuery文件以替换或增强ECShop内建的JSON处理能力,同时避免与原有代码的冲突。在实际开发过程中,了解如何...
在 ECShop 的 JavaScript 文件中,找到所有使用 Prototype AJAX 调用的地方,比如 `Ajax.get()` 或 `Ajax.post()`,然后替换为 jQuery 的等价方法 `$.get()` 和 `$.post()`。这两个方法的语法略有不同: 1. `Ajax....
通过替换`transport.js`文件和引入`json2.js`,我们可以使ECSHOP在利用jQuery的强大功能的同时,保持系统的稳定性和兼容性。在开发过程中,我们还应关注其他可能的冲突源,例如CSS选择器、JavaScript命名空间等,以...
本项目是针对天猫首页幻灯片效果的一种模拟实现,旨在为用户提供类似天猫商城的交互体验。通过鼠标悬停时颜色变化,增加用户对幻灯片内容的关注度。 【描述】: 这个幻灯片效果的实现主要包括两个关键部分:鼠标...
1.安装步骤 下载文档后 styls.css 导入到goods.dwt <link rel=”stylesheet” type=”text/css” href=”themes/default/style.css” media=”screen” /> js文件 [removed]爱T-blog...方法用于图片的切换
例如,可能需要编写额外的插件配置代码来调整放大镜的位置、大小、透明度等属性,以及幻灯片的过渡效果、自动播放速度、是否显示导航点等选项。 在压缩包文件"ecshop图片放大与切换"中,可能包含了实现这一功能所需...
"ecshop 属性图片替换文字" 插件就是为了满足这种需求而设计的。 这个插件的主要功能是将ECShop中的文本属性转换为图片展示。它允许商家上传与商品属性相关的图片,例如,不同的颜色可以用对应颜色的小方块图片来...
ECShop的“图片替换功能”正是为了解决这个问题,它允许商家将商品的特定属性(如颜色)与对应的图片关联,使得用户在选择不同颜色时可以快速看到实物效果,提升购买决策的准确性。 实现这个功能的过程如下: 1. *...
【描述】"非常不错的搜狐flash幻灯,在ecshop上用不错"意味着这个Flash组件在ecshop系统中运行良好,能够提供优质的用户体验,可能是通过动态展示商品图片、介绍或其他相关信息,吸引用户关注并促进浏览和购买。...
标题 "ecshop商品属性使用图片替换代替,放大镜+属性图片" 描述的是在电子商务平台ECShop中,如何通过使用图片来替代商品属性的显示方式,以增强用户体验,特别是当属性如颜色可以通过图像直观展示时。这个功能可以...
这次更新表明ECShop已经解决了这个问题,现在用户可以在ECShop上自由地使用jQuery,创建更丰富的交互效果和动态界面,提高用户体验。 要使用这个更新,你需要下载压缩包文件"ecshop_php5.5_jquery",解压后覆盖到你...