Options & Configuration

The options can be used to exploit the full set of features of dotNavigation.
The options used for the demo above are:

	$('#photoAlbum').dotNavigation({
		noIcons:16,          //number of icons to be displayed on a page
		numIconsInRow:4,     //number of icons to be displayed in a row
		widthContainer:240,  //width of the required container
		aspectRatio:1        //aspect ratio of the icon [width of the image/height of the image]
	});
	

The complete set of Options with their default values :

	widthContainer:300,  //Width of the required container
	noIcons: 4,  //Number of Icons to be displayed on a page
	numIconsInRow:2,  //Number of Icons to be displayed in a row
	marginIcon:5,  //Margin around the icons
	borderIcon:1,  //Width of the border around the icon
	borderIconColor:'black',  //Color of the border
	paddingIcon:0, //Padding between the border and the Image
	paddingBottomIcon:0,  //Esp. give to achieve a poloroid effect
	'aspectRatio':1  //Aspect Ratio of the image(width of the image/height of the image)
	

HTML Code

The HTML code structure required for the plugin to work

	<div id="photoAlbum">
		<div class="slide-runner">
			<ul class="slide-container">
				<a href="#" ><div class="album-back"><img src="images/album1.jpg"></img></div></a>
				<a href="#" ><div class="album-back"><img src="images/album2.jpg"></img></div></a>
				<a href="#" ><div class="album-back"><img src="images/album3.jpg"></img></div></a>
									.
									.
									.
						
			</ul>
		</div>
		<div style="clear:both;"></div>
		<div class="dot-navigation"></div>
	</div>
	

After initializing the plugin the structure changes

	<div id="photoAlbum">
		<div class="slide-runner">
			<ul class="slide-container">
				<li class="current-album-link" id="pagelink-0">
					<div class="page">
						<a href="#" ><div class="album-back"><img src="images/album1.jpg"></img></div></a>
						<a href="#" ><div class="album-back"><img src="images/album2.jpg"></img></div></a>
												.
												.
					</div>
				</li>
				<li class="album-link" id="pagelink-1"></li>
				<li class="album-link" id="pagelink-2"></li>
								.
								.
								.
				</ul>
			</div>
		<div style="clear:both;"></div>
		<div class="dot-navigation">
			<span class="current-page-nav" id="page-0"><img src="images/selected.png"></span>
			<span class="page-nav" id="page-1"><img src="images/nselected.png"></span>
			<span class="page-nav" id="page-2"><img src="images/nselected.png"></span>
										.
										.
										.	
		</div>
	</div>
	

CSS

Most of the size parameters has beeen taken care of by the jquery code. However the following css is required. You can easily modify to suit individul requirements.

	.slide-container{position:relative;}
	.slide-container a{
		border-style:solid;
		border-color:black;
		-moz-border-radius:4px; //Rounded borders, effective black border and white background
		border-radius:4px;
		display:block;
		float:left;
	}

	.album-link{float:left;position:relative;}
	.current-album-link{float:left;position:relative;}
	.slide-runner{overflow:hidden;}

	.dot-navigation span{
		cursor:pointer;
		margin-left:2px; //Space between the dots
		margin-right:2px; //Space between the dots
		color:black;
	}

	.dot-navigation{
		text-align:center;
		padding-top:5px;    //Spacing between the navigation and the screen
		padding-bottom:10px;
	}
					
	div#photoAlbum{ //Aligning it to fit the iphone background image
		position:relative;                      //Can be ignored, Just for demonstration
		background-color:black;
		margin-left:70px;
		top:145px;
	}