Отображение удаленного изображения через экран

Question

У меня есть простая сетка изображений размером 16x16 пикселей, и когда один щелкнут, я хочу отобразить полноразмерный размер с затуманенным фоном, а изображение в div, появляющемся, чтобы плавать над тусклым фоном.

Я не хочу, чтобы предварительно заполнить список полноразмерной

$('#photo-grid').on('click', 'a', function(event) { 
    $.getJSON($(this).attr('href'), function(data) {  // Gets the URL of full-sized image 
    $('.page-cover').css('opacity', 0.6).fadeIn(300); // Makes background appear to fade 
    $('#lightbox-img').attr('src', data.url);   // Sets image src in hidden DIV 
    $('#lightbox-img').one('load', function() { 
     var lbi; 
     lbi = $('#lightbox-img'); 

     console.log("lbi: " + (lbi.width()) + " x " + (lbi.height())); // always 0 
     console.log("lbi: " + (lbi.width()) + " x " + (lbi.height())); // always 0 

     $('.image-display').css('width', parseInt(lbi.css('width')).toString() + "4px") 
     .css('padding-left', '2px'); 
     $('.image-display').css('height', parseInt(lbi.css('height')).toString() + "4px") 
     .css('padding-top', '2px'); 

     return $('.image-display').css('opacity', 1.0).fadeIn(300); 
    }); 
    return $('#lightbox-img').each(function() { 
     console.log("triggering for cached image " + this.complete); 
     if (this.complete) { 
     return $(this).load(); 
     } 
    }); 
    }); 
    return false; 
}); 

Так вот, где я не в состоянии понять вещи. В точке, где я делаю lbi = $('#lightbox-img'); Я знаю, что изображение загрузилось либо с сервера, либо с локального кеша. Однако ни функции width(), ни height(), ни CSS никогда не показывают ширину или высоту изображения. Я прошел через это в отладчиках Chrome и Safari и не вижу, что эти атрибуты действительно установлены при загрузке изображения.

Я знаю, что есть тонны модальных плагинов, но это такой простой фрагмент кода, который кажется излишним, чтобы использовать его. У меня есть только одно изображение для отображения за клик, и я могу делать все макеты в нескольких строках кода.

Что мне здесь не хватает?

Answer 1

Вы делаете кое-что, где я не совсем понимаю, почему. Например, .css('width', parseInt(lbi.css('width')).toString() + "4px") в основном умножает ширину на десять, затем добавляет 4.

Однако, когда я бросаю ваш код в скрипке, http://jsfiddle.net/X9GWp/, я не понимаю, о чем вы сообщаете, поэтому я не могу сказать много о том, почему это не сработает для вас. Я должен был сделать некоторые догадки о css, html и данных, так что может быть, поэтому это разные. Если вы предоставите свою собственную скрипку, я бы мог посмотреть.

---

Во всяком случае, здесь очень простой lightbox свободно основанный на вашем codesnippet, но без получения изображения-адрес из запроса JSON.

JavaScript:

/* when lightbox is clicked, fade out */ 
$('.page-cover').on('click', function(){ 
    $(this).fadeOut(400); 
    $('#lightbox-img').hide(); 
}); 

/* when image is loaded, fade in */ 
$('#lightbox-img').load(function(){ 
    $(this) 
     .css('top', ($(window).height()-$(this).height())/2) 
     .fadeIn(300); 
}); 

/* when thumbnail is clicked, load href as image source and fadein lightbox-background*/ 
$('#photo-grid').on('click', 'a', function(event) { 
    event.preventDefault(); 
    $('#lightbox-img').attr('src', $(this).attr('href')); 
    $('.page-cover').fadeIn(300); 
}); 

CSS:

.page-cover { 
    position:absolute; 
    left:0; 
    right:0; 
    top:0; 
    bottom:0; 
    background:rgba(0,0,0,0.6); 
    display:none; 
} 

#lightbox-img 
{ 
    position:relative; 
    display:block; 
    margin:auto; 
} 

HTML:

<div id="photo-grid"> 
    <a href="http://lorempixel.com/200/200/nature/1"><img src="http://lorempixel.com/40/40/nature/1" /></a> 
</div> 

<div class="page-cover"><img id="lightbox-img" /></div> 

http://jsfiddle.net/xLQpZ/