Skip to content Skip to tags Skip to twitter news Skip to blog roll Skip to categories Skip to archives Skip to recent posts

September 30, 2007

Image/Photo Gallery Viewer using jQuery

jqGalView Overview

The jQuery jqGalView Plugin allows you to take a grouping of images and turn it into an flash-like image/photo gallery. It allows you to style it how ever you want and add as many images at you want.

Inspired by http://www.flashimagegallery.com/pics/artwork/!

Feel free to vote for this plugin over at http://ajaxrain.com/search.php?seVal=jqGalView

The jQuery jqGalView Plugin's purpose is to be unobtrusive as possible and after looking at a lot of static photo galleries I feel the jQuery Gallery Viewer does just that. It takes any current structure and rips out the images and any parent link and turns a static photo gallery in to a dynamic flash-like gallery.

I tried to make this plugin as easy and flexible to you, for example, doing:

The head stuff
JavaScript:
  1. <script type="text/javascript" src="/articles/common/js/jquery-1.2.1.pack.js"></script>
  2. <script type="text/javascript" src="/articles/jqGalView/common/js/jqGalView.js"></script>
  3. <script type="text/javascript">
  4.     $(document).ready(function(){
  5.         $("#example1").jqGalView();
  6.     });
  7. </script>

The xhtml
HTML:
  1. <ul id="example1" title="My Gallery">
  2. <li><a href="PathToFullSizeImage"><img src="PathToFullThumbnailImage" alt="Some alt text" width="144" height="96" border="0"/></a></li>
  3. <li><a href="PathToFullSizeImage"><img src="PathToFullThumbnailImage" alt="Some alt text" width="144" height="96" border="0"/></a></li>
  4. <li><a href="PathToFullSizeImage"><img src="PathToFullThumbnailImage" alt="Some alt text" width="144" height="96" border="0"/></a></li>
  5. </ul>

Will produce the following, with styling and more images of course




  • Yes, I do know what I am doing!
  • Hey, it is better then reversible diapers!
  • It... it smells like... old cheese in here...
  • Everyone looks good through a glass of beer!
  • Is he going to eat me?!
  • It's like talking to a wall!!!
  • This is my seductive look! It works on all the boys.
  • You won't like me when I'm angry!
  • It is out of focus; let me help.
  • I always have to carry the conversation; they never say anything.
  • I SAID CLOSER!!!
  • I think I may be getting the upper hand here...
  • I'm being attacked and your taking pictures?
  • Yes, I do know what I am doing!
  • Hey, it is better then reversible diapers!
  • It... it smells like... old cheese in here...
  • Everyone looks good through a glass of beer!
  • Is he going to eat me?!
  • It's like talking to a wall!!!
  • This is my seductive look! It works on all the boys.
  • You won't like me when I'm angry!
  • It is out of focus; let me help.
  • I always have to carry the conversation; they never say anything.
  • I SAID CLOSER!!!
  • What way is this supposed to go?
  • I think I may be getting the upper hand here...
  • I'm being attacked and your taking pictures?
The Small Print

So you see, it is pretty simple to take your list/group of images and turn it into a nice photo gallery with some styles. In this instance, it is taking the images you have in a unordered list, but you are not limited to that at all. You can do a table:

HTML:
  1. </p>
  2. <table title="This is a title">
  3. <td><img src=""/></tr>
  4. </table>

It can just be a div:

HTML:
  1. </p>
  2. <div title="this is a div title"><img src=""/></div>

In our first example you see that I am using an image wrapped in A tag, this is the default setting where you don't need to do anything other then $('#mygallery').jqGalView(); (ok, it may be a good idea to style things). Check out the Option tab to see a list of parameters that can be used to further customize your Web Album/Photo gallery and check out some more demos under, you guessed it, Demo.

The Demo(s)

The below implementation...

JavaScript:
  1. <script type="text/javascript">
  2.     $(document).ready(function(){
  3.         $("#example2").jqGalView({
  4.             modal:true,
  5.             title:"This is a new title",
  6.             openTxt:"Open me!!!!",
  7.             backTxt:"Go back to the thumbnails",
  8.             goFullSizeTxt:"Bigger Image",
  9.             tnease:"backinout"
  10.         });
  11.     });
  12. </script>

will produce below

  • Yes, I do know what I am doing!
  • Hey, it is better then reversible diapers!
  • It... it smells like... old cheese in here...
  • Everyone looks good through a glass of beer!
  • Is he going to eat me?!
  • It's like talking to a wall!!!
  • This is my seductive look! It works on all the boys.
  • You won't like me when I'm angry!
  • It is out of focus; let me help.
  • I always have to carry the conversation; they never say anything.
  • I SAID CLOSER!!!
  • I think I may be getting the upper hand here...
  • I'm being attacked and your taking pictures?
  • Yes, I do know what I am doing!
  • Hey, it is better then reversible diapers!
  • It... it smells like... old cheese in here...
  • Everyone looks good through a glass of beer!
  • Is he going to eat me?!
  • It's like talking to a wall!!!
  • This is my seductive look! It works on all the boys.
  • You won't like me when I'm angry!
  • It is out of focus; let me help.
  • I always have to carry the conversation; they never say anything.
  • I SAID CLOSER!!!
  • What way is this supposed to go?
  • I think I may be getting the upper hand here...
  • I'm being attacked and your taking pictures?

Downloads

Download zip with demo and styles: http://bs-jquery-plugins.googl.....ew.2.1.zip
The jQuery core is available at: http://code.google.com/p/jqueryjs/downloads/list.
The jQuery Easing Plugin v1.1.1 is available at: http://gsgd.co.uk/sandbox/jquery.easing.php.
The jQuery jqModal Plugin v2007.08.17 +r11 is available at: http://dev.iceburg.net/jquery/jqModal/.

Pages: « 6 5 4 [3] 2 1 » Show All

60 Responses to “Image/Photo Gallery Viewer using jQuery”

[...] invit s? vede?i scriptul în ac?iune aici. Nu este o implementare dup? care eu m-a? da în vânt, dar e simpatic? pentru un blog personal, [...]

Thx Benjamin :)

In case of modifications i show for you.
And if you have another idea send for me.

Bye :)

Roberto,
Really nice work; I love the photos, my wife and I want to visit :)

I really like what you did for the pop up, I think I may "borrow" that idea and take it a step further. Probably build in a function that will allow a person to execute another plugin against mine.

Your English is fine, better then most native speakers :)

(Google Translated)

Roberto,
Realmente bom trabalho; Adoro as fotos, a minha mulher e eu quero visitar :)

Eu realmente gostaria que você fez para o pop - up, eu acho que pode "emprestar" essa idéia e levá - la um pouco mais longe. Provavelmente em construir uma função que permitirá uma pessoa para executar outra Plugin contra minas.

Seu inglês é fino, melhor então mais falantes nativos :)

Benjamin,
Your Photo Gallery Viewer is Great !!!

I'm using and add a Mod to view images with Slide Show.

Javascript it's Harder to me :( But works fine for now :)

Link of sample: http://www.renar.com.br/sample.....index.html

*Sorry for my bad english

Sounds great! Thanks! I'll be more than happy to help test, if you need a tester. :)

K,
That is definitely an issue with the jqAlbumParser plugin, not exactly sure what the issue, but I think there is a small compatibility issue with 1.2.1. I have been trying to update that plugin since 1.2.1 came out, but been hung up with the way in interacts with the Picasa Api. If you can give me a couple of days, I "think" I got something figured out. I will post to the Album Parser post when it is live.

I've got another question for you, if you're up for it. I reworked the code (renaming functions and files) and created a wordpress widget version of the photo album which takes the most recent pic from a picasa account and displays it as a widget on the wordpress sidebar. I noticed however, that if you go to my "Photo Gallery" page and "shift-refresh" it breaks the galleries... the widget doesn't show up at all, and the main gallery which is set to show ALL photos, only shows one. The galleries refer to different functions (I renamed the widgeted version's functions and files) and I'm so confused as to how they are still connected, and how I might be able to break that connection so that the page ALWAYS loads correctly. Here's the link: http://www.blueflydesigns.com/wordpress/?page_id=6

[...] to take a grouping of images and turn it into an flash-like image/photo gallery, much like what thejqGalView Plugin does for you. It allows you to style it how ever you want and add as many images at you [...]

[...] things first, you will need jquery, a couple very handy plugins by Benjamin Sterling jqgalview, jqalbumparser, and this nifty “easing” plugin jquery easing [...]

Pages: « 6 5 4 [3] 2 1 » Show All

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

RSS Feed Link

42 queries. 0.863 seconds. Powered by WordPress visitor stats