Magento how to get original image file after resize? - php

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