The Houston International Quilt Show presents a classic web design problem – many gorgeous images but of various sizes and orientations [about equal number of landscape and portrait shots]. Because the images are from various sources extensive captioning is also required particularly for the winning quilts. Finally, the quilting audience is quite broad so the design of the gallery and slider should be responsive so smartphone and tablet users can see the quilt photos with minimum distortion and highest fidelity.
The above is the default WordPress gallery option which displays the various sized quilts but in fairly ragged thumbnails [click on any thumbnail to see the much better original in a Lightbox]. There are captions and a responsive grid layout but no slider option. This is an okay gallery show made much better by using the free Responsive Lightbox plugin which displays the original images in Lightbox fashion and allows extensive customization including choice of four photo display engines – FancyBox, Nivo Lightbox, SwipeBox, and PrettyPhoto. The Responsive Design plugin makes WordPress Galleries work much better. However, users looking for a slider interface the gallery is wanting. Hence some of the following alternatives.
Page Transitions
[iframe src=”http://picsofcanada.com/splash/pagingq.html” width=”100%” height=”620″]
Page Transitions is actually a full page transition jQuery+CSS3 powered routine. I have adapted it so it can be used as a slider. Because it is a a full page inside a <div> tag wrapper, one can add just about any HTML around the image for any captioning. Also the display of the slide page is responsive. However, like in many sliders, going to a specific slide page is tricky coding. I have yet to find a WordPress plugin for Page Transitions so implementation in WordPress, Drupal, Joomla and other CMS will require iframe or JavaScript coding.
Refine Slider
[iframe src=”http://picsofcanada.com/splash/refinehq.html” width=”100%” height=”520″]
Alex Dunphy’s Refine Slide also provides a rich set of slide transitions and much stronger on image captioning. But the responsiveness applies only to the slide image and not the full page image [Try it by collapsing this page in your browser]. However, like the Page Transitions slider, this slider handles portrait and landscape plus variable image sizes with comparative ease. But centering the image on the slide page requires some carefull CSS coding.
Book Block Slider.
[iframe src=”http://picsofcanada.com/splash/bookblock/booker.html” width=”100%” height=”480″]
Book Block Slider requires users to create images that are of the same dimensions and captioning is quite limited. But in return users get a folding book slider that is perfect for small card like sliders which are perfect for banner ads. One can dispense with the prev and next controls and go with keyboard or touchscreen swipe interactions. This works well for small area banner ads and shows.
Summary
This is a just a few of the slider and page transition options that have blossomed in the last few years as CSS3, jQuery, SVG, Canvas and other scripting tools are now vying to replace Flash and Java as the cross platform coding tools of choice for animations and graphics on the Web. But with Webkit and even JavaScript splitting up as the major vendors [Apple, Google and Microsoft] compete more ferociously among themselves, even the solidarity of the Web is in danger.