dotNavigation is a fully customizable JQUery Plugin to create an iPhone style navigation. It converts the image links into icons and divides these icons in pages as per the options specified in the initialization.

The width of the required container, number of icons in each row and the number of icons on a page decides the final width and height of each icon.

The plugin has been tested for Firefox, Safari, Chrome and the forbidden IE 8+. The overflow problem in IE for versions less than 8 has still not been handled.

What is new?

There are a couple of better implementation for iPhone style Gallery. They work like a slide show for the gallery images. Infact one of them had mouse drag slide animations over the screen to incorporate the touch effect. This implementation however focuses on creating a customizable link gallery suited to fit number of icons with respect to the width on the web page.

Look at the Demo on the right

Tutorial listed below.

Options and 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, by keeping this greater that the padding
						'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;
					}
				

Note from the Author

About the Author

My name is Kaushal Agrawal. I am a software engineer by profession and a graphics designer and creative artist by interest. I am still new to JQuery and fascinated by its powerful features. I have been exploring plugins around and thought would write one of my own.

Know more about my work and graphics on myfigments.com

For any queries mail me on kickdgrass@gmail.com.

Hope its helpful.