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