Horizontgal scrolling of image links

JavaScript
1

Hello,

I’m not so familiar with jQuery. I hope that someone can push me in the right direction.


<nav id="small-box-links" class="nav-collapse" >
      <ul>
		<li><a href="#small-box1"><img src="/images/templat/brands/logo_image_1.png" alt="brandname"/></a></li>
	    	<li><a href="#small-box2"><img src="/images/templat/brands/ogo_image_2.png" alt="brandname"/></a></li>
		<li><a href="#small-box3"><img src="/images/templat/brands/ogo_image_3.png" alt="brandname"/></a></li>
		<li><a href="#small-box4"><img src="/images/templat/brands/ogo_image_4.png" alt="brandname"/></a></li>
		<li><a href="#small-box5"><img src="/images/templat/brands/ogo_image_5.png" alt="brandname"/></a></li>
		<li><a href="#small-box6"><img src="/images/templat/brands/ogo_image_6.png" alt="brandname"/></a></li>
		<li><a href="#small-box7"><img src="/images/templat/brands/ogo_image_7.png" alt="brandname"/></a></li>
		<li><a href="#small-box8"><img src="/images/templat/brands/ogo_image_8.png" alt="brandname"/></a></li>
      </ul>

So as you can see I have in the first place 8 logo brand links. This was ok so far, for space I have. Now we have to add more logo’s but the horizontal space is limited. So now is the idea to show 6 brand logo’s and add a arrow on the left side <– and one on the right side –>. So when you click for example on the right arrow –> then the logo’s has scroll one position to the left with a new logo comes visible on the right side. The logo on the most left is srolling away. And of course if you click on the left arrow <– just the opposite is happening.

Can anyone help me out how to create this with Jquery?

And one thing what I do not know if this is necessary, but is it necessary to configure how many branding logo’s must be visible. Let say 6 branding logo’s are visible.

I hope that I’m clear.

Thanks.

Nico

2

Can anyone help me out how to create this with Jquery?

The script below will allow you to scroll in both directions on clicking the side buttons. It functions by adding or subtracting child nodes from the collection of images. The script works in all browsers back to IE7. It is written in javascript, rather than JQuery. Perhaps you can convert it as an exercise. :slight_smile:

Here is a [B][COLOR=“#0000FF”]JS Fiddle link[/COLOR][/B] so that you can see it working. Unfortunately js Fiddle does not allow this script to operate below IE9.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Horizontal Scroll</title>
<script type="text/javascript">
 var allImages, currentLeftObj, currentRightObj; // global
 function goLR(dirn)
  { var parentN=currentLeftObj.parentNode;
    var pNodeChild=parentN.childNodes;
    var topChild=null;
    var thisDirnObj=(dirn=="L")? currentLeftObj : currentRightObj;
    for(var i=0;i<pNodeChild.length;i++)
    { if(typeof pNodeChild[i].id !="undefined" && pNodeChild[i].id !="")
        {  if(!topChild){ topChild=pNodeChild[i]; }     // save first left child
           if(pNodeChild[i].id==thisDirnObj.id)
              { var thisChildNode=currentLeftObj.parentNode.removeChild(pNodeChild[i]);
                if(dirn=="L")
                  { parentN.appendChild(thisChildNode); }
                 else
                  { parentN.insertBefore(thisChildNode,topChild); }
                getCurrent();
              }
          }
      }
    }
// -----------
  function getCurrent(){
   allImages=document.getElementById("imgWrap").getElementsByTagName("img");
   currentLeftObj= allImages[0];
   currentRightObj=allImages[allImages.length-1];
  }
// --------
 window.onload=getCurrent;
</script>
<style type="text/css">
body { font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:13px; color:#000; text-align:center; margin:3px 0px; }
#wrap  { position:relative; width:900px; height:500px; margin:0px auto; border:1px solid #CCC;  }
#catchAll { position:relative; top:0px; left:0px; width:540px; height:110px; margin:50px auto;  }
#holder  { position:relative; top:0px; left:0px; width:540px; height:105px; border:1px solid #000; }
#holder  { padding:5px; text-align:center; clip:auto; overflow:hidden; }
#imgWrap  { width:800px; height:105px; margin-left:-110px; text-align:left; }
#imgWrap img  { margin-right:10px;  }
#btnL   { left:-50px;  }
#btnR   { right:-55px; }
.btn  { position:absolute; bottom:0px; width:30px; height:30px; border:1px solid #00F; }
.btn  { background-color:#EEE; text-align:center; cursor:pointer; font-size:18px; padding-top:5px; }
</style>
</head>

<body>

<div id="wrap">
  <div id="catchAll">
    <div id="holder">
      <div id="imgWrap">
        <script type="text/javascript">
  		var i, build="";
  		for(i=1;i<8;i++)
 			{ build+='<img id="a'+i+'" border="0" src="B'+i+'.jpg" width="100" height="100">'; }
   		document.write(build);
        </script>
      </div>
    </div>
    <div id="btnL" class="btn" onclick="goLR('L')">
      <<</div>
    <div id="btnR" class="btn" onclick="goLR('R')">
      >></div>
  </div>
</div>

</body>

</html>
3

JSFidde is quite broken in IE8 and below.

4

I have fixed it, see my other thread