Home/ Questions/Q 7850561
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T18:53:52+00:00

I currently have a small working JS gallery (onmouseover). The code is below. What

  • 0

I currently have a small working JS gallery (onmouseover). The code is below. What I would like to achieve is the small images, only a few being displayed at a time. I have found a youtube video of the affect I would like to achieve: video

HTML (code omitted):

<div id="imagecontent">
     <img id="about_mojang" src="images/about_mojang_small.jpg" alt="Plain Mojang Logo">
     <img id="about_lego" src="images/about_lego_small.jpg" alt="Minecraft Lego">
     <img id="about_cteam" src="images/about_cteam_small.jpg" alt="Cartoon of the Mojang team">
     <img id="about_minecraftmojang" src="images/about_minecraftmojang_small.jpg" alt="Minecraft logo of Mojang">
     <img id="about_team" src="images/about_team_small.jpg" alt="Photo of the Moajgn team">
     <img id="about_wall" src="images/about_wall_small.jpg" alt="A wall in the Mojang office">
</div>
<div id="bigimage"></div>
<script>window.onload=addImages() ;</script>
</body>

JS (code omitted):

function showPic(i_element) {
  var source = i_element.getAttribute("id") ;
  source  = "images/"+source+".jpg" ;
  var alt = i_element.getAttribute("alt") ;

  var i = document.createElement("img") ;
  i.setAttribute("src",source) ;
  i.setAttribute("alt",alt) ;

  var placeholder = document.getElementById("bigimage") ;
  if (placeholder.childNodes.length != 0 ) 
  {  placeholder.removeChild(placeholder.childNodes[0]); }
  placeholder.appendChild(i) ;

}


//  add the onclick event to the DOM
function addImages() {
    var item = document.getElementById("imagecontent").getElementsByTagName("img") ;
    for (var i=0 ; i<item.length ; i++) {
      item[i].onmouseover = function() {showPic(this) ; } ;
    }

}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    check jsfiddle output: http://jsfiddle.net/srinivasan/EfyKe/

    try something like this

     <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <script src="http://code.jquery.com/jquery-latest.js"></script>
            <script type="text/javascript">
            function showPic(i_element) {
              var source = i_element.getAttribute("id") ;
              source  = "images/"+source+".jpg" ;
              var alt = i_element.getAttribute("alt") ;

              var i = document.createElement("img") ;
              i.setAttribute("src",source) ;
              i.setAttribute("alt",alt) ;

              var placeholder = document.getElementById("bigimage") ;
              if (placeholder.childNodes.length != 0 ) 
              {  placeholder.removeChild(placeholder.childNodes[0]); }
              placeholder.appendChild(i) ;

            }


            //  add the onclick event to the DOM
            function addImages() {
                var item = document.getElementById("imagecontent").getElementsByTagName("img") ;
                for (var i=0 ; i<item.length ; i++) {
                  item[i].onmouseover = function() {showPic(this) ; } ;
                }


            }





            </script>
            <style>

            </style>
            </head>
            <body>
            <div id="bigimage" style="height:50px; width:100px; border:1px solid red; margin:0 auto;"></div>
            <div id="prev" style=" width:50px; height:25px; float:left;" ><img src="http://dummyimage.com/25x25/900/FFF.jpg&text=PREV" /></div>

            <div id="imagecontent" style="width:400px; margin:0 auto; border:1px solid red; height:50px;position:relative; overflow:hidden; ">
            <div id="slider" style="width:400px;  float:left; overflow:hidden; position:absolute; " >

                 <img id="about_mojang" src="http://dummyimage.com/50x50/000000/fff.jpg&text=VS" alt="Plain Mojang Logo">
                 <img id="about_lego" src="http://dummyimage.com/50x50/000000/fff.jpg&text=VS" alt="Minecraft Lego">
                 <img id="about_cteam" src="http://dummyimage.com/50x50/000000/fff.jpg&text=VS" alt="Cartoon of the Mojang team">
                 <img id="about_minecraftmojang" src="http://dummyimage.com/50x50/000000/fff.jpg&text=VS" alt="Minecraft">
                 <img id="about_team" src="http://dummyimage.com/50x50/000000/fff.jpg&text=VS" alt="Photo of the Moajgn team">
                 <img id="about_wall" src="http://dummyimage.com/50x50/000000/fff.jpg&text=VS" alt="A">
                 <img id="about_team" src="http://dummyimage.com/50x50/000000/fff.jpg&text=VS" alt="Photo of the Moajgn team">
                 <img id="about_team" src="http://dummyimage.com/50x50/000000/fff.jpg&text=VS" alt="Photo of the Moajgn team">
                 <img id="about_wall" src="http://dummyimage.com/50x50/000000/fff.jpg&text=VS" alt="A">

            </div>
            </div>
            <div id="next" style=" float:right; width:25px; height:25px;"><img src="http://dummyimage.com/25x25/900/FFF.jpg&text=NEXT" /></div>

            <script>window.onload=addImages() ;</script>
            <script type="text/javascript">
            var i=0;
            var speed=5;
              $("#next").click(function(){
                  i=document.getElementById('slider').style.left;
                    i=(i.replace("px",""));
                  for(j=0;j<speed;j++){
                $("#slider").animate({left:i},"fast");
                i=i-60;
                  }

               });


             $("#prev").click(function(){
                 i=document.getElementById('slider').style.left;
                 i=(i.replace("px",""));
                 if(i!='0'&&i<'0'){
                  for(j=0;j<speed;j++){
                $("#slider").animate({left:i},"fast");
                i=parseInt(i)+parseInt(60);
                  }
                 }
                 else{
                     $('#prev').attr('disabled', '');
                 }
               });
            </script>
            </body>
            </html>
    • 0