zencart调出多图，和添加Jzoom和jquery效果

by Kevin / Dec 31, 2011

zencart调出多图，和添加Jzoom和jquery效果
电子商务这一块竞争越来越大，商家越来越多，同时商机也来了。久而久之，所需要的技术也越来越强，越来越成熟，为了赢得更多的客户，商家不断地要求技术人员来加强网站的功能，美观，更好的用户体验，使网站看上去更人性化。包括更种支付等等。
在这里写了一些zencart图片之间的效果和算可以的用户体验，用zencart的客户往往要求开发者开发出一些用户体验好，很炫的效果。如比多产品图片，放大图片的效果，大小图之间的切换。从而达到更好的用户体验的效果，来留住更多的客人。
这里就说下怎么来弄出产品的JZoom +jquery的炫丽效果，又怎么来调出某个产品的大图，小图，和大小图之间的功换显示，放大显示等功能，效果图如下：

1. 首先将自己一些图片和CSS文，JS文件都用一个规范的文件夹分好类。


2. 分别写出一些功能，自己调出对应产品的图片和子图片代码如下：

 
 
<script language="javascript" src="fashionbags/js/jquery.js"></script>
<script language="javascript" src="fashionbags/js/jquery.lightbox-0.5.min.js"></script>
<script language="javascript" src="fashionbags/js/jquery.jcarousel.js"></script>
<link rel="stylesheet" href="fashionbags/css/jquery.lightbox-0.5.css" media="screen" />
<link rel="stylesheet" href="fashionbags/css/jquery.jcarousel.css" media="screen" />
 
<script type="text/javascript">
$(function() {
$('.qc a').lightBox();
});
$(document).ready(function() {
$("#mycarousel").jcarousel();
$("#mycarousel li").mouseover(function(){
var JQ_img = $("img", this);
var mid_src = JQ_img.attr("mid");
var big_src = JQ_img.attr("bid");
$("#mainimage a img").attr("src", mid_src);
$('#mainimage a').attr('href', big_src);
$(this).siblings().each(function(){
$("img", this).removeClass().addClass("curr_base");
})
JQ_img.addClass("cur_on");
})
});
 
</script>
<style type="text/css">
.curr_base {
border:1px solid #ccc;
}
.cur_on {
border:2px solid #82acd5;
}
/*Image Display*/
#mainimage img{
margin:0 20px 20px 0;
}
#mainimage img{ border:1px solid #dddddd; text-align:center; padding:5px;}
</style>
 
<div id='mainimage' align="center" >
<script language="javascript"><!--
document.write('');
//--></script>
<noscript>
 
</noscript>
</div>
 
<ul id="mycarousel">
<li jcarouselindex="1"><a href="" target="_blank"><img class="curr_base" mid="" bid="" src="" width="50"></a></li>
 
</ul>

1. 显示子图的调用代码。

 
希望你用得舒心。