> InfiniWall

wall

InfiniWall is a script for desktop and mobile that lets you pan/scroll a potentially infinite number of elements on screen. It is obsessively optimized for mobile devices that notoriously have troubles handling a large number of tags at the same time (especially images).

Before you get too excited please consider that the script is still in “proof of concept” stage. Many small glitches need to be solved, customization options should be added and I believe that we can make it even smoother.

If you think I should invest more time on this script you may consider supporting its development.




How it works

The idea is simple. I’m using 25 elements only at any given time. By moving and rearranging them you get the illusion of a seamless indefinitely pannable surface.

Here’s a video

Mobile development makes us better desktop developers. Due to the shortage of memory and resources mobile devices force us to uber optimize our scripts and an optimized script runs better on desktop too. That reminds me of those guys who ported Doom to the Commodore 64. Optimization can bring you really far.

The script gets interesting once you add lazy loading to the mix. In the demo you’ll find in the github repository I’m dynamically loading 25 images out of 100 as soon as they become visible on the screen. Images are then released when they move out of sight. More work is needed to make it rock solid, but I believe it’s time to show it to the world and receive some feedback.

So here it is InfiniWall, you can grab it on github and if it receives some love I’ll keep developing it.

/Share the joy

/Reactions

  • Due to a missing tag in the code the comment form was redirecting to the donation page. Sorry about that, it wasn’t my intention :) now it is fixed.

    Reply
  • This is very nice! It’s simplistic and flipboardy…It would be cool if you click on the image, and it will flip over kinda like the iPad music app and album covers. Also, it would be cool if you had the option to take up the whole screen. Very very nice! Thank you Matteo!

    Reply
    • As soon as I get some spare time I’ll make a more interesting demo with some real data and ajax loaded contents. Dunno a flickr browser maybe (with picture zoom in of course).

      Reply
    • Author: Ambrose Chua
    • Posted on: 2012/10/27
    • At: 07:27

    Thank you! This is what I need. Vey nice. Please work on it.

    Reply
  • Matteo rockssss.

    Reply
    • Author: Paul
    • Posted on: 2012/11/16
    • At: 12:09

    Awesome work! Continue development for sure:)

    Reply
    • Author: Chris
    • Posted on: 2012/11/21
    • At: 20:29

    Do you think that works for an online Shop? If so – i will hire you ;)

    Reply
    • why not? :) but there’s still a lot of work to do

      Reply
    • Author: Carlos Eduardo de Souza
    • Posted on: 2012/12/13
    • At: 17:30

    Yeah, nice job!

    Please keep contributing to our community :)

    Reply
    • Author: Jan-Dirk
    • Posted on: 2013/03/04
    • At: 14:32

    The sample shows a 3×3 grid. Would it be easy to make it a 1×5 grid?

    It seems that configuring the grid has to be done in infiniwall.js. Any suggestions?

    Reply

/Leave a reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>