jPhotoGrid Plugin

This plugin makes it easy to put together a cool image grid from a list of photos. The markup should look like this:

<ul>
	<li>
		<img src="source.jpg" alt="" />
		<p>Caption Here</p>
	</li>
	...
<ul>

The plugin uses the browser's image scaling to do the zoom. So the image should be appropriately sized to act as both a thumbnail and a zoomed image.

The css for the below slideshow looks like this:

#pg { position: relative; height: 585px; background: #000; }
#pg li { position: relative; list-style: none; width: 175px; height: 117px; overflow: hidden; float: left; z-index: 2; opacity: .3; }
#pg li.active { opacity: 1; }
#pg li.selected { opacity: 1; z-index: 99; -moz-box-shadow: 0px 0px 10px #fff; -webkit-box-shadow: 0px 0px 10px #fff; }
#pg li img { display: block; width: 100%; }
#pg li p { color: white; margin: 10px 0; font-size: 12px; }

Finally, the last step is setting up the javascript. The key think here is passing in two CSS objects. This is what tells $.animate how to open and close the popup:

$('#pg').jphotogrid({
	baseCSS: {
		width: '175px',
		height: '117px',
		padding: '0px'
	},
	selectedCSS: {
		top: '50px',
		left: '100px',
		width: '500px',
		height: '360px',
		padding: '10px'
	}
	});

The Result

• 

  DSC_0660

• 

  DSC_0698

• 

  DSC_0668

• 

  DSC_0660

• 

  DSC_0698

• 

  DSC_0668

• 

  DSC_0660

• 

  DSC_0698

• 

  DSC_0668

• 

  DSC_0660

• 

  DSC_0698

• 

  DSC_0668

• 

  DSC_0660

• 

  DSC_0698

• 

  DSC_0668

• 

  DSC_0660

• 

  DSC_0698

• 

  DSC_0668

• 

  DSC_0660

• 

  DSC_0698

>

代码整理：时代Java（NowJava.com）　

转载请注明出处，此代码仅供学习交流，请勿用于商业用途。