By
inspiration www.oscar-charlie.com
One of the more recent trends in web design has been filling the web browser width with content. An extremely good way of doing this is with masonry layouts, which have been covered in Web Designer on previous occasions (see issue 195). Oscar Charlie takes a variation of the masonry layout and applies a grid structure to a mosaic image layout.
The whole of this layout is one long, endlessly sliding carousel. This provides a great interface by which customers can move through a lot of content in both a graphic and visual way. The site has been designed this way to link to an employee mobile app, which allows for real-time status and photo uploads. This provides a simple and intuitive way for customers and other interested parties to experience these uploads.
TECHNIQUE
Develop a montage layout
Get the library
Like most projects, we can kick start ours by using jQuery and the Automatic Image Montage plug-in, so download this from tympanus.net/codrops/2011/08/30/automatic-image-montage. Create a new HTML document in this folder, and in the head section we’ll link to the stylesheet that will style the images. You could add a border to each image, or make them flush against each other here.
001 <link rel=”stylesheet” type=”text/ css” href=”css/style.css” />
Add page content
Move into the body section and we’ll create a container div tag to hold everything. Inside here we’ll add another div tag to hold the montage. Finally we add the images. Feel free to add as many as you like here – the image folder has 73 images named numerically. The code for this step is on the resource disc.
Link to the library
After the closing div tag of the container div, we can add our links to the appropriate JavaScript libraries. The first line of code links to the CDN jQuery library online. The second links to the minified version of the montage library that will power our layout here. The code for this step is also on the CD.
Count the images
Here our container for the montage is recorded together with the number of images within the montage, and each one is hidden from the display. Then each of the images is looped through with a load function to see if they have loaded into the browser.
001 $(function() {
002 var $container = $(‘#montage’),
003 $imgs = $container.find(‘img’) .hide(),
004 totalImgs = $imgs.length,
005 cnt = 0;
006 $imgs.each(function(i) {
007 var $img = $(this);
008 $(‘<img/>’).load(function() {
Display the montage
Once all images have loaded, they are made visible again and arranged within the display to fill the browser. Save the page and test in the browser to see the images load in a style very similar to the website.
001 ++cnt;
002 if( cnt === totalImgs ) {
003 $imgs.show();
004 $container.montage({
005 fillLastRow : true,
006 alternateHeight : true,
007 alternateHeightRange : {min:180, max:240}
008 });
009 }
010 }).attr(‘src’,$img.attr(‘src’));
011 });
012 });
013 </script>
The Automatic Image Montage plug-in for jQuery is very easy to use and can fill a webpage with images. The plug-in contains a number of different attributes that allow the layout to be customised.
