Scrolling with jQuery

I was creating a photo gallery and wanted to show a few pictures at a time. Then when you hit the next button it would scroll over one picture at a time. I found these plugins for jQuery called serialScroll and scollTo that work great. Plus I added fancybox to it so you could click on the picture to see the full size image.

This is basically how you should have the html set up. Basically what you need to have is an outer wrapper div with the width set to how wide you want the actual gallery. You need to set the overflow to hidden so we only see a few pictures at a time. The next thing is the element that will contain the scolling elements. In this case, the scrolling elements are the “li” tags which are wrapped in a “ul” tag. What is important here is to set a width for the ul tag. If you set a width that is less than the width of all the scrolling elements then they will wrap to the bottom which doesn’t look good. So you can calculate what the width of all the scolling elements are going to be and then set it or just set a really high number if you know that the width of all the elements wont be larger than that.
Another thing to note here is that I wrapped all the image tags in “a” tags with a class=’sidegroup’. This isn’t required for the scolling but is used for fancybox.

<div id='photoprev' style='float:left; cursor:pointer;' >Previous</div>
<div id='photos' style='float:left; width:260px; height:90px; overflow:hidden;'>
  <ul id='innerphotos' style='margin:0; padding:0; list-style:none; width:2000px; padding-left:10px;'>
    <li style='float:left; margin:0 10px; text-align:center; width:100px; height:110px;'>
      <a class='sidegroup' href='photos/341.jpg'>
        <img src='photos/thumbnails/341.jpg'  />
      </a>
    </li>
  </ul>
</div>
<div id='photonext' style='float:left; cursor:pointer;'>Next</div>
<div style='clear:both;'></div>

This is the javascript to initialize the scolling and the fancybox. To see a list of what each option will do click here. There is another option called axis that isn’t mentioned but it will tell the function which way to scoll. Default is ‘xy’ which means it will go down the list in the x direction and then go in the y direction.

	$(document).ready(function(){
		$('#photos').serialScroll({
			items:'li',
			prev:'#photoprev',
			next:'#photonext',
			offset:-5,
			start:0,
			duration:500,
			interval:4000,
			force:true,
			stop:true,
			lock:false,
			exclude:1,
			cycle:true, //don't pull back once you reach the end
			jump: false //click on the images to scroll to them
		});

		$('#photos a.sidegroup').fancybox({
			hideOnContentClick: false,
			zoomSpeedIn:	400,
			zoomSpeedOut:	400
		});
	});

You can view an example of the serial scoll in action here.