Hi i am trying to create an application, in which 3 images will be shown as thumbnails,if we click on one it will expandand other thumbnails will be hidden.if not selected there will be a timeout and one image will be expanded randomly.

Recommended Answers

How far have you got with your project? Have you written Javascript before? Post what you have done so far.

Jump to Post

All 2 Replies

How far have you got with your project? Have you written Javascript before? Post what you have done so far.

<html>
<head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  <style>
    div{
        float:left;
    }
    .ad{
        float:left;
    }
  </style>
</head>

<body marginwidth="0px" marginheight="0px" onLoad="timer()">

<!--<button type="button" onClick="ad1()"><img src="F:\New folder\January\3_1\Ad Selector\Assets\1.png"/></button>
<button type="button" onClick="ad2()"><img src="F:\New folder\January\3_1\Ad Selector\Assets\2.png"/></button>
<button type="button" onClick="ad3()"><img src="F:\New folder\January\3_1\Ad Selector\Assets\3.png"/></button>
<button type="button" onClick="ad4()"><img src="F:\New folder\January\3_1\Ad Selector\Assets\4.png"/></button>-->
<div id="cont" style="float:left;" >

<div id="t1"><img src="F:\New folder\January\3_1\Ad Selector\Assets\1.png" onClick="ad1()"></div>

<div id="t2"><img src="F:\New folder\January\3_1\Ad Selector\Assets\2.png" onClick="ad2()"></div>

<div id="t3"><img src="F:\New folder\January\3_1\Ad Selector\Assets\3.png" onClick="ad3()"></div>

<div id="t4"><img src="F:\New folder\January\3_1\Ad Selector\Assets\4.png" onClick="ad4()"></div>

</div>

<div id="adv1" style="display:none;" class="ad">

<img src="#">
</div>


<div id="adv2" style="display:none;" class="ad">
<img src="#">
</div>

<div id="adv3" style="display:none;" class="ad">
<img src="#">
</div>


<div id="adv4" style="display:none;" class="ad">
<img src="#">
</div>

<script>

var a;
        function ad1()
        {
        $("#t1,#t2,#t3,#t4").hide();
        $("#adv1").show();
        clearTimeout(a);

        }


        function ad2()
        {
            for(var i=1;i<=4;i++)
            {
                $("#t"+i).hide();
            }

        $("#adv2").show();
        clearTimeout(a);
        }


        function ad3()
        {
        $("#t1,#t2,#t3,#t4").hide();
        $("#adv3").show();
        clearTimeout(a);
        }


        function ad4()
        {
        for(var i=1;i<=4;i++)
            {
                $("#t"+i).hide();
            }
        $("#adv4").show();
        clearTimeout(a);
        }


        function timer()
        {

        a=setTimeout(

        function myFunction()
        {

            var y=Math.floor((Math.random()*4)+1);


            switch(y)
             {
            case 1:
            ad1();
            break;

            case 2:
            ad2();
            break;

            case 3:
            ad3();
            break;

            case 4:
            ad4();
            break;
             } 


        },4000);
        }

</script>


</body>
</html>

I have done this far yet,can you help me

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.21 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.