designersdairy: Thumbnail image gallery using javascript

Step1:

Thumbnail image gallery using javascript

Step2:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <style type="text/css">
        .imgStyle
        {
            width:100px;
            height:100px;
            border:3px solid grey;
        }
        .next, .prev {
            cursor:pointer;
        height:50px;
        width:40px;
        border:none;
        outline:none;
        }
        .next
        {
        position:relative;
        top:-390;
         right:-492px;
        background:url(img/1456158952_ic_navigate_next_48px.svg) no-repeat 0 0;

        }
        .prev
        {
        position:relative;
             top:-390;
            left:-49px;

                 background:url(img/1456159559_ic_keyboard_arrow_left_48px.svg) no-repeat 0 0;

        }


    </style>
</head>
<body>
    <img id="mainImage" style="border:3px solid grey"
         src="img/1.jpg" height="500px" width="540x"/>
    <br />
    <div id="divId" onClick="changeImageOnClick(event)">
        <img class="imgStyle" src="img/1.jpg" />
        <img class="imgStyle" src="img/2.jpg" />
        <img class="imgStyle" src="img/3.jpg" />
        <img class="imgStyle" src="img/4.jpg" />
        <img class="imgStyle" src="img/5.jpg" />
    </div>
    <input type="hidden" id="hdCount" value="0"/>
    <input type="button" class="next" id="divId" onClick="nextImageOnClick(event)" />
     <input type="button" class="prev" id="divId" onClick="prevImageOnClick(event)"/>
    <script type="text/javascript">

        var images = document.getElementById("divId")
                             .getElementsByTagName("img");

        for (var i = 0; i < images.length; i++)
        {
            images[i].onmouseover = function ()
            {
                this.style.cursor = 'hand';
                this.style.borderColor = 'red';
            }
            images[i].onmouseout = function ()
            {
                this.style.cursor = 'pointer';
                this.style.borderColor = 'grey';
            }
        }

        function changeImageOnClick(event)
        {

            event = event || window.event;

            var targetElement = event.target || event.srcElement;

            if (targetElement.tagName == "IMG")
            {
                 mainImage.src = targetElement.getAttribute("src");
            }
        }

        function nextImageOnClick(event)
        {
            var count=parseInt($("#hdCount").val()) + 1;
            if(count < $("#divId img").length )
            {
            $("#hdCount").val(count);


            var x=$("#divId img").eq(count);

            mainImage.src= x.attr('src');

            }
        }

        function prevImageOnClick(event)
        {
            var count=parseInt($("#hdCount").val()) - 1;
            if(count >= 0 )
            {
            $("#hdCount").val(count);
            var x=$("#divId img").eq(count);

            mainImage.src= x.attr('src');
            }
        }
    </script>
</body>
</html>

Step3:

Enjoy folks

designersdairy

Search This Blog

Monday, February 22, 2016

Thumbnail image gallery using javascript

1 comment:

Validating to select in sequencial order using angular