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);

score 1 · Answer 1 · edited May 23 '17 at 10:24

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

edited May 23 '17 at 10:24

Community

1
1

answered Oct 03 '12 at 09:17

Barlas Apaydin

7,233
11
55
86

Thank you for these two advices :) This will definitely be useful later on in my project :) But it doesn't tackle the problem now. Alerting natural width and height gives me the resized dimensions. Alerting the `pic_real_width` gives me the resized dimensions too but if i hover over a gallery image (which changes the main image) it gives me the right dimensions. – Wesley Smits Oct 03 '12 at 09:38
Ah, i fixed the issue where it changes the dimensions after hovering. But still this code stores the original dimensions of the image which is on the page. But it gets resized while loading the page. I need the original dimensions of the image itself. – Wesley Smits Oct 03 '12 at 09:44
make sure that: you use image original size functions after image and resize functions **loaded**. – Barlas Apaydin Oct 03 '12 at 09:55
How do you mean? I am doing something like this. (made very basis here) $image->resize($newWidth,$newHeight); echo $_helper->productAttribute($_product, $image, 'image'); So the image is resized before it is ever loaded on the page. Then in jQuery i am opening a lightbox using the source of the image loaded on the page. Of course this gives a rather blurry image since it is resized to a small size. Do you know a way of tackling the problem so that i can get the original dimensions of the image file itself instead of the new dimensions at page load? – Wesley Smits Oct 03 '12 at 10:12
your ligthbox plugin migth occurs bug. did you heard colorbox plugin for solid popups? i always use that and never create js conflicts. – Barlas Apaydin Oct 03 '12 at 15:37

Magento how to get original image file after resize?

1 Answers1