jQuery Tip: How to Display Images Vertically and Horizontally with jQuery
(Last Updated On: July 10, 2014)
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();
}
});
