News

How to build tiled mosaic layouts

Fill the browser window with good-looking content to gain interest and engage visitors

oscar

inspiration www.oscar-charlie.com

DOWNLOAD TUTORIAL FILES

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.

×