Question

I’d like to show an image as big as possible. When the user is clicking it in the galerie, it’ll be loaded via ajax and should be resized. Again, the resizing isn’t the problem, if I’m using it by a click-event, it works perfectly, but it’s not correctly triggered, if I include it like this:

$('.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);
  });
});

So far, I think I’ll explayn it shortly, maybe you don’t really have to read this paragraph: The code is triggered by clicking on the thumbnail. First, it gets the id of the picture, that should be loaded and fades in the div, everything will be loaded in and with a loading-gif. After that, the ajax-request will be send, the result will be faded in and when it’s ready, the image (id=bigpic) should be resized. The last lines aren’t very interesting, they just fade out the loading-gif and fading in all the rest, the code is generating.

When I tried to give out some variables, the alert is given before anything is faded in and the width and the height of the picture is null, so I think, the code is triggered before the picture is loaded.

So how is it possible, it is just executed, if the image is fully loaded?

Answer 1

I’ve found another solution:
Via jQuery I get the values of my browsers height and width. I send them with ajax to my script and simply calculate my width and height in the request. Additionaly, I use my old jQuery function with $(window).resize to resize the image, if the dimensions of the browser are changed.
Works perfectly 🙂

ajax-request:

$('.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);
      });
});

resizing with 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" });
    }
});

resizing in the requested php-script (the shadow-helper is a helper I’ve build on my own)

<?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); 
?>