javascript : 이미지가로드 된 후 이미지 너비를 설정하려면 어떻게해야합니까?

Question

그래서, 나는 깔끔하게 이미지를 표시 facebox를 사용하고, 나는 정말 큰 이미지의 크기 handeling에 도움이 함수 작성 : (바이올린 : http://jsfiddle.net/LPF85/)

function open_img_in_face_box(id, width){ 
    max_width = $j(document).width(); 
    max_height = $j(document).height(); 
    padding = 50; 

    max_width = max_width - (2 * padding); 
    max_height = max_height - (2 * padding); 

    passed_width = width || max_width; 

    var img = $j('#' + id); 
    dom_img = document.getElementById(id); 

    // display 
    jQuery.facebox({ image: img.attr('src') }); 

    // center and adjust size 
    var aspect_ratio = img.width()/img.height(); 
    var img_width = passed_width; 
    var img_height = passed_width/aspect_ratio; 

    window_center_y = max_height/2; 
    window_center_x = max_width/2; 

    offset_y = window_center_y - (img_height/2); 
    offset_x = window_center_x - (img_width/2); 

    var fbx = $j('#facebox'); 
    fbx.css('left', offset_x + 'px !important'); 
    fbx.css('top', offset_y + 'px !important') 

    $j("#facebox .image img").load(function(){ 
     $j(this).width(img_width); 
    }); 
} 

을하지만 문제는 이미지가 남아있다 전체 크기이며 500으로 변경되지 않습니다 (현재 img_width에 사용중인 값).

로드 한 이미지의 너비를 어떻게 바꿀 수 있습니까? 그러나 아무도 알려지지 않을 정도로 빨리 변경합니까?

나는이 HTML과 크롬이 테스트 및 Safari했습니다

<img id="facebox_img" onclick="open_img_in_face_box('facebox_img', 500)" src="/medias/50/original.jpg" width="300" /> 

Answer 1

을 시도 당신은 갈 :

교체 :

$j("#facebox .image img").load(function(){ 
    $j(this).width(img_width); 
}); 

포함 :

$j(document).bind('reveal.facebox', function() { 
    $j("#facebox .image img").width(width); 
}) 

이 새로운 코드는 reveal 이벤트를 수신하고 모든 요소가 배치되면 그에 따라 너비를 설정합니다.

Answer 2

여기이

$j("#facebox .image img").each(function(){ 
    $(this).load(function(){ 
     $j(this).width(img_width); 
    }).attr("src", $j(this).attr("src")); 
});