Draggable Image Boxes Grid
Today we want to create a template with a fullscreen grid of images and content areas. The idea is to have a draggable grid that shows boxes of thumbnails and menu like items. Once clicked, the thumbnail will expand to the full size image and the menu item box will expand to a fullscreen content area. View demo Download source The main idea for this template and its effects comes from the beautiful Flash-based website of Stephen Hamilton. To make the grid draggable, we used jQuery.kinetic by Dave Taylor. The beautiful images in the demo are by Ibrahim Iujaz. So, let’s begin! The Markup The main container will be a div with the class and ID ib-main-wrapper. The boxes for the content will have the class ib-content. For the content and image preview we will use jQuery templates. We will have the large image, the navigation buttons, a closing cross and a loading element. The template for the fullscreen content preview looks like this: Now, let’s style the grid. The CSS And that was all the style.