Leon van der Veen
Leon van der Veen

Reputation: 1672

resize image on window resize

I'm building a picture viewer and i've an issue with my code:

$('.table_content_results table').click(function()
{
    $('#overlay').show();
    $('#pdfFrame').show();  
    $(window).resize(); 
});

$(window).resize(function()
{

    var contentWidth = $('#pdfFrame').children('img').width();
    var contentHeight = $('#pdfFrame').children('img').height();

    var imageWidth = contentWidth/2;
    var imageHeight = contentHeight/2;

    $('#pdfFrame').children('img').width(imageWidth).height(imageHeight);

    $('#pdfFrame').css(
    {
        position:'absolute',
        left: ($(window).width() - imageWidth)/2,
        top: ($(window).height() - imageHeight)/2
    });
});

With the script I crops the size of the image in the div #pdfFrame. One problem is for each time I resize my window the image crops for 50%. My question is how to prevent this for cropping over and over again.

It only have to crop by showing the image for the first time.

I hope someone can help me.

Thanks in advance!

Upvotes: 1

Views: 772

Answers (1)

Henesnarfel
Henesnarfel

Reputation: 2139

As of right now its going to change on any resize of the window. Is what you are probably wanting is that if the window reaches a certain size for the image to crop. So you need to check the window size.

$(window).resize(function()
{
   if($(window).width() < 400 || $(window).height() < 400)
   {
      //execute crop
   }
}

Upvotes: 2

Related Questions