Question

我正在建立一个magento的网上商店。在产品详细信息页面上，我正在调整Magento本身的图像大小，以便它不必加载非常大的图像。

当我点击图片时，它应该打开一个带有图像的灯箱，但这次它必须更大。

但是因为我调整了它的质量真的很低。

还有一件我无法弄清楚的事情。我还有一些较小的图像，它们在悬停时应显示为主图像。如果我将鼠标悬停在他们上面，我的调整大小就不再起作用了。

我希望有人可以指出我的错误：）

这是我的代码：

用于获取图像和调整图像大小的HTML / PHP代码。

<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代码。

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代码。

(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

尝试在图像加载和初始化脚本后使用naturalWidth和naturalHeight方法。

jsFiddle example.

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

注意：如果您想以其他方式执行此操作，您也可以检查此答案：https://stackoverflow.com/a/670433/1428241

Magento如何在调整大小后获取原始图像文件？

1 个答案: