locked
Making slideshow using createPeekAnimation()

    Question

  •                 <div class="tile-rect-medium">
                        <img id="item_image_1" class="item-image" src="/images/home/slide1.jpg"/>
                        <img id="item_image_2" class="item-image" src="/images/home/slide2.jpg"/>

                        <img id="item_image_3" class="item-image" src="/images/home/slide3.jpg"/>

                    </div>

    I want to animate the above images using createPeekAnimation() function in javascript. I have downloaded the sample code but i couldn't able to make that. So, please send me the javascript code to animate that as slideshow.

    Monday, March 25, 2013 1:22 PM

Answers

  • The below code animates between 4 images. 

    Create a blank JavaScript app and update the below files (default.html & default.js) with the following contents:

    default.html:
    =============
        ...
        ...
        <style>
            .clsImageTest  {
                height:375px;
                width:500px;
                border:dashed;
                overflow:hidden;
            }
            .item-image {
                height:375px;
                width:500px;
                ;
            }
        </style>
    </head>
    <body>
        <p>Content goes here</p><br />
        <input type="button" id="btnAnimate" value="Create SlideShow"/><br /><br />
        <div id="divImageTest" class="clsImageTest">
            <img id="item_image_1" class="item-image" src="/animations/Chrysanthemum.jpg"/>
            <img id="item_image_2" class="item-image" src="/animations/Desert.jpg"/>
            <img id="item_image_3" class="item-image" src="/animations/koala.jpg"/>
            <img id="item_image_4" class="item-image" src="/animations/hydrangeas.jpg"/>
        </div>
    </body>
    </html>

    default.js:
    ===========
        ...
        ...
                args.setPromise(WinJS.UI.processAll().done(function () {
                    document.getElementById("btnAnimate").addEventListener("click", btnAnimate_Clicked, false);
                }));
        ...
        ...
        var ctrLoop = null;
        function btnAnimate_Clicked() {
            ctrLoop = 1;
            peekImages();
            setInterval(function () { peekImages() }, 2000);
        }

        // Play the Peek animation
        function peekImages() {
            // Create peek animation
            var peekAnimation = WinJS.UI.Animation.createPeekAnimation([item_image_1, item_image_2, item_image_3, item_image_4]);

            // Reposition tiles to their desired post-animation position
            var position = ctrLoop * -375;
            item_image_1.style.top = position + "px";
            item_image_2.style.top = position + "px";
            item_image_3.style.top = position + "px";
            item_image_4.style.top = position + "px";
            ctrLoop++;
            if (ctrLoop == 4) ctrLoop = 0;
           
            // Execute animation
            peekAnimation.execute();
        }

     


    @prashantphadke || Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog! http://aka.ms/t4vuvz

    • Marked as answer by Song Tian Friday, March 29, 2013 8:58 AM
    Tuesday, March 26, 2013 11:40 PM
    Moderator

All replies

  • Why don't you use the FlipView control if you only want to provide a flipping type of functionality in your app? See this link that goes over the animation topics: http://msdn.microsoft.com/en-us/library/windows/apps/hh465165.aspx and the FlipView control sample that shows how to create a FlipView: http://code.msdn.microsoft.com/windowsapps/FlipView-control-sample-18e434b4

    @prashantphadke || Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog! http://aka.ms/t4vuvz

    Tuesday, March 26, 2013 12:28 AM
    Moderator
  • I want to change the images of div at regular interval by using the createPeekAnimation() function.

    I don't want to use FlipView.

    Tuesday, March 26, 2013 4:37 AM
  • The below code animates between 4 images. 

    Create a blank JavaScript app and update the below files (default.html & default.js) with the following contents:

    default.html:
    =============
        ...
        ...
        <style>
            .clsImageTest  {
                height:375px;
                width:500px;
                border:dashed;
                overflow:hidden;
            }
            .item-image {
                height:375px;
                width:500px;
                ;
            }
        </style>
    </head>
    <body>
        <p>Content goes here</p><br />
        <input type="button" id="btnAnimate" value="Create SlideShow"/><br /><br />
        <div id="divImageTest" class="clsImageTest">
            <img id="item_image_1" class="item-image" src="/animations/Chrysanthemum.jpg"/>
            <img id="item_image_2" class="item-image" src="/animations/Desert.jpg"/>
            <img id="item_image_3" class="item-image" src="/animations/koala.jpg"/>
            <img id="item_image_4" class="item-image" src="/animations/hydrangeas.jpg"/>
        </div>
    </body>
    </html>

    default.js:
    ===========
        ...
        ...
                args.setPromise(WinJS.UI.processAll().done(function () {
                    document.getElementById("btnAnimate").addEventListener("click", btnAnimate_Clicked, false);
                }));
        ...
        ...
        var ctrLoop = null;
        function btnAnimate_Clicked() {
            ctrLoop = 1;
            peekImages();
            setInterval(function () { peekImages() }, 2000);
        }

        // Play the Peek animation
        function peekImages() {
            // Create peek animation
            var peekAnimation = WinJS.UI.Animation.createPeekAnimation([item_image_1, item_image_2, item_image_3, item_image_4]);

            // Reposition tiles to their desired post-animation position
            var position = ctrLoop * -375;
            item_image_1.style.top = position + "px";
            item_image_2.style.top = position + "px";
            item_image_3.style.top = position + "px";
            item_image_4.style.top = position + "px";
            ctrLoop++;
            if (ctrLoop == 4) ctrLoop = 0;
           
            // Execute animation
            peekAnimation.execute();
        }

     


    @prashantphadke || Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog! http://aka.ms/t4vuvz

    • Marked as answer by Song Tian Friday, March 29, 2013 8:58 AM
    Tuesday, March 26, 2013 11:40 PM
    Moderator