horizontal infinite scroll

Question

I have a horizontal list of images to which I would love to apply an infinite-scroll within a div. Ideally this would just be the window itself, but for right now it's a div.

I think this involves a bit of a hack to Paul Irish's infinite scroll(?) I know I can now set localMode to true in 1.2 for it to work inside of a div, but I also know (think) that I need to trick the browser into thinking content from what would be "next pages." I can't quite figure out how to do that. I've searched and searched and now I would love for you geniuses to offer your brilliant thoughts. Thanks!

Internationalize

Answer 1

If you want elements to line up horizontally, you will need a container that gives a width property. To make that dynamic just add something like this:

$(document).ready(function(){
  var totalWidth = 0;
  $('#container').children().each(function(){
    totalWidth += $(this).outerWidth();
  });
  $('#container').css('width', totalWidth);
});

If you use that container directly under your body and give your body a overflow:scroll . Then give both the container, the body and the html a height of 100% this should be lined up horizontally.

Palladin

Thanks. That certainly helps. I still can't quite wrap my head around how to approach the horizontal infinite scroll. I know it can work within a div, and I know it can be done horizontally as opposed to vertically, I can't get it. The jquery plugin i'm referring to is github.com/paulirish/infinite-scroll – Internationalize

It's easy. Automatic horizontal scroll is impossible because the width will never overrule the width of your window. If that would be the case wouldn't it be annoying to read text without enters as one long line of text? – Palladin

You'll want to pass true to outerWidth() to cause it to include the margins in the calculation: outerWidth(true). See api.jquery.com/outerWidth for details. – Reduplicative

Answer 2

Lazyload is exactly what I was looking for. http://www.appelsiini.net/projects/lazyload. I have a list of images within a container called #image_list.

$(document).ready(function () {
    $("#image_list img").lazyload({
          effect : "fadeIn"

      });
});

That much is pretty self-explanatory. And then the horizontal infinite list that I wasn't doing the best job of explaining is contained within this div:

#image_list {
 margin: 0 auto;
 white-space: nowrap;
 width: auto;
 overflow: auto;
 clear: both;
 position: relative;
}

It's ACTUALLY not a list though because firefox refused to not wrap it! So it's a table row with endless td's:

<table>
 <tbody>
  <tr>
   <td><img src="img1.jpg" /></td>
   <td><img src="img2.jpg" /></td>
        ...
   <td><img src="img34.jpg" /></td>
  </tr>
 </tbody>
</table>

Internationalize