Creating a multi-column rollover image gallery with HTML 5

I know it has been a while since I blogged about HTML 5. I have two posts in this blog about HTML 5. You can find them here and here.

I am creating a small content website (only text,images and a contact form) for a friend of mine.He wanted to create a rollover gallery.The whole concept is that we have some small thumbnails on a page, the user hovers over them and they appear enlarged on a designated container/placeholder on a page.

I am trying not to use Javascript scripts when I am using effects on a web page and this is what I will be doing in this post. 

Well some people will say that HTML 5 is not supported in all browsers. That is true but most of the modern browsers support most of its recommendations. For people who still use IE6 some hacks must be devised.

Well to be totally honest I cannot understand why anyone at this day and time is using IE 6.0.That really is beyond me.Well, the point of having a web browser is to be able to ENJOY the great experience that the WEΒ offers today. 

Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http://caniuse.com/ and http://html5test.com/. At this times Chrome seems to support most of HTML 5 specifications.Another excellent way to find out if the browser supports HTML 5 and CSS 3 features is to use the Javascript lightweight library Modernizr.

In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here.

In order to be absolutely clear this is not (and could not be ) a detailed tutorial on HTML 5. There are other great resources for that.Navigate to the excellent interactive tutorials of W3School.

Another excellent resource is HTML 5 Doctor.

For the people who are not convinced yet that they should invest time and resources on becoming experts on HTML 5 I should point out that HTML 5 websites will be ranked higher than others. Search engines will be able to locate better the content of our site and its relevance/importance since it is using semantic tags.

Let's move now to the actual hands-on example.

In this case (since I am mad Liverpool supporter) I will create a rollover image gallery of Liverpool F.C legends. I create a folder in my desktop. I name it Liverpool Gallery.Then I create two subfolders in it, large-images (I place the large images in there) and thumbs (I place the small images in there).Then I create an empty .html file called LiverpoolLegends.html and an empty .css file called style.css.

Please have a look at the HTML Markup that I typed in my fancy editor package below

<!doctype html>
<html lang="en">
<head>
<title>Liverpool Legends Gallery</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<header>
<h1>A page dedicated to Liverpool Legends</h1>
<h2>Do hover over the images with the mouse to see the full picture</h2>
</header>
<ul id="column1">

<li><a href="">

<img src="thumbs/john-barnes.jpg" alt="">
<img class="large" src="large-images/john-barnes-large.jpg" alt="">
</a>
</li>

<li><a href="">

<img src="thumbs/ian-rush.jpg" alt="">
<img class="large" src="large-images/ian-rush-large.jpg" alt="">
</a>
</li>

<li><a href="">

<img src="thumbs/graeme-souness.jpg" alt="">
<img class="large" src="large-images/graeme-souness-large.jpg" alt="">
</a>
</li>





</ul>

<ul id="column2">

<li><a href="">

<img src="thumbs/steven-gerrard.jpg" alt="">
<img class="large" src="large-images/steven-gerrard-large.jpg" alt="">
</a>
</li>


<li><a href="">

<img src="thumbs/kenny-dalglish.jpg" alt="">
<img class="large" src="large-images/kenny-dalglish-large.jpg" alt="">
</a>
</li>


<li><a href="">

<img src="thumbs/robbie-fowler.jpg" alt="">
<img class="large" src="large-images/robbie-fowler-large.jpg" alt="">
</a>
</li>


</ul>

<ul id="column3">

<li><a href="">

<img src="thumbs/alan-hansen.jpg" alt="">
<img class="large" src="large-images/alan-hansen-large.jpg" alt="">
</a>
</li>

<li><a href="">

<img src="thumbs/michael-owen.jpg" alt="">
<img class="large" src="large-images/michael-owen-large.jpg" alt="">
</a>
</li>


</ul>



</body>

</html>


 

You can download the images large-images.zip

It is very easy to follow the markup. Please have a look at the new doctype and the new semantic tag <header>.

I have 3 columns and I place my images in there.There is a class called "large".I will use this class in my CSS code to hide the large image when the mouse is not on (hover) an image

Make sure you validate your HTML 5 page in the validator found here

Have a look at the CSS code below that makes it all happen.


img { border:none;
}

#column1 { position: absolute; top: 30; left: 100;
}

li { margin: 15px; list-style-type:none;
}

#column1 a img.large {  position: absolute; top: 0; left:
700px; visibility: hidden;
}

#column1 a:hover { background: white;
}
#column1 a:hover img.large { visibility:visible;
}


#column2 { position: absolute; top: 30; left: 195px;
}
li { margin: 5px; list-style-type:none;
}



#column2 a img.large { position: absolute; top: 0; left:
510px; margin-left:0; visibility: hidden;
}

#column2 a:hover { background: white;
}
#column2 a:hover img.large { visibility:visible;
}

#column3 { position: absolute; top: 30; left: 400px; width:108px;
}
li { margin: 5px; list-style-type:none;
}

#column3 a img.large { width: 260px; height:260px; position: absolute; top: 0; left:
315px; margin-left:0; visibility: hidden;
}

#column3 a:hover { background: white;
}
#column3 a:hover img.large { visibility:visible;
}

Ιn the first line of the CSS code I set the images to have no border.

Then I place the first column in the page and then remove the bullets from the list elements.

Then I use the large CSS class to create a position for the large image and hide it.

Finally when the hover event takes place I make the image visible.

I repeat the process for the next two columns.

I have tested the page with IE 10 and the latest versions of Opera,Chrome and Firefox.

Feel free to style your HTML 5 gallery any way you want through the magic of CSS.I did not bother adding background colors and borders because that was beyond the scope of this post.

Hope it helps!!!!

No Comments