title: Magento how to get original image file after resize?
body: <p>I am building a webshop in magento.
  On the product detailpage i am resizing the image in Magento itself so that it doesn't have to load the very big image.</p>
  
  <p>When i click on the image it should open a lightbox with the image but this time it has to be larger.</p>
  
  <p>But because i resized it the quality really is really low.</p>
  
  <p>There is one other thing which i can't seem to figure out.
  I also have some smaller images which should appear as main image when they are hovered over. If i hover over them my resize doesn't work anymore.</p>
  
  <p>I hope someone can point out my mistakes :)</p>
  
  <p>Here is my code:</p>
  
  <p>HTML/PHP code for getting and resizing the image.</p>
  
  <pre><code>&lt;p class="product-image"&gt;
  &lt;?php
      $_img = '&lt;img id="image1" src="'.$this-&gt;helper('catalog/image')-&gt;init($_product, 'image')-&gt;resize(235, 350).'" alt="'.$this-&gt;htmlEscape($this-&gt;getImageLabel()).'" title="'.$this-&gt;htmlEscape($this-&gt;getImageLabel()).'" width="235" height="350    "  /&gt;';
      echo $_helper-&gt;productAttribute($_product, $_img, 'image');
  ?&gt;
  </code></pre>
  
  <p></p></p>
  
  <p>Javascript code for switching the images on hover.</p>
  
  <pre><code>function imageswitcher(imagename){  
  jQuery('#image1').attr('src', imagename);
  var options =   {
      zoomrange: [&lt;?php echo Mage::getStoreConfig('featurezoom/zoomrange/start');?&gt;, &lt;?php echo Mage::getStoreConfig('featurezoom/zoomrange/end');?&gt;],
      magnifiersize: [&lt;?php echo Mage::getStoreConfig('featurezoom/magnifiersize/height');?&gt;,&lt;?php echo Mage::getStoreConfig('featurezoom/magnifiersize/width');?&gt;],
      magnifierpos: '&lt;?php echo Mage::getStoreConfig('featurezoom/general/magnifierpos');?&gt;',
      cursorshade: true,
      largeimage: imagename //&lt;-- No comma after last option!
          }
      jQuery('#image1').addimagezoom(options);
  </code></pre>
  
  <p>}</p>
  
  <pre><code>function doTimer(imageName){
  myTimer=setTimeout(function(){
      imageswitcher(imagename);
  }, 2000);
  </code></pre>
  
  <p>}</p>
  
  <pre><code>Event.observe(window, 'load', function() {
      jQuery('#image1').addimagezoom({    
      zoomrange: [&lt;?php echo Mage::getStoreConfig('featurezoom/zoomrange/start');?&gt;, &lt;?php echo Mage::getStoreConfig('featurezoom/zoomrange/end');?&gt;],
      magnifiersize: [&lt;?php echo Mage::getStoreConfig('featurezoom/magnifiersize/height');?&gt;,&lt;?php echo Mage::getStoreConfig('featurezoom/magnifiersize/width');?&gt;],
      magnifierpos: '&lt;?php echo Mage::getStoreConfig('featurezoom/general/magnifierpos');?&gt;',
      cursorshade: true,      
      largeimage: '&lt;?php echo $this-&gt;helper('catalog/image')-&gt;init($_product, 'image');?&gt;' //&lt;-- No comma after last option!
  })
  });
  </code></pre>
  
  <p>jQuery code for opening positioning and closing the lightbox.</p>
  
  <pre><code>(function(window, $, undefined) {
  
          jQuery(function() {
              /*$(window).on('click', function(e) {
                  console.log(e.target);
                  //e.preventDefault();
              });*/
  
              $('.zoomtracker').on('click', function(e) {
                  removeLightbox();
                  $('body').css('overflow-y', 'hidden'); // hide scrollbars!
                  $('&lt;div id="overlay"&gt;&lt;/div&gt;')
                    .css('top', $(document).scrollTop())
                    .css('opacity', '0')
                    .appendTo('body');
  
                  $('&lt;div id="lightbox"&gt;&lt;/div&gt;')
                    .hide()
                    .appendTo('body');
  
                  var img = new Image();
                  img.onload = function() {
  
                      var width  = img.width,
                          height = img.height;
  
                      $('&lt;img id="lightboxImage" /&gt;')
                        .attr('width', '235')
                        .attr('src', img.src)
                        .load(function() {
                          positionLightboxImage(e);
                        })
                        .click(function() {
                          removeLightbox();
                        })
                        .appendTo('#lightbox');
                  };
                  img.src = $('#image2').attr('src');
                  $('#overlay').click(function(e){
              })
                  /*var height = $('&lt;img /&gt;').attr('width', .width());
                  alert(height);
  
                  $('&lt;img /&gt;')
                    .attr('src', $(this).attr('href'))
                    .load(function() {
                      positionLightboxImage(e);
                    })
                    .click(function() {
                      removeLightbox();
                    })
                    .appendTo('#lightbox');
  
                  return false;*/
                  e.preventDefault();
                });
          });
  
  
              function positionLightboxImage(e) {
                var top = 173;
                var left = 271;
  
                /* In plaats van de img width en height de hoogte en breedte van het scherm berekenen en aan de hand heirvan het centrum bepalen. */
  
                $('#lightbox')
                  .css({
                    'top': top,
                    'left': left
                  })
                  .fadeIn(500)
                  .animate({'width': '640','left': '50%', 'margin-left': -($('#lightbox').width()/2), 'top': '19%', 'margin-top': -($('#lightbox').height()/2)}, {queue: false}, 8000);
  
                $('#lightboxImage')
                  .animate({'width': '550','height': '930'}, {queue: false}, 8000)
  
              }
  
              function removeLightbox() {
                $('#overlay, #lightbox')
                  .fadeOut(500, function() {
                    $(this).remove();
                    $('body').css('overflow-y', 'auto'); // show scrollbars!
                  })
                  .animate({'width': '235','left': '-72', 'margin-left': ($('#lightbox').width()/2), 'top': '-295', 'margin-top': ($('#lightbox').height()/2)}, {queue: false}, 8000);
  
                  $('#lightboxImage')
                     .animate({'width': '235', 'height': '350'}, {queue: false}, 8000)
              }
  
              jQuery.fn.center = function () {
                  this.css("position","absolute");
                  this.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) + 
                                                              $(window).scrollTop()) + "px");
                  this.css("left", Math.max(0, (($(window).width() - this.outerWidth()) / 2) + 
                                                              $(window).scrollLeft()) + "px");
                  return this;
              }
  
      })(window, jQuery);
  </code></pre>