分享我自己用的javascript图片浏览器...
时间:2010-08-17 来源:obestboy
一、简介
本代码由花花体坛网站长独立开发,你可以随意使用和修改该代码。
二、功能
1.带缩略图,鼠标悬停于缩略图时,缩略图将变亮,离开时将变暗;当前显示的缩略图比其他缩略图亮。
2.点击缩略图,将显示大图,同时缩略图所在的容器的滚动条将随之而动。
3.鼠标悬停于大图时将显示向左或向右箭头,点击大图时会跳至下一张大图或上一张大图;同时缩略图也会跟着大图的改变而变暗或变亮,缩略图所在的容器的滚动条也将随之而动。
4.自动等比例改变大图的大小,以防撑满整个页面。脚本没有设置参数,如果需要可以自己修改 xsbortsImageBrowser.checkImgLoading这个函数。
4.你可以自定义鼠标文件以及大图未完全下载时显示的等待图片。
5.你可以自定义缩略图及大图的CSS格式。
三、用法
1.设计你自己的图片浏览器样式,这里做了一个简单的:
1. 2.<table width="600" border="0" align="center" bgcolor="#999999"> 3. 4. <tr> 5. <th height="110" width="600" bgcolor="#777777" scope="row" align="center" ><div id="imgSmallDiv" STYLE="position:relative; width:600px;overflow-x:auto; overflow-y:hidden;white-space:nowrap; font-size:0px; background:#999999" mce_STYLE="position:relative; width:600px;overflow-x:auto; overflow-y:hidden;white-space:nowrap; font-size:0px; background:#999999" ><div id="imgSmallDivInner" style="position:relative;overflow:visible;white-space:nowrap;font-size:0px;background:#999999" mce_style="position:relative;overflow:visible;white-space:nowrap;font-size:0px;background:#999999"></div> 6. </div></th> 7. </tr> 8. <tr > 9. <td align="center" id="imgBigTdDesc" ></td> 10. </tr> 11. <tr > <td align="center" id="imgBigTdX" height=300></td> 12. </tr> 13.</table>
2.定义图片数组,这里是定义大图的数组,可以根据你的需要修改xsbortsImageBrowser.getSmallImgDesc这个函数,现在函数里面是把big替换成small就小图的路径.
1.var imgBigDesc=new Array( 2. ["青奥会女足小组赛 伊朗队“全副武装”进球也疯狂" ,"http://www.xsborts.com/hbcms/upload/image/201008/big/90/9059_100815202827.jpg" ], 3. ["青奥会女足小组赛 伊朗队“全副武装”进球也疯狂" ,"http://www.xsborts.com/hbcms/upload/image/201008/big/48/4849_100815202827.jpg" ], 4. ["青奥会女足小组赛 伊朗队“全副武装”进球也疯狂" ,"http://www.xsborts.com/hbcms/upload/image/201008/big/46/4621_100815202827.jpg" ], 5. ["青奥会女足小组赛 伊朗队“全副武装”进球也疯狂" ,"http://www.xsborts.com/hbcms/upload/image/201008/big/06/0608_100815202827.jpg" ], 6. ["青奥会女足小组赛 伊朗队“全副武装”进球也疯狂" ,"http://www.xsborts.com/hbcms/upload/image/201008/big/84/8467_100815202827.jpg" ], 7. ["青奥会女足小组赛 伊朗队“全副武装”进球也疯狂" ,"http://www.xsborts.com/hbcms/upload/image/201008/big/70/7082_100815202920.jpg" ], 8. ["青奥会女足小组赛 伊朗队“全副武装”进球也疯狂" ,"http://www.xsborts.com/hbcms/upload/image/201008/big/07/0700_100815202923.jpg" ], 9. ["青奥会女足小组赛 伊朗队“全副武装”进球也疯狂" ,"http://www.xsborts.com/hbcms/upload/image/201008/big/12/1207_100815202923.jpg" ] 10. );
3.定义其他参数:
1.var urlLoading="http://www.xsborts.com/hbcms/image/loading.gif"; 2.var urlLeftArrow="url([url]http://www.xsborts.com/hbcms/image/left.cur[/url]),auto"; 3.var urlRightArrow="url([url]http://www.xsborts.com/hbcms/image/right.cur[/url]),auto";
4.定义一个xsbortsImageBrowser变量,下面是该对象的定义
1.var yourImageBrowser=new xsbortsImageBrowser( 2. arrBigImgDesc, //1大图url及其描述数组 3. idBigImg, //2显示大图的地方id(td id) 4. idDescBigImg, //3显示大图描述的地方id(td id) 5. idOuterDiv, //4缩略图外面的DIV的id 6. idInnerDiv, //5缩略图里面的DIV的id 7. urlLoading, //6图片载入时显示的loading的图片URL地址 8. cssLeftArrow, //7向左箭头的css样式,类似于{'cursor':'url([url]http://www.xsborts.com/hbcms/image/left.cur[/url]),auto'} 9. cssRightArrow //8向右箭头的css样式 10.);
5.初始化页面:
1. 2.var myImageBrowser=new xsbortsImageBrowser(imgBigDesc,"imgBigTdX","imgBigTdDesc","imgSmallDiv","imgSmallDivInner",urlLoading,urlLeftArrow,urlRightArrow); 3.myImageBrowser.insertSmallImg("myImageBrowser"); 4.myImageBrowser.imgChangeToBig(imgBigDesc[0][1],imgBigDesc[0][0],0,"myImageBrowser");
其中myImageBrowser.insertSmallImg("myImageBrowser"); 这一句中的参数myImageBrowser,正是你定义的xsbortsImageBrowser对象的名字(用字符串符号),下同。
6.为加载的页面的缩略图及大图等加载各种事件函数
1.var myScript=myImageBrowser.createScriptHead(); 2. myScript+=myImageBrowser.createBigImgClick("myImageBrowser"); 3. myScript+=myImageBrowser.createBigImgMouseMove("myImageBrowser"); 4. myScript+=myImageBrowser.createBigImgMouseDown("myImageBrowser"); 5. myScript+=myImageBrowser.createBigImgMouseUp("myImageBrowser"); 6. myScript+=myImageBrowser.createAllSmallImgHover("myImageBrowser"); 7. myScript+=myImageBrowser.createScriptTail(); 8.$(myImageBrowser.jqBigImg).html(myScript);
7.最重要的是你需要在你自己的页面文件的head部分加载JQuery框架和附件里的脚本文件xsbortsImageBrowser.js
1.<mce:script src="http://www.xsborts.com/hbcms/script/jquery/jquery_1.3.1.js" mce_src="http://www.xsborts.com/hbcms/script/jquery/jquery_1.3.1.js" type="text/javascript"></mce:script> 2.<mce:script src="http://www.xsborts.com/hbcms/script/xsbortsImageBrowser.js" mce_src="http://www.xsborts.com/hbcms/script/xsbortsImageBrowser.js" type="text/javascript"></mce:script>
演示网址:http://www.xsborts.com/article/04/2081.html
最后附上脚本文件xsbortsImageBrowser.js及示例文件pic4.html.有什么问题请尽管联系我!
xsbortsImageBrowser.js脚本,有的地方长行没有截断请自行分析断行
function xsbortsImageBrowser( arrBigImgDesc, //1大图url及description数组 idBigImg, //2显示大图的地方id(td id) idDescBigImg, //3显示大图描述的地方id(td id) idOuterDiv, //4缩略图外面的DIV的id idInnerDiv, //5缩略图里面的DIV的id urlLoading, //6图片载入时显示的loading的图片URL地址 cssLeftArrow, //7向左箭头的css样式,类似于{'cursor':'url(http://www.xsborts.com/hbcms/image/left.cur),auto'} cssRightArrow //8向右箭头的css样式 ) { this.arrBigImgDesc=arrBigImgDesc; this.jqBigImg="#"+idBigImg; this.jqDescBigImg="#"+idDescBigImg; this.jqOuterDiv="#"+idOuterDiv; this.jqInnerDiv="#"+idInnerDiv; this.urlLoading=urlLoading; this.cssLeftArrow=cssLeftArrow; this.cssRightArrow=cssRightArrow; this.currentImgNum=0; this.currentCursor=""; //该值为left则鼠标显示左箭头,为right则显示为右箭头 //得到小图数组 this.getSmallImgDesc= function() { var arrSmallImgDesc=new Array(); var strBigImgUrl; var strSmallImgUrl; for(imgNumX=0;imgNumX<this.arrBigImgDesc.length;imgNumX++){ strBigImgUrl=imgBigDesc[imgNumX][1]; strSmallImgUrl=strBigImgUrl.replace(/big/,"small"); //此处根据实际情况做些修改 arrSmallImgDesc.push([this.arrBigImgDesc[imgNumX][0],strSmallImgUrl]); } return arrSmallImgDesc; } //插入小图到innerDiv,参数objNameOfImageBrowser是您定义的图片浏览器对象的名字 this.insertSmallImg= function(objNameOfImageBrowser) { var arrSmallImgDesc=[]; var hrefImgChangeToBig=""; arrSmallImgDesc=this.getSmallImgDesc(); for(imgNumX=0;imgNumX<arrSmallImgDesc.length;imgNumX++){ hrefImgChangeToBig="javascript:"+objNameOfImageBrowser+".imgChangeToBig("+String.fromCharCode(34)+this.arrBigImgDesc[imgNumX][1]+String.fromCharCode(34)+","+String.fromCharCode(34)+this.arrBigImgDesc[imgNumX][0]+String.fromCharCode(34)+","+imgNumX+","+String.fromCharCode(34)+objNameOfImageBrowser+String.fromCharCode(34)+");"; //34为引号的ASCII码 $(this.jqInnerDiv).append("<a href=""+hrefImgChangeToBig+"" mce_href=""+hrefImgChangeToBig+""><img border=0 id='"+ imgNumX+"SmallImgX' src=""+arrSmallImgDesc[imgNumX][1]+"" mce_src=""+arrSmallImgDesc[imgNumX][1]+"" align='absmiddle' alt='"+arrSmallImgDesc[imgNumX][0]+"' title='"+ arrSmallImgDesc[imgNumX][0]+"'></a>"); //每个缩略图的ID为nSmallImgX,n从0到arrSmallImgDesc.length-1 var jqSmallImg="#"+imgNumX+"SmallImgX"; if (imgNumX==0) $(jqSmallImg).css('opacity', '1'); //把第一张缩略图设置正常透明度,其他的设置成40% else $(jqSmallImg).css('opacity', '0.4'); } this.currentImgNum=0; //设置当前显示的大图number为0 } this.loadImageTimeX,this.loadImageX; //载入的图像的setInterval的返回值,以及载入的图像对象 //检查大图载入状态,参数objNameOfImageBrowser是您定义的图片浏览器对象的名字 this.checkImgLoading=function(urlImgCheck,descImgCheck) { if(loadImageX.complete){ $(this.jqBigImg).html("<img id='imgBigX' src=""+urlImgCheck+"" mce_src=""+urlImgCheck+"">"); // $(this.jqBigImg).html("<img id='imgBigX' src=""+urlImgCheck+"" mce_src=""+urlImgCheck+"" alt='"+descImgCheck+"'"+"title='"+ descImgCheck+"'>"); $("#imgBigX").hide(); loadImageX=null; clearInterval(loadImageTimeX); //下面调整图片大小,可以根据实际情况设置,设置图片显示时最大宽度为600px if($("#imgBigX").width()>600) { $("#imgBigX").height(600*$("#imgBigX").height()/$("#imgBigX").width()); $("#imgBigX").width(600); } $("#imgBigX").fadeIn("slow"); //设置图片显示方式为淡入方式 } } //图片切换,参数objNameOfImageBrowser是您定义的图片浏览器对象的名字 this.imgChangeToBig=function(imgUrlX,imgDescX,imgNumDisplay,objNameOfImageBrowser) { loadImageX=new Image(); $(this.jqBigImg).html("<img id='imgBigX' src="" +this.urlLoading+"" mce_src="" +this.urlLoading+"" />"); loadImageX.src=imgUrlX; $(this.jqDescBigImg).html("<span style="font-size: medium;" mce_style="font-size: medium;"> "+imgDescX+String.fromCharCode(40)+(imgNumDisplay+1)+"/"+this.arrBigImgDesc.length+String.fromCharCode(41)+"</span>"); var jqSmallImg="#"+imgNumDisplay+"SmallImgX"; var jqCurrentSmallImg ="#"+this.currentImgNum+"SmallImgX"; $(jqCurrentSmallImg).css('opacity', '0.4'); $(jqSmallImg).css('opacity', '1'); this.currentImgNum=imgNumDisplay; $(this.jqOuterDiv).attr("scrollLeft",($(jqSmallImg).position().left-$(this.jqOuterDiv).width()/2+$(jqSmallImg).width()/2)); loadImageTimeX=setInterval(objNameOfImageBrowser+".checkImgLoading('"+imgUrlX+"','"+imgDescX+"')",100); } //为每个缩略图生成hover事件函数 this.createAllSmallImgHover=function(objNameOfImageBrowser) { var txtImgSmallHover=""; for(imgNumX=0;imgNumX<this.arrBigImgDesc.length;imgNumX++){ strImgSmallID=String.fromCharCode(34)+"#"+imgNumX+"SmallImgX"+String.fromCharCode(34); txtImgSmallHover+="$("+strImgSmallID+").hover( "; txtImgSmallHover+="function () { "; txtImgSmallHover+="$("+strImgSmallID+").attr('border',1); "; txtImgSmallHover+="$("+strImgSmallID+").css('opacity',1); "; txtImgSmallHover+=" }, "; txtImgSmallHover+="function () { "; txtImgSmallHover+="$("+strImgSmallID+").attr('border',0); "; txtImgSmallHover+="if("+strImgSmallID+".substr(1,1)!="+objNameOfImageBrowser+".currentImgNum) "; //this.currentImgNum这里可能有问题 txtImgSmallHover+="{$("+strImgSmallID+").css('opacity',0.4);} "; txtImgSmallHover+=" } "; txtImgSmallHover+=" ); "; } return txtImgSmallHover; } //鼠标放在图片上显示向左向右箭头 this.createBigImgMouseMove=function(objNameOfImageBrowser) { var txtBigImgMouseMove=""; txtBigImgMouseMove+="$("+objNameOfImageBrowser+".jqBigImg).mousemove(function(e){ "; txtBigImgMouseMove+="var positionX=e.originalEvent.x-$("+objNameOfImageBrowser+".jqBigImg).offset().left||e.originalEvent.layerX-$("+objNameOfImageBrowser+".jqBigImg).offset().left||0; "; txtBigImgMouseMove+="if(positionX < $("+objNameOfImageBrowser+".jqBigImg).width()/2) "; txtBigImgMouseMove+="{ if("+objNameOfImageBrowser+".currentCursor!='left')" ; txtBigImgMouseMove+="{$("+objNameOfImageBrowser+".jqBigImg).css('cursor',"+objNameOfImageBrowser+".cssLeftArrow); "; txtBigImgMouseMove+=objNameOfImageBrowser+".currentCursor='left';}} "; txtBigImgMouseMove+="else "; txtBigImgMouseMove+="{ if("+objNameOfImageBrowser+".currentCursor!='right')" ; txtBigImgMouseMove+="{ $("+objNameOfImageBrowser+".jqBigImg).css('cursor',"+objNameOfImageBrowser+".cssRightArrow); "; txtBigImgMouseMove+=objNameOfImageBrowser+".currentCursor='right';}} "; txtBigImgMouseMove+="}); "; return txtBigImgMouseMove; } //鼠标按上下时显示手形 this.createBigImgMouseDown=function(objNameOfImageBrowser) { var txtBigImgMouseDown=""; txtBigImgMouseDown+="$("+objNameOfImageBrowser+".jqBigImg).mousedown(function(){ "; txtBigImgMouseDown+="$("+objNameOfImageBrowser+".jqBigImg).css({'cursor':'pointer'}); "; txtBigImgMouseDown+="}); "; return txtBigImgMouseDown; } //鼠标松开时显示左右箭头 this.createBigImgMouseUp=function(objNameOfImageBrowser) { var txtBigImgMouseUp=""; txtBigImgMouseUp+="$("+objNameOfImageBrowser+".jqBigImg).mouseup(function(e){ "; txtBigImgMouseUp+="var positionX=e.originalEvent.x-$("+objNameOfImageBrowser+".jqBigImg).offset().left||e.originalEvent.layerX-$("+objNameOfImageBrowser+".jqBigImg).offset().left||0; "; txtBigImgMouseUp+="if(positionX < $("+objNameOfImageBrowser+".jqBigImg).width()/2) "; txtBigImgMouseUp+="{$("+objNameOfImageBrowser+".jqBigImg).css('cursor',"+objNameOfImageBrowser+".cssLeftArrow); "; txtBigImgMouseUp+=objNameOfImageBrowser+".currentCursor='left';} "; txtBigImgMouseUp+="else "; txtBigImgMouseUp+="{ $("+objNameOfImageBrowser+".jqBigImg).css('cursor',"+objNameOfImageBrowser+".cssRightArrow); "; txtBigImgMouseUp+=objNameOfImageBrowser+".currentCursor='right';} "; txtBigImgMouseUp+="}); "; return txtBigImgMouseUp; } //点击大图时切换图片 this.createBigImgClick=function(objNameOfImageBrowser) { var txtBigImgClick=""; txtBigImgClick+="$("+objNameOfImageBrowser+".jqBigImg).click(function(e){ "; txtBigImgClick+="var positionX=e.originalEvent.x-$("+objNameOfImageBrowser+".jqBigImg).offset().left||e.originalEvent.layerX-$("+objNameOfImageBrowser+".jqBigImg).offset().left||0; "; txtBigImgClick+="var numPreImg=("+objNameOfImageBrowser+".currentImgNum-1<0)?0:("+objNameOfImageBrowser+".currentImgNum-1); "; txtBigImgClick+="var numNextImg=("+objNameOfImageBrowser+".currentImgNum+1>imgBigDesc.length-1)?(imgBigDesc.length-1):("+objNameOfImageBrowser+".currentImgNum+1); "; txtBigImgClick+="if(positionX < $("+objNameOfImageBrowser+".jqBigImg).width()/2) { "; txtBigImgClick+=objNameOfImageBrowser+".imgChangeToBig("+objNameOfImageBrowser+".arrBigImgDesc[numPreImg][1],"+objNameOfImageBrowser+".arrBigImgDesc[numPreImg][0],numPreImg,'"+objNameOfImageBrowser+"');} "; txtBigImgClick+=" else { "; txtBigImgClick+=objNameOfImageBrowser+".imgChangeToBig("+objNameOfImageBrowser+".arrBigImgDesc[numNextImg][1],"+objNameOfImageBrowser+".arrBigImgDesc[numNextImg][0],numNextImg,'"+objNameOfImageBrowser+"'); } " txtBigImgClick+=" }); "; return txtBigImgClick; } this.createScriptHead=function(){ var txtScriptHead=""; txtScriptHead+=String.fromCharCode(60)+"script language='javascript'"+String.fromCharCode(62)+" " ; txtScriptHead+="$(function(){ "; return txtScriptHead; } this.createScriptTail=function(){ var txtScriptTail=""; txtScriptTail+="}); "; txtScriptTail+=String.fromCharCode(60)+"/script"+String.fromCharCode(62)+" "; return txtScriptTail; } }
示例页面
<!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="gb2312" /> <title>Untitled Document</title> <mce:script src="http://www.xsborts.com/hbcms/script/jquery/jquery_1.3.1.js" mce_src="http://www.xsborts.com/hbcms/script/jquery/jquery_1.3.1.js" type="text/javascript"></mce:script> <mce:script src="http://www.xsborts.com/hbcms/script/xsbortsImageBrowser.js" mce_src="http://www.xsborts.com/hbcms/script/xsbortsImageBrowser.js" type="text/javascript"></mce:script> </head> <body> <table width="600" border="0" align="center" bgcolor="#999999"> <tr> <th height="110" width="600" bgcolor="#777777" scope="row" align="center" ><div id="imgSmallDiv" STYLE="position:relative; width:600px;overflow-x:auto; overflow-y:hidden;white-space:nowrap; font-size:0px; background:#999999" mce_STYLE="position:relative; width:600px;overflow-x:auto; overflow-y:hidden;white-space:nowrap; font-size:0px; background:#999999" ><div id="imgSmallDivInner" style="position:relative;overflow:visible;white-space:nowrap;font-size:0px;background:#999999" mce_style="position:relative;overflow:visible;white-space:nowrap;font-size:0px;background:#999999"></div> </div></th> </tr> <tr > <td align="center" id="imgBigTdDesc" ></td> </tr> <tr > <td align="center" id="imgBigTdX" height=300></td> </tr> </table> <mce:script language="javascript"><!-- var imgBigDesc=new Array( ["重庆美女杜十五变身摩托赛车女郎 性感无与匹敌","/hbcms/upload/image/201008/big/94/9465_100818105430.jpg" ], ["重庆美女杜十五变身摩托赛车女郎 性感得痛快淋漓","/hbcms/upload/image/201008/big/85/8590_100818105431.jpg" ], ["重庆美女杜十五变身摩托赛车女郎 尽显狂野","/hbcms/upload/image/201008/big/10/1082_100818105431.jpg" ], ["重庆美女杜十五变身摩托赛车女郎 如火比基尼","/hbcms/upload/image/201008/big/75/7581_100818105205.jpg" ], ["重庆美女杜十五变身摩托赛车女郎","/hbcms/upload/image/201008/big/95/9581_100818105206.jpg" ], ["重庆美女杜十五变身摩托赛车女郎 回眸","/hbcms/upload/image/201008/big/97/9733_100818105206.jpg" ], ["重庆美女杜十五变身摩托赛车女郎 撩人姿势","/hbcms/upload/image/201008/big/11/1187_100818105206.jpg" ], ["重庆美女杜十五变身摩托赛车女郎","/hbcms/upload/image/201008/big/42/4274_100818105206.jpg" ], ["重庆美女杜十五变身摩托赛车女郎 迷人的大腿","/hbcms/upload/image/201008/big/04/0416_100818104823.jpg" ], ["重庆美女杜十五变身摩托赛车女郎 展现修车技巧的同时也看看我的性感","/hbcms/upload/image/201008/big/92/9230_100818104823.jpg" ], ["重庆美女杜十五变身摩托赛车女郎 狂野回眸","/hbcms/upload/image/201008/big/97/9788_100818104823.jpg" ], ["重庆美女杜十五变身摩托赛车女郎 傲人身姿","/hbcms/upload/image/201008/big/40/4023_100818104823.jpg" ], ["重庆美女杜十五变身摩托赛车女郎 美女都是很酷的","/hbcms/upload/image/201008/big/99/9923_100818104823.jpg" ], ["重庆美女杜十五变身摩托赛车女郎 清纯如邻家女","/hbcms/upload/image/201008/big/81/8136_100818104414.jpg" ], ["重庆美女杜十五变身摩托赛车女郎 对我笑吗","/hbcms/upload/image/201008/big/98/9832_100818104414.jpg" ], ["重庆美女杜十五变身摩托赛车女郎 好可爱哦","/hbcms/upload/image/201008/big/05/0576_100818104414.jpg" ], ["重庆美女杜十五变身摩托赛车女郎 思恋你","/hbcms/upload/image/201008/big/76/7656_100818104414.jpg" ], ["重庆美女杜十五变身摩托赛车女郎 憧憬未来","/hbcms/upload/image/201008/big/75/7555_100818104414.jpg" ] ); var urlLoading="http://www.xsborts.com/hbcms/image/loading.gif"; var urlLeftArrow="url(http://www.xsborts.com/hbcms/image/left.cur),auto"; var urlRightArrow="url(http://www.xsborts.com/hbcms/image/right.cur),auto"; var myImageBrowser=new xsbortsImageBrowser(imgBigDesc,"imgBigTdX","imgBigTdDesc","imgSmallDiv","imgSmallDivInner",urlLoading,urlLeftArrow,urlRightArrow); myImageBrowser.insertSmallImg("myImageBrowser"); myImageBrowser.imgChangeToBig(imgBigDesc[0][1],imgBigDesc[0][0],0,"myImageBrowser"); var myScript=myImageBrowser.createScriptHead(); myScript+=myImageBrowser.createBigImgClick("myImageBrowser"); myScript+=myImageBrowser.createBigImgMouseMove("myImageBrowser"); myScript+=myImageBrowser.createBigImgMouseDown("myImageBrowser"); myScript+=myImageBrowser.createBigImgMouseUp("myImageBrowser"); myScript+=myImageBrowser.createAllSmallImgHover("myImageBrowser"); myScript+=myImageBrowser.createScriptTail(); $(myImageBrowser.jqBigImg).html(myScript); // --></mce:script> </body> </html>