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 に答える