Sunday 30 September 2018

JavaScript: Gallery Application

In this post, I am going to show you a gallery application, where user selects a link and based on the selection the image is displayed without refreshing the page.

<ul>
         <li>
                  <a href="rabbit.jpeg" onclick="changeImage(this); return false;">Rabbit</a>
         </li>
        
         <li>
                  <a href="lion.jpeg" onclick="changeImage(this); return false;">Lion</a>
         </li>
        
         <li>
                  <a href="tiger.jpg" onclick="changeImage(this); return false;">Tiger</a>
         </li>
                                   
         <li>
                  <a href="wolf.jpeg" onclick="changeImage(this); return false;">Wolf</a>
         </li>
</ul>

Whenever user clicks on image, I am calling changeImage function by passing ‘this’ as argument. ‘this’ keyword is used to refer current element.

changeImage(this); return false;
See above statement, after calling changeImage(this); function, I am immediately returning false, it stops the default behaviour of hyper link tag (By default it opens the image in separate page).

<img src="rabbit.jpeg" id="placeHolder"></img>
Above statement is the place holder for the image.

Following is the implementation of changeImage function.

function changeImage(element){
         var imgValue = element.getAttribute("href");
         var placeHolder = document.getElementbyId("placeHolder");
         placeHolder.setAttribute("src", imgValue);
}

Following is the complete working application.

image.html

<!DOCTYPE html>

<html>

<head>
    <title>Image Gallery</title>

    <style type="text/css">
        .left {
            float: left;
            width: 40%;
            font-size: 2em;
        }
        
        .right {
            float: left;
            margin-left: 2em;
        }
    </style>

</head>

<body>
    <h1>Click on any hyper link</h1>

    <div class="left">
        <ul>
            <li>
                <a href="rabbit.jpeg" onclick="changeImage(this); return false;">Rabbit</a>
            </li>
            <li>
                <a href="lion.jpeg" onclick="changeImage(this); return false;">Lion</a>
            </li>
            <li>
                <a href="tiger.jpg" onclick="changeImage(this); return false;">Tiger</a>
            </li>

            <li>
                <a href="wolf.jpeg" onclick="changeImage(this); return false;">Wolf</a>
            </li>
        </ul>
    </div>

    <div class="right">
        <img src="rabbit.jpeg" id="placeHolder"></img>
    </div>

    <script>
        function changeImage(element) {
            var imgValue = element.getAttribute("href");
            var placeHolder = document.getElementbyId("placeHolder");
            placeHolder.setAttribute("src", imgValue);
        }
    </script>
</body>

</html>


Previous                                                 Next                                                 Home

No comments:

Post a Comment