Hello, I practice in jQuery and decided to write for myself a simple lightbox. It seems to be easy and even everything turned out, but then I decided that the images that are larger than my screen should not crawl for him, but to adapt, I did so, if the image is larger, it decreases, but while it does it, the unthinkable garbage, here's an example of how my lightbox works, I think you’ll notice what's wrong. Help, please, understand and bring to mind.

$(document).ready(function () { function positionLightboxImage() { var img_height = $('#lightbox img').height(); var window_height = $(window).height(); if (img_height > window_height) { var razn = (img_height - window_height) + 100; var new_height = img_height - razn; $('#lightbox img').css('height', new_height); } var Top = ($(window).height() - $('#lightbox img').height()) / 2 - 10; var Left = ($(window).width() - $('#lightbox img').width()) / 2; $('#lightbox').css({ 'top': Top, 'left': Left }).fadeIn(); } function removeLightbox() { $('#overlay, #lightbox').remove(); } $('a.lightbox').click(function () { $('body').css('overflow', 'hidden') $('<div id="overlay"></div>').appendTo('body'); $('<div id="lightbox"></div>').fadeOut().appendTo('body'); $('<img/>').attr('src', $(this).attr('href')).load(function () { positionLightboxImage(); }).appendTo('#lightbox'); $('#overlay').click(function () { removeLightbox(); }) $('<div id="close"><div>').appendTo('#lightbox'); $('#close').click(function () { removeLightbox(); }) return false; }) })
  • one
    The code in the studio! - spoilt
  • Guys, ayyy. - Vladimir Fedulkin
  • > I think you will notice what is wrong And if there is a lot of "what is wrong"? Specify, please. - Deonis
  • ummm, the image in front of the user is loaded, and only then decreases (if needed) and is positioned in the middle of the screen. - Vladimir Fedulkin
  • In essence, it is necessary that the block with the picture is permanently hidden until the image is loaded. In this case, I cannot calculate the size of an already reduced image, i.e. It turns out, but at the moment when the image is displayed in full size. - Vladimir Fedulkin


1 answer 1

When loading the images, download large images in the background (preload images).