jeudi 28 janvier 2016

Use Onload on image tag in ember

I have a template in which photos are being displayed in a frame ( each frame is different for different images) .I have written a function which uses the images original height and width and gives me customized width and height for that particular frame inorder to restore the aspect ratio.Now I have called that function through onload as images loads on that particular moment.

My feed.hbs( template)

<img src = "{{photo.0.photo_url}}" onload = "OnImageLoad(event);" {{action "imgOverlay0" photo}}/>

Function

function OnImageLoad(evt) {

    var img = evt.currentTarget;

    // what's the size of this image and it's parent
    var w = $(img).width();
    var h = $(img).height();
    var tw = $(img).parent().width();
    var th = $(img).parent().height();

    // compute the new size and offsets
    var result = scaling(w, h, tw, th,false);

    // adjust the image coordinates and size
    img.width = result.width;
    img.height = result.height;
    $(img).css("margin-left", result.targetleft);
    $(img).css("margin-top", result.targettop);
    // console.log("result",result)
    return result;
}

function scaling (w, h, tw, th,false){
   //manipulation with data 

}

But it will not be included in the build of ember as I have kept the function file in bower_compontent.How do I include it in my ember app ?




Aucun commentaire:

Enregistrer un commentaire