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(); } });