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!

score 3 · Answer 1 · answered Oct 09 '12 at 14:10

3

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.

answered Oct 09 '12 at 14:10

Sem

3,758
3
29
50

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 https://github.com/paulirish/infinite-scroll/ – user1464317 Oct 09 '12 at 19:51
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? – Sem Oct 16 '12 at 07:54
You'll want to pass `true` to `outerWidth()` to cause it to include the margins in the calculation: `outerWidth(true)`. See http://api.jquery.com/outerWidth/ for details. – Moxley Stratton Jul 11 '13 at 23:43

score 1 · Answer 2 · answered Oct 24 '12 at 13:49

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>

horizontal infinite scroll

2 Answers2

Linked