Question

I am allowing users to rotate images using jQuery rotate. However, when they do this, the image flows outside of the containing div and overlaps the controls.

My thinking is that if I can get the co-ordinates of the centre of the image, I can then calculate the maximum radius about which it is rotating and use this value to resize the containing div using $.animate.

How would I go about this in jQuery?

Answer 1

You can calculate the center by using image dimensions when its loaded:

var img = $("#image"),
    loaded = false;

img.load(function(){
   if (loaded) return;
   loaded = true;
   var cx = this.width / 2,
       cy = this.height / 2;
   //If you want center coordinates relative to the document
   var pos = $(this).offset();
   cx += pos.left;
   cy += pos.top;
});

//Trigger the event if the image is already loaded
if(img[0].complete) {
    img.trigger("load");
}