1

我有一个小问题。我有一个链接，当我单击此链接时，我希望图像增长到一定大小并移动到屏幕上的某个位置。一切都很好，只是动画完成后图像弹回原来的大小。

我的项目在 Magento 中，对于图像的奇怪显示感到抱歉

PS：在 img 标签中，它显示 width="235" height="401"。但是图像弹出到 width=924" 和 height="1379"。这些是实际图像的尺寸。

这是我的 HTML 代码：

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

这是我的 jQuery 代码：

(function(window, $, undefined) {

jQuery(function(){
    $('.lightbox').click(function(e) {
        $('body').css('overflow-y', 'hidden'); // hide scrollbars!
        var clicked = $('.lightbox').position();

        $('<div id="overlay"></div>')
          .css('top', $(document).scrollTop())
          .css('opacity', '0')
          .animate({'opacity': '0.5'}, 'slow')
          .appendTo('body');

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

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

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

            $('<img />')
              .attr('src', img.src)
              .load(function() {
                positionLightboxImage(e, width, height);
              })
              .click(function() {
                removeLightbox();
              })
              .appendTo('#lightbox');
        };
        img.src = $('#image1').attr('src');

        /*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, width, height) {
      var top = e.pageY - (height / 2);
      var left = e.pageX - (width / 2);
      $('#lightbox')
        .css({
          'top': top,
          'left': left
        })
        .fadeIn(1)
        .animate({'width': '50px'}, 3000);
    }

    function removeLightbox() {
      $('#overlay, #lightbox')
        .fadeOut('slow', function() {
          $(this).remove();
          $('body').css('overflow-y', 'auto'); // show scrollbars!
        });
    }

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

我希望我提供了足够的信息。:)

4

1 回答 1

0

对于任何对此答案感兴趣的人。

这不是解决此问题的最佳方法。但是为灯箱使用较小的图像并将大图像保留在 data-src 中可以解决这种情况。

于 2013-01-05T11:58:30.033 回答