Spreadbox - A product picture zoom for Spreadshirt


/ Published in: JavaScript
Save to your folder(s)

This is the production version. Get minified version here:
http://snipplr.com/view/56706/spreadbox-minified--a-product-zoom-for-spreadshirt/


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();
  17. if ($('detailArticleThumb')) {
  18. this.box[0] = $('detailArticleThumb');
  19. this.path = '$("detailArticleThumb").firstDescendant()';
  20. this.prodNamePath = "$$('h3')[0]";
  21. this.prodDescPath = "$$('h5')[0]";
  22. } else if ($('articleList')) {
  23. this.box = $$('.articleImages');
  24. this.path = 'Event.element(e).previous().down().down()';
  25. this.prodNamePath = 'Event.element(e).previous().previous()';
  26. this.prodDescPath = 'Event.element(e).next().down().down()';
  27. }
  28.  
  29. if (box.length > 0) {
  30.  
  31. 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();
  32. 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();
  33. 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>';
  34. zmCntnr.insert({'bottom': zmCntnt});
  35.  
  36. $$('body')[0].insert({'top': zmOvrly}).setStyle({position:'static'});
  37. zmOvrly.insert({'after': this.zmCntnr});
  38.  
  39. box.each(function(el){
  40. 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);
  41. $(el).insert({'after': zmBtn});
  42. Event.observe(this.zmBtn, 'click', function(e){
  43. this.imgURL = eval(path).readAttribute('src').gsub('width/280/height/280', 'width/500/height/500');
  44. this.imgURL = this.imgURL.gsub('width/190/height/190', 'width/500/height/500');
  45. $('zmImg').writeAttribute('src', '').setStyle({visibility: 'hidden', height: '500px', width: '500px'}).writeAttribute('src', this.imgURL);
  46. $('zmImg').onload = function () {$('zmImg').setStyle({visibility: 'visible'});}
  47. zmOvrly.appear({to: .8, duration: .5});
  48. zmCntnr.appear({duration: .5});
  49. this.title = "";
  50. if (eval(prodNamePath).innerHTML != "") this.title = eval(prodNamePath).innerHTML + " - ";
  51. this.title += eval(prodDescPath).innerHTML;
  52. $('zmTtl').update(this.title);
  53. });
  54. });
  55.  
  56.  
  57. $$('.zmCls').each(function (el) {
  58. return $(el).observe('click', function(e) {
  59. zmOvrly.fade({duration: .5});
  60. zmCntnr.fade({duration: .5});
  61. Event.stop(e);
  62. });
  63. });
  64.  
  65. }
  66. }
  67.  
  68. document.observe("dom:loaded", function() {
  69. spreadBox();
  70. });
  71. </script>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.