Question

I have an image scroller that I am trying to implement. The image scrolling works, but it is moving vertically instead of horizontally. Here is what I got so far:

<a href = "#" id = "btnNext">Next Image</a>

$('#btnNext').click(function () {
    //Calls new image with value true, meaning next image
    newImage(true);
    return false;
});

function newImage(direction) {
  //Get the current selected item (with selected class), if none was found, get the first item
  current_image = $('#imageGallery li.selected').length ? $('#imageGallery li.selected') : $('#imageGallery li:first');

  //If determines slideshow direction
  if (direction) {    //Next image
      //Get next sibling
      next_image = (current_image.next().length) ? current_image.next() :  $('#imageGallery li:first');
  } else {    //Previous image
      //Get previous sibling
      next_image = (current_image.prev().length) ? current_image.prev() :  $('#imageGallery li:last');
  }

  //Clear selected class
  $('#imageGallery li').removeClass('selected');

  //Reassign selected class to current image
  next_image.addClass('selected');

  //Scroll images
  $('#images').scrollTo(next_image, 800);
}

Update: Here are my quesions:
1) How do I edit this to make it move horizontally?
2) Is there a way to make an image scroller like this without using .scrollTo()?

Answer 1

I assume you want to make the gallery move horizontally, not vertically. (You say both in the question.) This is just a CSS issue: change the list to show horizontally (display: inline-block or float: left for instance) and the scrollTo plugin should do that for you.

It is possible to do this without the scrollTo plugin. The plugin uses the jQuery animate function to move around the page and, well, you can do the same if you want. 🙂 Here’s a quick jsFiddle that uses animate to move pictures in a gallery. Obviously it needs quite a bit of work (doesn’t go back to the beginning at the last pic, only goes 1 way, doesn’t calculate picture width, etc.), but it should hopefully give you an idea of how it can be done.

http://jsfiddle.net/meloncholy/KzBzT/