Blog

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

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


希望你用得舒心。

Over 95% of our clients recommend our language services to others


Copyright © CCJK Technologies Co., Ltd. 2000-2017. All rights reserved.
TOP