A Demo of jPhotoGrid
Full instructions on this plugin and a download link are here: http://www.gethifi.com/blog/jphotogrid
The markup should look like this:
-
Caption Here
...
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. Keep in mind that using browser scaling of images can be quite expensive. It is particularly expensive in Internet Explorer when using bicubic resizing. Essentially, this means that the image needs to be resized for each frame in the animation.
The css for the below slideshow looks something like the css below. This is just the basics. You may need to add some other CSS to override your default unordered list styling for example.
#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
This plugin makes it easy to put together a cool image grid from a list of photos. Here is how it looks:
-
DSC_0660
-
DSC_0698
-
DSC_0668
-
DSC_0704
-
DSC_0699
-
DSC_0602
-
DSC_0603
-
DSC_0604
-
DSC_0607
-
DSC_0619
-
DSC_0620
-
DSC_0590
-
DSC_0562
-
DSC_0544
-
DSC_0541
-
DSC_0532
-
DSC_0531
-
dogs
-
DSC_0693
-
DSC_0691
| Permalink
| Permalink
| Permalink
| Permalink
| Permalink