Image Scaling on Mouseover Event in Windows Store App

Introduction

Today we will create a Metro Style App using JavaScript. We will create an image gallery and scale the images in a Mouseover event using a jQuery library. So first of all we will added a jQuery library to our project and using it to create a link in our HTML page.

In the following we are including the entire code of the HTML file and the JavaScript file to create this mini application. 

Step 1 : First, you will create a new Metro Style Application. Let us see the description with images of how to create it.

  • Open Visual Studio 2012
  • File -> New -> Project
  • Choose Template -> JavaScript -> Metro Style Application
  • Rename the application

img11.gif

Step 2 : In the Solution Explorer there are two files that we will primarily work with; the Default.Html file:

img2.gif

Step 3 : First of all we add a jQuery library to our project. The JavaScript code and the style sheet code is written in the header section. The following is the contents of the project:

 

  • JavaScript Code

  • Style Sheet Code

Code :

 

<link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />

    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>

    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>

    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            var cont_left = $("#container").position().left;

            $("a img").hover(function () {

                // hover in

                $(this).parent().parent().css("z-index", 1);

                $(this).animate({

                    height: "550",

                    width: "550",

                    left: "-=100",

                    top: "-=100"

                }, "fast");

            }, function () {

                // hover out

                $(this).parent().parent().css("z-index", 0);

                $(this).animate({

                    height: "150",

                    width: "150",

                    left: "+=100",

                    top: "+=100"

                }, "fast");

            });

 

            $(".img").each(function (index) {

                var left = (index * 160) + cont_left;

                $(this).css("left", left + "px");

            });

        });

</script>

Code:

 

<style type="text/css">

               #container {

                   text-align: center;

                   position: absolute;

                   left: 260px;

                   margin-top: 150px;

                   width: 790px;

               }

               .img {

                   position: fixed;

                   z-index: 0;

               }

               .end {

                   margin-right: 0;

               }

               .clear {

                   clear: both;

               }

               .img a img {

                   position: relative;

                   border: 0 solid #fff;

               }

 </style>

 

Step 4 : The complete code of this application is written below. It contains the code of HTML file code and JavaScript file code.

 

Code:

 

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>App3</title>

 

    <!-- WinJS references -->

    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />

    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>

    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>

    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            var cont_left = $("#container").position().left;

            $("a img").hover(function () {

                // hover in

                $(this).parent().parent().css("z-index", 1);

                $(this).animate({

                    height: "550",

                    width: "550",

                    left: "-=100",

                    top: "-=100"

                }, "fast");

            }, function () {

                // hover out

                $(this).parent().parent().css("z-index", 0);

                $(this).animate({

                    height: "150",

                    width: "150",

                    left: "+=100",

                    top: "+=100"

                }, "fast");

            });

 

            $(".img").each(function (index) {

                var left = (index * 160) + cont_left;

                $(this).css("left", left + "px");

            });

        });

</script>

 

    <style type="text/css">

               #container {

                   text-align: center;

                   position: absolute;

                   left: 260px;

                   margin-top: 150px;

                   width: 790px;

               }

               .img {

                   position: fixed;

                   z-index: 0;

               }

               .end {

                   margin-right: 0;

               }

               .clear {

                   clear: both;

               }

               .img a img {

                   position: relative;

                   border: 0 solid #fff;

               }

         

 </style>

    <!-- App3 references -->

    <link href="/css/default.css" rel="stylesheet" />

    <script src="/js/default.js"></script>

</head>

<body>

    <div style="margin-top:50px;margin-left:100px"><h1 style="font-weight:bold">Image Scaling in Metro Apps on Mouseover Event</h1></div>

        <div id="container">

               <div class="img"><a href="#"><img src="img/1.jpg"/></a></div>

               <div class="img"><a href="#"><img src="img/2.jpg"/></a></div>

            <div class="img"><a href="#"><img src="img/3.jpg"/></a></div>

            <div class="img"><a href="#"><img src="img/4.jpg"/></a></div>

            <div class="img"><a href="#"><img src="img/6.jpg"/></a></div>

            <div class="img"><a href="#"><img src="img/7.jpg"/></a></div>

               <div class="img end"><a href="#"><img src="img/5.jpg"/></a></div>

               <div class="clear"></div>

           </div>

 </body>

</html>

 

Step 5 : After running this code the output looks like this:

img3.gif

In the Mouse over event the first image will be scaled in size:

img4.gif

On Mouse over of the third image:

img5.gif

Up Next
    Ebook Download
    View all
    Learn
    View all