Magento how to get original image file after resize?

Question

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.

When i click on the image it should open a lightbox with the image but this time it has to be larger.

But because i resized it the quality really is really low.

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.

I hope someone can point out my mistakes :)

Here is my code:

HTML/PHP code for getting and resizing the image.

<p class="product-image">
<?php
    $_img = '<img id="image1" src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(235, 350).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" width="235" height="350    "  />';
    echo $_helper->productAttribute($_product, $_img, 'image');
?>

Javascript code for switching the images on hover.

function imageswitcher(imagename){  
jQuery('#image1').attr('src', imagename);
var options =   {
    zoomrange: [<?php echo Mage::getStoreConfig('featurezoom/zoomrange/start');?>, <?php echo Mage::getStoreConfig('featurezoom/zoomrange/end');?>],
    magnifiersize: [<?php echo Mage::getStoreConfig('featurezoom/magnifiersize/height');?>,<?php echo Mage::getStoreConfig('featurezoom/magnifiersize/width');?>],
    magnifierpos: '<?php echo Mage::getStoreConfig('featurezoom/general/magnifierpos');?>',
    cursorshade: true,
    largeimage: imagename //<-- No comma after last option!
        }
    jQuery('#image1').addimagezoom(options);

}

function doTimer(imageName){
myTimer=setTimeout(function(){
    imageswitcher(imagename);
}, 2000);

}

Event.observe(window, 'load', function() {
    jQuery('#image1').addimagezoom({    
    zoomrange: [<?php echo Mage::getStoreConfig('featurezoom/zoomrange/start');?>, <?php echo Mage::getStoreConfig('featurezoom/zoomrange/end');?>],
    magnifiersize: [<?php echo Mage::getStoreConfig('featurezoom/magnifiersize/height');?>,<?php echo Mage::getStoreConfig('featurezoom/magnifiersize/width');?>],
    magnifierpos: '<?php echo Mage::getStoreConfig('featurezoom/general/magnifierpos');?>',
    cursorshade: true,      
    largeimage: '<?php echo $this->helper('catalog/image')->init($_product, 'image');?>' //<-- No comma after last option!
})
});

jQuery code for opening positioning and closing the lightbox.

(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!
                $('<div id="overlay"></div>')
                  .css('top', $(document).scrollTop())
                  .css('opacity', '0')
                  .appendTo('body');

                $('<div id="lightbox"></div>')
                  .hide()
                  .appendTo('body');

                var img = new Image();
                img.onload = function() {

                    var width  = img.width,
                        height = img.height;

                    $('<img id="lightboxImage" />')
                      .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 = $('<img />').attr('width', .width());
                alert(height);

                $('<img />')
                  .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);

Answer 1

Try to use naturalWidth and naturalHeight methods after image load and your scripts initialised.

jsFiddle example.

var img = $("img")[0];
alert( img.naturalWidth + "x" + img.naturalHeight );

Note: if you wan to do this with another way, you can inspect this answer too: https://stackoverflow.com/a/670433/1428241