gridslide.js

The CSS to setup gridslide like you see above is again very simple. First we add some styling to our slider div. You want to make this the same width and height as your images are. Add overflow scroll to allow visitors to your site access to all the images if they dont or can't have javascript enabled.

For each of the unordered lists within our slider div we want to make sure that they are all uniform. We remove any list styling and set padding and margin to 0 to ensure we have no gaps.

As each image is within its own li tag we can just float every li tag in the slider div to the left. This will line each of your images up side by side within their respective ul.

Next we want to style the navigation area. If you choose to use grid navigation in the options the plugin will create a grid nav div within your specified navigation div. Check the HTML tab for a description of this.

We set our grid nav div here to be 100% width so it fills your specified navigation area. We also clear each ul so that they each have their own line when we float them.

Next we remove all list styling and float each of the grid nav list elements to the left. The other settings are optional and you can play around with them. As I am using the img grid navigation option here I have set each li to the height we would like each of our mini images to appear.

We set the height and width that we would like our images to appear in our navigation by directly setting the width and height of .grid-nav-layer li img.

Last but not least when your user clicks a box within the grid navigation the plugin will automatically apply a css class named grid-active. The styling of this is completely up to you but for this demonstration I just apply a white background to the element selected. This combined with the padding on our li elements creates a white border around our selected element.

The plugin comes with these styles as default in a custom CSS file named gridslide.css, original huh?. You can change the styles however you like or just use them as a reference for your own CSS. Make sure to include the CSS file within your head tags if you intend to use the default styling.

.slider{
	width: 589px;  
	height: 348px;
	overflow: scroll;
}

.slider ul{
	position:relative;
	list-style: none;
	padding:0;
	margin:0;
}

.slider li{
	float: left;
}

.grid-nav{
	width: 100%;
}

.grid-nav ul{
	clear:both;
}

.grid-nav-layer li{
	list-style: none;
	float:left;
	cursor: pointer;
	height:54px;
	padding:2px;
	border:1px solid #fff;
	margin:3px;
}

.grid-nav-layer li img{
	height:54px;
	width:87px;
}

.grid-active{
	background-color: #fff;
}