jQuery Tip: How to Display Images Vertically and Horizontally with jQuery

If you want to display images in your web page horizontally or vertically. Following is a tutorial to do that.

HTML Code

First, we’ll create the HTML markup for doing this.

<div id="images">
<a href="http://site.com"><img src="img1.png" width=100px height=100px /></a>
<a href="http://site.com"><img src="img1.png" width=100px height=100px /></a>
<a href="http://site.com"><img src="img1.png" width=100px height=100px /></a>
<a href="http://site.com"><img src="img1.png" width=100px height=100px /></a>
</div>

jQuery Code to Display Images Horizontally

$(document).ready(function() {
var $pic = $('#images a');
$pic.hide();
var imgs = $pic.length;
var next;
for (i=0;i<imgs;i++){
next=$pic.eq(i);
next.css({'position': 'absolute','left':160*i});
next.show();
}
});

jQuery Code to Display Images Vertically

$(document).ready(function() {
var $pic = $('#images a');
$pic.hide();
var imgs = $pic.length;
var next;
for (i=0;i<imgs;i++){
next=$pic.eq(i);
next.css({'position': 'absolute','top':160*i});
next.show();
}
});