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. 显示子图的调用代码。

 

希望你用得舒心。