jQuery: изменение размера изображения после загрузки - изменение размера уже работает, но не активировано

Question

Я бы хотел показать изображение как можно больше. Когда пользователь щелкает его в галерее, он будет загружен через ajax и должен быть изменен. Опять же, изменение размеров не проблема, если я использую его с помощью щелчка события, он отлично работает, но это не правильно срабатывает, если я включаю его, как это:

$('.thumbnail').click(function() { 
    id = $(this).attr('id'); 
    $('#picbox').fadeIn(fadeSpeed); 
    $('#picture').load("/propfe/ajax/picture/" + id); 
    $('#picture').fadeIn(fadeSpeed); 

    $('#bigpic').ready(function() { 
    var browserHeight = $(window).height() - 200; 
    var browserWidth = $(window).width() - 200; 
    var height = $('#bigpic').height(); 
    var width = $('#bigpic').width(); 

    var picRatio = width/height; 
    var windowRatio = browserWidth/browserHeight; 

    if(picRatio < windowRatio) { 
     $('#bigpic').css({ "height": browserHeight + "px" }); 
    } 
    if(picRatio > windowRatio) { 
     $('#bigpic').css({ "width": browserWidth + "px" }); 
    } 

    }); 

    $('.pic_loader').fadeOut(fadeSpeed, function() { 
    $('.pic_loaded').fadeIn(fadeSpeed); 
    }); 
}); 

До сих пор я подумайте, что я скоро это выучу, может быть, вам действительно не нужно читать этот параграф: Код запускается нажатием на миниатюру. Во-первых, он получает идентификатор изображения, который должен быть загружен и исчезать в div, все будет загружено и с загрузкой-gif. После этого запрос ajax будет отправлен, результат будет исчезать, и когда он будет готов, изображение (id = bigpic) должно быть изменено. Последние строки не очень интересны, они просто исчезают из загрузочного гифа и исчезают во всем остальном, код генерируется.

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

Так как это возможно, оно просто выполнено, если изображение полностью загружено?

Answer 1

Я нашел другое решение: Через jQuery Я получаю значения высоты и ширины моих браузеров. Я отправляю их с ajax в свой скрипт и просто вычисляю свою ширину и высоту в запросе. Кроме того, я использую свою старую функцию jQuery с $ (window) .resize, чтобы изменить размер изображения, если размеры браузера изменены. работает отлично :-)

Ajax-запрос:

$('.thumbnail').hover(function() { 
    $('.thumbnail').css({ "cursor": "pointer" }); 
}); 
    var browserHeight = $(window).height(); 
    var browserWidth = $(window).width(); 

$('.thumbnail').click(function() { 
    id = $(this).attr('id'); 
    $('#picbox').fadeIn(fadeSpeed); 
    $('#picture').load("/propfe/ajax/picture/" + id + '/' + browserWidth + '/' + browserHeight, function() { 
    }); 
    $('#picture').fadeIn(fadeSpeed); 

     $('.pic_loader').fadeOut(fadeSpeed, function() { 
     $('.pic_loaded').fadeIn(fadeSpeed); 
     }); 
}); 

изменение размеров с помощью JQuery:

$(window).resize(function() { 
    var browserHeight = $(window).height(); 
    var browserWidth = $(window).width(); 
    var windowRatio = browserWidth/browserHeight; 

    var height = $('#bigpic').height(); 
    var width = $('#bigpic').width(); 
    var picRatio = width/height; 

    if(picRatio < windowRatio) { 
     $('#bigpic').css({ "height": browserHeight - 180 + "px" }); 
    } 
    if(picRatio > windowRatio) { 
     $('#bigpic').css({ "width": browserWidth -150 + "px" }); 
    } 
}); 

изменение размера в запрашиваемом PHP-скрипт (теневая-хелперов является помощником Я на собственном основании)

<?php 
$ratio = $height/$width; 
$iA = getimagesize("img/".$picture['Picture']['url']); 
$bild["width"] = $iA[0]; 
$bild["height"] = $iA[1]; 
$pRatio = $bild["height"]/$bild["width"]; 
$nwidth = null; $nheight = null; 
if($pRatio < $ratio) { $nwidth = $width - 150; } 
elseif($pRatio > $ratio) { $nheight = $height - 180; } 
echo $this->Shadow->image($picture['Picture']['url'], 'big', $nwidth, $nheight); 
?> 

Answer 2

Я использую этот скрипт на странице моего, я написал свой собственный осветитель (без навигации)

$('.lb_img').attr('src', $(this).attr('href')).load(function() { 
    $('.lb_container img').css({'max-height': winheight-80, 'max-width': winwidth-80}); 
    $('.lb_container').css({'margin-left': -$('.lb_container').width()/2-10, 'top': winheight/2-$('.lb_container').height()/2-10}); 
}); 

$('.lb_container img').css({'max-height': winheight-80, 'max-width': winwidth-80}); 
$('.lb_container').css({'margin-left': -$('.lb_container').width()/2-10, 'top': winheight/2-$('.lb_container').height()/2-10}); 

Когда изображение загружается я размер макс-высота изображения к высоте окна - 80px и центр изображения, затем я делаю это снова за пределами обратного вызова load(), чтобы он работал в IE.