zencart调出多图,和添加Jzoom和jquery效果
zencart调出多图,和添加Jzoom和jquery效果
电子商务这一块竞争越来越大,商家越来越多,同时商机也来了。久而久之,所需要的技术也越来越强,越来越成熟,为了赢得更多的客户,商家不断地要求技术人员来加强网站的功能,美观,更好的用户体验,使网站看上去更人性化。包括更种支付等等。
在这里写了一些zencart图片之间的效果和算可以的用户体验,用zencart的客户往往要求开发者开发出一些用户体验好,很炫的效果。如比多产品图片,放大图片的效果,大小图之间的切换。从而达到更好的用户体验的效果,来留住更多的客人。
这里就说下怎么来弄出产品的JZoom +jquery的炫丽效果,又怎么来调出某个产品的大图,小图,和大小图之间的功换显示,放大显示等功能,效果图如下:
- 首先将自己一些图片和CSS文,JS文件都用一个规范的文件夹分好类。
- 分别写出一些功能,自己调出对应产品的图片和子图片代码如下:
<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>
- 显示子图的调用代码。
希望你用得舒心。
Need a translation service?
Please enter your personal details and we will contact you shortly
Words translated by CCJK
146,096,379Over 95% of our clients recommend our language services to others