.load callback function works sometimes? - php

Question

My image gallery has next and previous links, when the user click on either one it loads an image in the #the_image div, but I need the image resize everytime. My thinking I would put the code to resize the image as a callback function for the .load. But's it doesn't work everytime. Odd thing also, if I put an alert("blah"); after image = $('#the_image'); the image get's positioned correctly every time. Any ideas?
Here's my JS:
<script type="text/javascript">
$(document).ready(function() {
$('#previous').live('click', function(e){
$('#img_wrapper').load( $(this).attr('href') + ' #container',function () {
var height = $(window).height();
var width = $(document).width();
var image = $('#the_image');
$("#the_image").css("max-height",height-200);
image.css({
'max-height': height-200,
'left': width/2 - (image.width() /2)-5,
'top': height/2 -(image.height() /2),
});
prev = $('#previous'); next = $('#next');
prev.css({
'left': 0,
'top': (height/2)-150,
});
next.css({
'left': 924,
'top': (height/2)-150,
});
});
e.preventDefault();
});
});
</script>
This is what works. Thanks to Jasper, had to modify his code a bit:
$(function() {
$(document).delegate('#next', 'click', function (e) {
$('#img_wrapper').load( $(this).attr('href') + ' #container',function () {
var height = $(window).height(),
width = $(document).width();
$("#the_image").bind('load', function() {
var image = $('#the_image');
$("#the_image").css("max-height",height-200);
image.css({
'max-height': height-200,
'left': width/2 - (image.width() /2)-5,
'top': height/2 -(image.height() /2),
});
});
$('#previous').css({
'left' : 0,
'top' : ((height / 2) - 150),
});
$('#next').css({
'left' : 924,
'top' : ((height / 2) - 150),
});
});
e.preventDefault();
});
});

Answer 1

The image has to load before you can get it's width/height.
$(function() {
$(document).delegate('#previous', 'click', function (e) {
$('#img_wrapper').load( $(this).attr('href') + ' #container',function () {
var height = $(window).height(),
width = $(document).width();
//here's the fix, we wait for the image to load before changing it's dimensions
$("#the_image").bind('load', function (
$(this).css({
'max-height' : (height - 200),
'left' : (width / 2 - ($(this).width() / 2) - 5),
'top' : (height / 2 - ($(this).height() / 2)),
});
});
$('#previous').css({
'left' : 0,
'top' : ((height / 2) - 150),
});
$('#next').css({
'left' : 924,
'top' : ((height / 2) - 150),
});
});
e.preventDefault();
});
});
Alternatively I would use a different AJAX function so you can add the load event handler to the image before it is added to the DOM (to make sure you can capture the load event before it fires):
$(function() {
$(document).delegate('#previous', 'click', function (e) {
$.get($(this).attr('href'), function (serverResponse) {
var height = $(window).height(),
width = $(document).width();
//here's the fix, we wait for the image to load before changing it's dimensions
serverResponse = $(serverResponse).find('#container');
serverResponse.find('#the_image').bind('load', function (
$(this).css({
'max-height' : (height - 200),
'left' : (width / 2 - ($(this).width() / 2) - 5),
'top' : (height / 2 - ($(this).height() / 2)),
});
});
//add the new HTML to the DOM, `.load()` did this automatically
$('#img_wrapper').html(serverResponse);
$('#previous').css({
'left' : 0,
'top' : ((height / 2) - 150),
});
$('#next').css({
'left' : 924,
'top' : ((height / 2) - 150),
});
});
e.preventDefault();
});
});

Answer 2

Try this, and remember height and width are properties not methods:
Also, don't store objects into variables unless you're going to do more work than dot chaining only once per event fire. Oh and I also forgot... the +"px" will really help for IE!
<script type="text/javascript">
$(document).ready(function() {
$('body #main #wrapper').on('click', '#previous' function(e){
$('#img_wrapper').find("img").attr("src", $(this).attr('href') + ' #container');
var height = $(window).height(), width = $(document).width();
$('#the_image').css({
'max-height': parseInt((height-200), 10)+"px",
'left': parseInt((width/2 - (image.width /2)-5), 10)+"px",
'top': parseInt((height/2 -(image.height /2)), 10)+"px",
});
$('#previous')css({
'left': 0,
'top': parseInt( ((height/2)-150), 10)+"px",
});
$('#next'.css({
'left': 924+"px",
'top': parseInt( ((height/2)-150), 10)+"px",
});
});
e.preventDefault();
});
});
</script>