A Demo of jPhotoGrid

37 Comment(s) | Posted March 17, 2010 |

Full instructions on this plugin and a download link are here: http://www.gethifi.com/blog/jphotogrid

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. 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

37 Comment(s) | Posted March 17, 2010 |

Comments

free font

May 1, 2010 at 6:43am | Permalink

wow! amazing! thank you very much for sharing ^^! much appreciated
Joseph Wraith

May 2, 2010 at 1:36pm | Permalink

I thought the use of HTML5 was supposed to release us from the use of plug-ins and third party products.
Joel Sutherland

May 2, 2010 at 7:15pm | Permalink

Joseph, This is a plugin using browser technology. (HTML/CSS/Javascript). This is different from a plugin like Flash which runs outside of the browser.
Topps

May 17, 2010 at 4:49am | Permalink

Very impressive and cool. The main advantage of using jQuery is that it's cross-browser compliant ending the need for worrying about accessibility issues.
Nilpo

June 7, 2010 at 1:41pm | Permalink

@Topps jQuery doesn't end the need for worrying about accessibility because it's cross-browser compliant. Cross-browser compliance has nothing to do with accessibility.
javascrip Plugins Directory

October 3, 2010 at 9:12am | Permalink

Great , thanks
Theo

October 3, 2010 at 2:08pm | Permalink

Nice work, thanks for sharing !
Ryan

November 15, 2010 at 9:17am | Permalink

This is awesome, thanks for sharing!
Paulo Nakahara

November 15, 2010 at 9:47pm | Permalink

Very cool!tk's for share, hugs!
CSSReX

December 17, 2010 at 1:14am | Permalink

Great Plugin! I am loving it... Just bookmarked it :)
Haki

January 25, 2011 at 4:16pm | Permalink

Very nice,thanks:))
Haki

January 25, 2011 at 4:17pm | Permalink

Very nice,thanks:))
Andezit

January 28, 2011 at 11:51am | Permalink

Very nice,thanks for sharing
Peyzaj

February 4, 2011 at 4:16am | Permalink

Ben çok beğendim
Nargile

February 4, 2011 at 4:20am | Permalink

Her zaman böyle güzel paylşımlar bekliyorum sizden:))
Clip-Tv

March 19, 2011 at 1:27pm | Permalink

Thank you very much,nice share
Gabriel Santos

March 22, 2011 at 1:40pm | Permalink

Very good plugin.
But I have difficulty Js therefore could not apply it on my site.
Considering that already have a layout set, and when I try to change it for the example it simply goes away ...
weikai

March 27, 2011 at 11:29pm | Permalink

thanks for sharing !
Snalay

March 28, 2011 at 10:22pm | Permalink

Thanks for your sharing it's a pretty tool !
Rob

April 12, 2011 at 8:47am | Permalink

Has anyone tried the plugin and tested in safari. My images are displayed in grid format until the page is refreshed and the images are stacked on top of each other. Any ideas?
trung

April 27, 2011 at 3:08am | Permalink

great, thanks!
may be useful if it auto slide or play
Bandish

May 3, 2011 at 1:00am | Permalink

NIce gallary i like to use on my site... Good job man!!!!
衢州网站建设

May 13, 2011 at 11:02pm | Permalink

很不错哦，虽然你们看不懂中文。
dansk

May 27, 2011 at 5:31am | Permalink

Looks lovely - any ideas on how I can it working with jquery mobile or jqtouch?
hawa osama

July 20, 2011 at 8:35am | Permalink

nice,but can you tell me how to use it in my own site
Francis

July 28, 2011 at 11:01am | Permalink

Can you add the ability to click on part of the zoomed image as a link?

Thanks.
Mario

August 22, 2011 at 11:11am | Permalink

Hi, thank you for this great script, I want to know whats the technique with vertical images? seems like this was made for landscape images only.

Regards
mrmark

October 12, 2011 at 7:38pm | Permalink

So cool, its very useful, thanks for sharing !!
ds

January 9, 2012 at 2:41pm | Permalink

The dogs are so funny, lovely! Could you tell me more about them?
Poshan Lama

February 13, 2012 at 12:50am | Permalink

Thanks dude for this script, I really loved this one and hope to see many from you....
siti internet

March 1, 2012 at 8:31am | Permalink

Nice gallery, I like the way you can still select other pic's around the current opened photo, thanks for sharing.
Max

March 9, 2012 at 6:48am | Permalink

Cool plugin! But very slow on iPad, unfortunately.
francis

March 25, 2012 at 10:50am | Permalink

我是新手，谢谢分享！^-^
Diego

April 6, 2012 at 2:13pm | Permalink

Awesome....
elang ajib

October 13, 2012 at 1:33pm | Permalink

wow, this looks better. thank you
freelance web designer kerala

October 29, 2012 at 2:19am | Permalink

Thanks............ :)
Alex

April 5, 2013 at 10:32am | Permalink

This is very cool..Hreat work!....could u tell me how to have more than one list in a page?