Tag Archives: fancybox

RWD Sortable Gallery

Photo_GalleryI spent a a day going through a tutorial on creating a sortable photo gallery that scales to screen.

This relies on fancybox to provide light box functionality to hi-res images.

On resizing the screen, the thumbnails  animate to a new grid lay out.  Other design elements such as the navigation and background art adjust for computer, tablet or phone.

At phone screen size, the light box  behavior is disabled and a straight targeting of the hi-res photos occurs.

This is a type of  product I’ve built in Flash many times, but it’s good to now have one in javascript that i can pull off the shelf  and customize rapidly.

To do-

  • Make the gallery load content dynamically.
  • Test on IE.
  • Test on windows versions of Safari, Chrome, Firefox
  • add light box behavior back to images when screen goes from less than phone screen size up to tablet size or larger.