Continuing our Series on Sliders, here is the an innovative Grid Accordion slider that saves display space and works well with action shots. Okay, Grid Accordion is not a really a slider – it shows all your images on one page in grid layout. I have seen grid accordions of anywhere from 2 x 2 to 8 x 6 – yes, that’s 8 rows across and 6 columns down. An actual example will help convey the idea of the grid accordion layout:
Grid accordion works well for action shots because it simulates spreading out a Gif Animation over the whole display area. Action sequences as seen in the 3D Gallery Slider work even better for the Grid Accordion because users see the flow of events – particularly in a relatively fast auto-play mode of operation – around 2 seconds or less. Also like the 3D Slider, the Grid Accordion provides for embedded captions and links. This means that a Grid accordion can work well as SplashPage guiding users to the internal web pages of a site like a savvy Featured Attractions sitemap.
Also the Grid Accordion works well with static images such as portfolio images or product shots.
As might be expected, hovering a mouse over a grid cell expands it to full size; but also leaving the mouse over the grid accordion stops the autoplay option until the mouse is moved outside the Grid Accordion screen coverage. The Grid Accordion is semi-responsive – on reload the images will squish down to mobile screen size – try this demo screen for example.Users have control over the size of the collapsed grids, and the color and width of the separators – using either JavaScript options or CSS. Users have absolute control over the position and sizing of captions so one can make robust story grids. In sum, Grid Accordion picks up a current Web Development direction – all the story on one page can now have all the images or sitemap features in a controllable grid on one page.