1、去掉图片集字段，字符串的多余字符
$goods_pic_display=$row[DISPLAY];
$goods_pic_display1=str_replace('"', '', $goods_pic_display);
$goods_pic_display2=str_replace(']', '', $goods_pic_display1);
$goods_pic_display3=str_replace('[', '', $goods_pic_display2);
2、php把字符串指定字符分割成数组
$var_display=explode(",",$goods_pic_display3);
3、foreach 循环输出一维数组，定义第一条foreach数据
<{foreach from=$var_display name=arr_display item=foo }>
<{if $smarty.foreach.arr_display.first}>
<li class="tb-selected">
<div class="tb-pic tb-s40">
<a href="#">
<img src="<{$foo}>" mid="<{$foo}>" big="<{$foo}>">
</a>
</div>
</li>
<{else}>
<li>
<div class="tb-pic tb-s40">
<a href="#">
<img src="<{$foo}>" mid="<{$foo}>" big="<{$foo}>">
</a>
</div>
</li>
<{/if}>
<{/foreach}>
4、放大镜插件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>放大镜</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.imagezoom.min.js"></script>
<style type="text/css">
html{overflow-y:scroll;}
body{margin:0; font:12px "5B8B4F53",san-serif;background:#ffffff;}
div,ul,li{padding:0; margin:0;}
li{list-style-type:none;}
img{vertical-align:top;border:0;}
/* box */
.box{610px;margin:100px auto;}
.tb-pic a{display:table-cell;text-align:center;vertical-align:middle;}
.tb-pic a img{vertical-align:middle;}
.tb-pic a{*display:block;*font-family:Arial;*line-height:1;}
.tb-thumb{margin:10px 0 0;overflow:hidden;}
.tb-thumb li{background:none repeat scroll 0 0 transparent;float:left;height:42px;margin:0 6px 0 0;overflow:hidden;padding:1px;}
.tb-s310, .tb-s310 a{height:310px;310px;}
.tb-s310, .tb-s310 img{max-height:310px;max-310px;}
.tb-s310 a{*font-size:271px;}
.tb-s40 a{*font-size:35px;}
.tb-s40, .tb-s40 a{height:40px;40px;}
.tb-booth{border:1px solid #CDCDCD;position:relative;z-index:1;}
.tb-thumb .tb-selected{background:none repeat scroll 0 0 #C30008;height:40px;padding:2px;}
.tb-thumb .tb-selected div{background-color:#FFFFFF;border:medium none;}
.tb-thumb li div{border:1px solid #CDCDCD;}
div.zoomDiv{z-index:999;position:absolute;top:0px;left:0px;200px;height:200px;background:#ffffff;border:1px solid #CCCCCC;display:none;text-align:center;overflow:hidden;}
div.zoomMask{position:absolute;background:url("images/mask.png") repeat scroll 0 0 transparent;cursor:move;z-index:1;}
</style>
</head>
<body>
<div class="box">
<div class="tb-booth tb-pic tb-s310">
<a href="images/01.jpg"><img src="images/01_mid.jpg" alt="美女" rel="images/01.jpg" class="jqzoom" /></a>
</div>
<ul class="tb-thumb" id="thumblist">
<li class="tb-selected"><div class="tb-pic tb-s40"><a href="#"><img src="images/01_small.jpg" mid="images/01_mid.jpg" big="images/01.jpg"></a></div></li>
<li><div class="tb-pic tb-s40"><a href="#"><img src="images/02_small.jpg" mid="images/02_mid.jpg" big="images/02.jpg"></a></div></li>
<li><div class="tb-pic tb-s40"><a href="#"><img src="images/03_small.jpg" mid="images/03_mid.jpg" big="images/03.jpg"></a></div></li>
<li><div class="tb-pic tb-s40"><a href="#"><img src="images/04_small.jpg" mid="images/04_mid.jpg" big="images/04.jpg"></a></div></li>
<li><div class="tb-pic tb-s40"><a href="#"><img src="images/05_small.jpg" mid="images/05_mid.jpg" big="images/05.jpg"></a></div></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".jqzoom").imagezoom();
$("#thumblist li a").click(function(){
$(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");
$(".jqzoom").attr('src',$(this).find("img").attr("mid"));
$(".jqzoom").attr('rel',$(this).find("img").attr("big"));
});
});
</script>
</body>
</html>
====================
jquery.imagezoom.js
。。。。。。
(function($){
$.fn.imagezoom = function(options){
var settings = {
xzoom: 310,
yzoom: 310,
offset: 10,
position: "BTR",
preload: 1
};
if(options) {
$.extend(settings, options);
}
var noalt = '';
var self = this;
$(this).bind("mouseenter", function(ev){
var imageLeft = $(this).offset().left;//元素左边距
var imageTop = $(this).offset().top;//元素顶边距
var imageWidth = $(this).get(0).offsetWidth;//图片宽度
var imageHeight = $(this).get(0).offsetHeight;//图片高度
var boxLeft = $(this).parent().offset().left;//父框左边距
var boxTop = $(this).parent().offset().top;//父框顶边距
var boxWidth = $(this).parent().width();//父框宽度
var boxHeight = $(this).parent().height();//父框高度
noalt= $(this).attr("alt");//图片标题
var bigimage = $(this).attr("rel");//大图地址
$(this).attr("alt",'');//清空图片alt
if($("div.zoomDiv").get().length == 0){
$(document.body).append("<div class='zoomDiv'><img class='bigimg' src='"+bigimage+"'/></div><div class='zoomMask'> </div>");//放大镜框及遮罩
}
if(settings.position == "BTR"){
//如果超过了屏幕宽度 将放大镜放在右边
if(boxLeft + boxWidth + settings.offset + settings.xzoom > screen.width){
leftpos = boxLeft - settings.offset - settings.xzoom;
}else{
leftpos = boxLeft + boxWidth + settings.offset;
}
}else{
leftpos = imageLeft - settings.xzoom - settings.offset;
if(leftpos < 0){
leftpos = imageLeft + imageWidth + settings.offset;
}
}
$("div.zoomDiv").css({ top: boxTop,left: leftpos });
$("div.zoomDiv").width(settings.xzoom);
$("div.zoomDiv").height(settings.yzoom);
$("div.zoomDiv").show();
$(this).css('cursor','crosshair');
$(document.body).mousemove(function(e){
mouse = new MouseEvent(e);
if(mouse.x<imageLeft || mouse.x>imageLeft+imageWidth || mouse.y<imageTop || mouse.y>imageTop+imageHeight){
mouseOutImage();
return;
}
var bigwidth = $(".bigimg").get(0).offsetWidth;
var bigheight = $(".bigimg").get(0).offsetHeight;
var scaley ='x';
var scalex ='y';
//设置遮罩层尺寸
if(isNaN(scalex)|isNaN(scaley)){
var scalex = (bigwidth/imageWidth);
var scaley = (bigheight/imageHeight);
$("div.zoomMask").width((settings.xzoom)/scalex );
$("div.zoomMask").height((settings.yzoom)/scaley);
$("div.zoomMask").css('visibility','visible');
}
xpos = mouse.x- $("div.zoomMask").width()/2 ;
ypos = mouse.y- $("div.zoomMask").height()/2 ;
xposs = mouse.x- $("div.zoomMask").width()/2 - imageLeft;
yposs = mouse.y- $("div.zoomMask").height()/2 - imageTop ;
xpos = (mouse.x - $("div.zoomMask").width()/2 < imageLeft ) ? imageLeft : (mouse.x + $("div.zoomMask").width()/2 > imageWidth + imageLeft ) ? (imageWidth + imageLeft -$("div.zoomMask").width()): xpos;
ypos = (mouse.y - $("div.zoomMask").height()/2 < imageTop ) ? imageTop : (mouse.y + $("div.zoomMask").height()/2 > imageHeight + imageTop ) ? (imageHeight + imageTop - $("div.zoomMask").height()) : ypos;
$("div.zoomMask").css({ top:ypos,left:xpos});
$("div.zoomDiv").get(0).scrollLeft = xposs * scalex;
$("div.zoomDiv").get(0).scrollTop = yposs * scaley;
});
});
function mouseOutImage(){
$(self).attr("alt",noalt);
$(document.body).unbind("mousemove");
$("div.zoomMask").remove();
$("div.zoomDiv").remove();
}
//预加载
count = 0;
if(settings.preload){
$('body').append("<div style='display:none;' class='jqPreload"+count+"'></div>");
$(this).each(function(){
var imagetopreload= $(this).attr("rel");
var content = jQuery('div.jqPreload'+count+'').html();
jQuery('div.jqPreload'+count+'').html(content+'<img src="'+imagetopreload+'">');
});
}
}
})(jQuery);
function MouseEvent(e) {
this.x = e.pageX;
this.y = e.pageY;
}
======================
jquery.imagezoom.min.js
(function($){$.fn.imagezoom=function(options){var settings={xzoom:310,yzoom:310,offset:10,position:"BTR",preload:1};if(options){$.extend(settings,options);}
var noalt='';var self=this;$(this).bind("mouseenter",function(ev){var imageLeft=$(this).offset().left;var imageTop=$(this).offset().top;var imageWidth=$(this).get(0).offsetWidth;var imageHeight=$(this).get(0).offsetHeight;var boxLeft=$(this).parent().offset().left;var boxTop=$(this).parent().offset().top;var boxWidth=$(this).parent().width();var boxHeight=$(this).parent().height();noalt=$(this).attr("alt");var bigimage=$(this).attr("rel");$(this).attr("alt",'');if($("div.zoomDiv").get().length==0){$(document.body).append("<div class='zoomDiv'><img class='bigimg' src='"+bigimage+"'/></div><div class='zoomMask'> </div>");}
if(settings.position=="BTR"){if(boxLeft+boxWidth+settings.offset+settings.xzoom>screen.width){leftpos=boxLeft-settings.offset-settings.xzoom;}else{leftpos=boxLeft+boxWidth+settings.offset;}}else{leftpos=imageLeft-settings.xzoom-settings.offset;if(leftpos<0){leftpos=imageLeft+imageWidth+settings.offset;}}
$("div.zoomDiv").css({top:boxTop,left:leftpos});$("div.zoomDiv").width(settings.xzoom);$("div.zoomDiv").height(settings.yzoom);$("div.zoomDiv").show();$(this).css('cursor','crosshair');$(document.body).mousemove(function(e){mouse=new MouseEvent(e);if(mouse.x<imageLeft||mouse.x>imageLeft+imageWidth||mouse.y<imageTop||mouse.y>imageTop+imageHeight){mouseOutImage();return;}
var bigwidth=$(".bigimg").get(0).offsetWidth;var bigheight=$(".bigimg").get(0).offsetHeight;var scaley='x';var scalex='y';if(isNaN(scalex)|isNaN(scaley)){var scalex=(bigwidth/imageWidth);var scaley=(bigheight/imageHeight);$("div.zoomMask").width((settings.xzoom)/scalex);$("div.zoomMask").height((settings.yzoom)/scaley);$("div.zoomMask").css('visibility','visible');}
xpos=mouse.x-$("div.zoomMask").width()/2;ypos=mouse.y-$("div.zoomMask").height()/2;xposs=mouse.x-$("div.zoomMask").width()/2-imageLeft;yposs=mouse.y-$("div.zoomMask").height()/2-imageTop;xpos=(mouse.x-$("div.zoomMask").width()/2<imageLeft)?imageLeft:(mouse.x+$("div.zoomMask").width()/2>imageWidth+imageLeft)?(imageWidth+imageLeft-$("div.zoomMask").width()):xpos;ypos=(mouse.y-$("div.zoomMask").height()/2<imageTop)?imageTop:(mouse.y+$("div.zoomMask").height()/2>imageHeight+imageTop)?(imageHeight+imageTop-$("div.zoomMask").height()):ypos;$("div.zoomMask").css({top:ypos,left:xpos});$("div.zoomDiv").get(0).scrollLeft=xposs*scalex;$("div.zoomDiv").get(0).scrollTop=yposs*scaley;});});function mouseOutImage(){$(self).attr("alt",noalt);$(document.body).unbind("mousemove");$("div.zoomMask").remove();$("div.zoomDiv").remove();}
count=0;if(settings.preload){$('body').append("<div style='display:none;' class='jqPreload"+count+"'></div>");$(this).each(function(){var imagetopreload=$(this).attr("rel");var content=jQuery('div.jqPreload'+count+'').html();jQuery('div.jqPreload'+count+'').html(content+'<img src="'+imagetopreload+'">');});}}})(jQuery);function MouseEvent(e){this.x=e.pageX;this.y=e.pageY;}