Question

我有一个小问题。我有一个链接，当我点击这个链接，我想要一个图像增长到一定的大小，并移动到屏幕上的某个位置。除了在动画完成后图像弹回其原始大小外，其他方式还可以。

我的项目在Magento很抱歉图像的奇怪显示

PS：在img标签中，它表示width =“235”height =“401”。但图像弹出宽度= 924“和高度=”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);

我希望我提供足够的信息。：）

Answer 1

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

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

jquery图像动画弹回原始大小

1 个答案: