Join our HiFi mailing list to receive the latest news & updates

A Demo of jPhotoGrid

37 Comment(s) | Posted |

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_0660

  • DSC_0698

    DSC_0698

  • DSC_0668

    DSC_0668

  • DSC_0704

    DSC_0704

  • DSC_0699

    DSC_0699

  • DSC_0602

    DSC_0602

  • DSC_0603

    DSC_0603

  • DSC_0604

    DSC_0604

  • DSC_0607

    DSC_0607

  • DSC_0619

    DSC_0619

  • DSC_0620

    DSC_0620

  • DSC_0590

    DSC_0590

  • DSC_0562

    DSC_0562

  • DSC_0544

    DSC_0544

  • DSC_0541

    DSC_0541

  • DSC_0532

    DSC_0532

  • DSC_0531

    DSC_0531

  • Dog dogs

    dogs

  • DSC_0693

    DSC_0693

  • DSC_0691

    DSC_0691

37 Comment(s) | Posted |

Comments

  1. free font's avatar
    free font
    | Permalink
    wow! amazing! thank you very much for sharing ^^! much appreciated
  2. Joseph Wraith's avatar
    Joseph Wraith
    | Permalink
    I thought the use of HTML5 was supposed to release us from the use of plug-ins and third party products.
  3. Joel Sutherland's avatar
    Joel Sutherland
    | 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.
  4. Topps's avatar
    Topps
    | 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.
  5. Nilpo's avatar
    Nilpo
    | 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.
  6. javascrip Plugins Directory's avatar
    javascrip Plugins Directory
    | Permalink
    Great , thanks
  7. Theo's avatar
    Theo
    | Permalink
    Nice work, thanks for sharing !
  8. Ryan's avatar
    Ryan
    | Permalink
    This is awesome, thanks for sharing!
  9. Paulo Nakahara's avatar
    Paulo Nakahara
    | Permalink
    Very cool!tk's for share, hugs!
  10. CSSReX's avatar
    CSSReX
    | Permalink
    Great Plugin! I am loving it... Just bookmarked it :)
  11. Haki's avatar
    Haki
    | Permalink
    Very nice,thanks:))
  12. Haki's avatar
    Haki
    | Permalink
    Very nice,thanks:))
  13. Andezit's avatar
    Andezit
    | Permalink
    Very nice,thanks for sharing
  14. Peyzaj's avatar
    Peyzaj
    | Permalink
    Ben çok beğendim
  15. Nargile's avatar
    Nargile
    | Permalink
    Her zaman böyle güzel paylşımlar bekliyorum sizden:))
  16. Clip-Tv's avatar
    Clip-Tv
    | Permalink
    Thank you very much,nice share
  17. Gabriel Santos's avatar
    Gabriel Santos
    | 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 ...
  18. weikai's avatar
    weikai
    | Permalink
    thanks for sharing !
  19. Snalay's avatar
    Snalay
    | Permalink
    Thanks for your sharing it's a pretty tool !
  20. Rob's avatar
    Rob
    | 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?
  21. trung's avatar
    trung
    | Permalink
    great, thanks!
    may be useful if it auto slide or play
  22. Bandish's avatar
    Bandish
    | Permalink
    NIce gallary i like to use on my site... Good job man!!!!
  23. 衢州网站建设's avatar
    衢州网站建设
    | Permalink
    很不错哦,虽然你们看不懂中文。
  24. dansk's avatar
    dansk
    | Permalink
    Looks lovely - any ideas on how I can it working with jquery mobile or jqtouch?
  25. hawa osama's avatar
    hawa osama
    | Permalink
    nice,but can you tell me how to use it in my own site
  26. Francis's avatar
    Francis
    | Permalink
    Can you add the ability to click on part of the zoomed image as a link?

    Thanks.
  27. Mario's avatar
    Mario
    | 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
  28. mrmark's avatar
    mrmark
    | Permalink
    So cool, its very useful, thanks for sharing !!
  29. ds's avatar
    ds
    | Permalink
    The dogs are so funny, lovely! Could you tell me more about them?
  30. Poshan Lama's avatar
    Poshan Lama
    | Permalink
    Thanks dude for this script, I really loved this one and hope to see many from you....
  31. siti internet's avatar
    siti internet
    | Permalink
    Nice gallery, I like the way you can still select other pic's around the current opened photo, thanks for sharing.
  32. Max's avatar
    Max
    | Permalink
    Cool plugin! But very slow on iPad, unfortunately.
  33. francis's avatar
    francis
    | Permalink
    我是新手,谢谢分享!^-^
  34. Diego's avatar
    Diego
    | Permalink
    Awesome....
  35. elang ajib's avatar
    elang ajib
    | Permalink
    wow, this looks better. thank you
  36. freelance web designer kerala's avatar
    freelance web designer kerala
    | Permalink
    Thanks............ :)
  37. Alex's avatar
    Alex
    | Permalink
    This is very cool..Hreat work!....could u tell me how to have more than one list in a page?