Advanced Search

Spreadbox minified - a product zoom for Spreadshirt

/ Published in: JavaScript
Save to your folder(s)
Paste this code in your shop footer just before

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <script type="text/javascript">
  2. function spreadBox() {
  3.     /*
  4.      * 2011 by Alex Dahlem | http://www.twitter.com/alexdahlem
  5. 	 * Zooming product images in spreadshops
  6.      * Place this in your Shop-footer just before </body>
  7. 	 * Death to false markup
  8.      */
  9.  
  10.     // text for zooming
  11.     this.zmBtnText = 'Vergrößern!';
  12.     // Text for closing
  13.     this.zmClsText = 'Schließen';
  14.  
  15.     // Can't touch this!
  16. 	this.box=new Array();if($('detailArticleThumb')){this.box[0]=$('detailArticleThumb');this.path='$("detailArticleThumb").firstDescendant()';this.prodNamePath="$$('h3')[0]";this.prodDescPath="$$('h5')[0]";}else if($('articleList')){this.box=$$('.articleImages');this.path='Event.element(e).previous().down().down()';this.prodNamePath='Event.element(e).previous().previous()';this.prodDescPath='Event.element(e).next().down().down()';}
  17. if(box.length>0){this.zmOvrly=new Element('div').setStyle({position:'fixed',top:0,left:0,height:'100%',width:'100%',backgroundColor:'#000',overflowY:'hidden',zIndex:9998,opacity:0.8}).addClassName('zmCls').hide();this.zmCntnr=new Element('div').setStyle({textAlign:'right',fontSize:'0.8em',position:'fixed',top:'50%',left:'50%',marginLeft:'-250px',width:'500px',minHeight:'520px',marginTop:'-270px',background:'#fff URL(/Public/Common/images/loading_ani.gif) no-repeat center',zIndex:9999,border:'5px solid white'}).hide();this.zmCntnt='<a href="" title="'+zmClsText+'" style="position:absolute; margin-right: -13px; margin-top: -13px; right: 0; display:block; width: 26px; height: 26px; padding: 0; text-align: center; vertical-align: middle; border-radius: 23px;  font-weight: bold; font-size: 15px; line-height: 25px; color: #fff; background: #ba2737" class="zmCls">&#9747;</a><img id="zmImg" style="height:500px; width:500px; border: 1px solid #dcdcdc"><p><h4 id="zmTtl"></h4><a href="#" id="zmBtnCls" class="zmCls">'+zmClsText+'</a></p>';zmCntnr.insert({'bottom':zmCntnt});$$('body')[0].insert({'top':zmOvrly}).setStyle({position:'static'});zmOvrly.insert({'after':this.zmCntnr});box.each(function(el){this.zmBtn=new Element('a').update(zmBtnText).setStyle({bottom:0,float:'right',marginTop:'-26px',marginRight:'6px',display:'block',position:'relative',padding:'2px',height:'16px',width:'16px',textIndent:'-9999px',background:'url(/Public/Common/images/sprites_icons.png) -78px -58px #fff',overflow:'hidden'}).writeAttribute('href','#').writeAttribute('title',zmBtnText);$(el).insert({'after':zmBtn});Event.observe(this.zmBtn,'click',function(e){this.imgURL=eval(path).readAttribute('src').gsub('width/280/height/280','width/500/height/500');this.imgURL=this.imgURL.gsub('width/190/height/190','width/500/height/500');$('zmImg').writeAttribute('src','').setStyle({visibility:'hidden',height:'500px',width:'500px'}).writeAttribute('src',this.imgURL);$('zmImg').onload=function(){$('zmImg').setStyle({visibility:'visible'});}
  18. zmOvrly.appear({to:.8,duration:.5});zmCntnr.appear({duration:.5});this.title="";if(eval(prodNamePath).innerHTML!="")this.title=eval(prodNamePath).innerHTML+" - ";this.title+=eval(prodDescPath).innerHTML;$('zmTtl').update(this.title);});});$$('.zmCls').each(function(el){return $(el).observe('click',function(e){zmOvrly.fade({duration:.5});zmCntnr.fade({duration:.5});Event.stop(e);});});}}
  19. document.observe("dom:loaded",function(){spreadBox();});</script>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.