0

I'm using the plug-in jsMovie to display PNG sequences on my page. The problem is that I want to switch to a different function (smaller version of the PNG sequence) when the page is resized below 1500. I've went through quite a few if / if else options but haven't found anything that changes the function while resizing the browser. Here's what I have so far:

$(window).resize(function() {
if( $(this).width() > 1501 ) {

    $('.phoneicon').jsMovie({
        sequence: 'phoneicon_#####.png',
        folder : "images/Contact/PhoneIconPNG3/",
        from: 0,
        to: 63,
        height:410,
        width:551,
        fps:29.97,
        repeat:true,              
    });

    $('.play').mouseenter(function(){
        $('.phoneicon').jsMovie('playClips');
    });
    $('.play').mouseleave(function(){
        $('.phoneicon').jsMovie('stop');
    });

}

else {


    $('.phoneicon').jsMovie({
        sequence: 'Phoneiconsmall_#####.png',
        folder : "images/Contact/PhoneIconPNGSmall/",
        from: 0,
        to: 63,
        height:318,
        width:420,
        fps:29.97,
        repeat:true,              
    });

    $('.play').mouseenter(function(){
        $('.phoneicon').jsMovie('playClips');
    });
    $('.play').mouseleave(function(){
        $('.phoneicon').jsMovie('stop');
    });
}




});

This kind of works but it only displays the sequence when the browser is resized and doesn't dynamically change between the two functions (unless the page is physically refreshed). Also, I haven't found any way of targeting the function with CSS - the jsMovie plugin overrides any CSS that targets the PNG's width or height.

Here is a link the jsMovie Docs I've been using: http://jsmovie.konsultaner.de/#/

Any guidance would be greatly appreciated!

Wing
  • 17
  • 8

1 Answers1

1

Maybe try this:

var timeout;

$(window).resize(function() {
    clearTimeout(timeout);
    timeout = setTimeout(function() {
        $('.phoneicon').jsMovie("destroy");

        if( $(window).width() > 1501 ) {

            $('.phoneicon').jsMovie({
                sequence: 'phoneicon_#####.png',
                folder : "images/Contact/PhoneIconPNG3/",
                from: 0,
                to: 63,
                height:410,
                width:551,
                fps:29.97,
                repeat:true,              
            });

            $('.play').mouseenter(function(){
                $('.phoneicon').jsMovie('playClips');
            });
            $('.play').mouseleave(function(){
                $('.phoneicon').jsMovie('stop');
            });
        }
        else {
            $('.phoneicon').jsMovie({
                sequence: 'Phoneiconsmall_#####.png',
                folder : "images/Contact/PhoneIconPNGSmall/",
                from: 0,
                to: 63,
                height:318,
                width:420,
                fps:29.97,
                repeat:true,              
            });

            $('.play').mouseenter(function(){
                $('.phoneicon').jsMovie('playClips');
            });
            $('.play').mouseleave(function(){
                $('.phoneicon').jsMovie('stop');
            });
        }
    }, 100);

}).resize();

I have added a timeout so that the whole code does not get fired every time you resize the window, only when you have resized it, due to perfomance.

from the docs I believe the destroy function will "remove" the movie lib and then you can re-apply it.

Alex
  • 9,911
  • 5
  • 33
  • 52
  • Alex, thank you for the help! I think the destroy function is definitely the answer to this. Except now the sequence isn’t showing up anymore. In my previous code the sequence would only appear when the window was resized. I’m not really sure how to display it on page load and with the resize function. – Wing Apr 03 '14 at 18:28
  • Also, when I remove the destroy function the sequence appears on load but it still only changes between the functions when the page is physically refreshed. – Wing Apr 03 '14 at 18:39
  • It works!! Thank you Alex! All I needed to do was add a document ready function that just had the If Else statements, along with your code. Thanks again, Chris – Wing Apr 03 '14 at 19:30