Question

I have a small problem. i have a link and when i click on this link i want an image to grow to a certain size and move to a certain spot on the screen. Everthing goes fine except that the image pops back to it’s original size after the animation is complete.

My project is in Magento so sorry about the weird display of the image

PS: In the img tag it says width=”235″ height=”401″.
But the image pops to width=924″ and height=”1379″. These are the dimensions of the actual image.

Here is my HTML code:

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

And here is my jQuery code:

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

I hope i gave enough information. 🙂

Answer 1

For anyone who is interested in this answer.

It isn’t the best way to fix this.
But using a smaller image for the lightbox and keeping the big image in the data-src did the trick for this situation.