blasten / turn.js

The page flip effect for HTML5
www.turnjs.com
Other
7.23k stars 2.48k forks source link

Resize Images outside of memory Range? #88

Closed knotdvn closed 12 years ago

knotdvn commented 12 years ago

Is there a way to re-size the images that are not on the page?

When I use a jQuery $('selector').find('img').each(function(){ resize-code});

It only resizes the img's that are in the memory range, and on the page. I call this code on the event :turning

Yet for users who only use the corner-drag this event seems not to fire until :turned. You can see the improperly resized images and when turn completes they resize quickly, its not a break in functionality, just a little unappealing.

Here is some resizing code hard coded for a specific 612 by 792 set of img's.

$('#magazine').turn({
        gradients: true, 
        acceleration: true,
        when: {
            turning: function(e, page) {
                $('#page-number').val(page);
                resizeMe();

            }
        }
    });

function resizeMe(){ //width is bigger if ( $(window).width() < 1224 ){

var imgW = ( $(window).width() / 2 ) - 50;

$('#magazine').find('img').each(function(){ $(this).attr('width', imgW);

});//end each var imgH = ( ( 792 * imgW ) / 612 );

$('#magazine').turn('size',( imgW * 2 ), imgH ); $('#magazine').turn('resize');

}

}//end function resizeMe

knotdvn commented 12 years ago

If you call the resize function on :turning and on :turned you will hit all pages in memory before the turn and after the turn!