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

61 Comments

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

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

It can just be a div:

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

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…

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

back to beginning of this post back to skip to links

If you liked this article why don't you share it:

Stumble it delicious Digg it Reddit it DZone it Bump it Mixx it! Buzz up! E-mail

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

From: Rey Bango
“Ben, I like the initial look. The only thing that I’m not quite clear on is why the picture jiggles around when I hover over it. Also, what do the “1 2″ stand for at the bottom of a rendered image?”

———

From: Rey Bango
“So I jumped on over to http://www.flashimagegallery.com/pics/artwork/ and checked it out. Now I understand.

Some observations:

- The jiggle I mentioned was actually expected behavior so you can pan left, right, up or down. You should do that, though, only for images that are wider than the viewable area. Smaller images should move.

- The “1 2″ I mentioned is a nav. It didn’t jump to the next gallery.

- A nice feature would be to use fadeIn() to do a nice transition of the pic into the viewable area.

- If you take you move and put it to the title of the viewable area (where it says My Gallery) and you lower the mouse, the picture jumps up towards the mouse.”

———

From: Andy Matthews
“It’s not too bad actually. I don’t really like the scrolling though. You’re already offering a “full size” option, I’d say that the medium sized image should be at a set size and not allow you to scroll around in it. That’s of course a personal opinion.”

———

From: Stephan Beal
“Ooooh, i like that. Some spontaneous suggestions:

“a) When i see the “open” thing drop down, my instinct is to click on it, but this is impossible (it goes away when the mouse goes over it). This behaviour is a bit confusing. After tinkering, it is clear that i am supposed to click on the image, but perhaps it would be clearer if the Open thingie didn’t disappear unless i mouse out of the image.

“b) The scrolling behaviour of a clicked image is a tad confusing because the “back” label only appears at certain times (again, my instinct is to try to click it).

“c) The “1″ and “2″ link-like things at the bottom of an image… what are they supposed to do? i see no change in the image when clicking those (Firefox 2.0.0.6).

“But i love the overall look/feel.”

———

From: Rick Faircloth
“The ability scroll around a highly detailed image would be a valuable feature

“for anyone wanting to sell a product, such as shoes, clothing or electronics

“so they can take a very close look at the stitching or controls, etc.

“I was wondering if there is any limit to the size photo that can be used as the

“full-size” image because I want to use larger more detailed images.”

———

From: Andy Matthews
“I found that the 1/2 only work when you’re in thumbnail mode. Those need to go away when you’re viewing the larger size.”

———

From: Joan Piedra
“Hi, I like the ‘pan view’ idea.

“Just found a ‘bug’, when you are seeing an image it should cover the whole gallery (aka. thumbs and gallery tabs), you can click another tab while you are browsing a pic, this is confusing because when you close it you are in new gallery section.

“Keep working on it, looks nice.”

Love the plugin, really outstanding job! I did find a little bug though.

Change line 217 from

this.altImg = $this.src.replace(item.opts.prefix,”);

to

this.altImg = this.src.replace(el.opts.prefix,”);

or the getUrlBy=2 option will not work.

Sorry to double post, please merge my comments if you approve them.

All items in the gallery float to the left and have a 1px margin. This will break the layout in IE6, where items floating to the left will double their margin-left. A little workaround is setting the margin-left to 0 for IE6 and the margin-right to 2px:

* html .gvContainer .gvItem {
margin-left: 0;
margin-right: 2px;
}

in my layout this was sufficient. You may need to hack a bit with the container as well if you really need the utmost left pixel.

IE7 works okay, by the way. Now if people would only upgrade or switch.. ;)

@jurrie, thanks for the fix, I must have overlooked that one, good catch.

What am I doing wrong? I always get this error on Firebug:

$div.children(“.gvOpen”).stop is not a function
http://localhost/wbblite/thickbox/jqGalView.js
Line 208

I’m confused…

Make sure you have 1.2.1 of the framework. I can only assume that that is the case. Can you post a live url for me to look at?

OK, I am by no means a php coder strong enough to work out all of this code. I was able to DL the pieces and make this work, but I would like to disable the ability to click through to the largest image.

How would I go about doing that?

Mike

Ultimately it is only javascript code, no php; I did not even think of not clicking through to a large image as an option.

Well we have a few options:

1. Assuming you only want to have the thumbnails and no clicking for any type of large image, you can just provide the thumbnail image with no link. By default, if there is no link wrapping the image, the click event will return false. And you should probably comment out lines 205 through 212 to remove the hover dropdown. The line of code will look like:

.hover(
	function(){
	$div.children('.gvOpen').stop().animate({top:0},'fast', el.opts.ease);
	},
	function(){
		$div.children('.gvOpen').stop().animate({top:-16},'fast', el.opts.ease);
	}
);

2. If you want to be able to click on the thumbnail and the large image open in a separate window, that can be done also by change 234:

change:

     $.fn.jqGalView.view(this,el);

to:

     window.open(this.altImg,'mywindow')"

Let me know if that helps.

I had a older version of jquery running. After the update to 1.2.1 everything is running smooth!

Sweet; post the link to your project when it is done so I can see how it looks.

No, I am just trying to eliminate the option to go through to the full size image. I like the ability to click the thumbnail and open the larger image. Just not the full size image.

Any ideas?

Thanks again.

That is something I can build in, but that won’t be till probably Sunday, but in the mean time, you can either do one of the below:

1. Just pass an empty string to the goFullSizeTxt param: goFullSizeTxt:”” (but this will leave the “:”, which may not be a big deal)

2. Make a change at line 288:

This:

     var txt = img.altTxt ? img.altTxt +' : ' : '';
     el.descTxt.empty().append(txt).append(a);

to this:

     var txt = img.altTxt ? img.altTxt : '';
     el.descTxt.empty().append(txt);

Let me know if that works for you.

That works perfect. Thanks for the help.

Mike

Hi there!

first of all I want to thank you for sharing these fantastic plugins. I’m quite new to jquery and have spent most of the evening getting the jqgalview plugin and the jqalbumparser to play nice with my picasa account. I do have it up and running with a link (triggerEvent: ‘click’), but was wondering if you could give me some advice on how to get triggerEvent: ‘load’ working? I’ve been scouring the Internet trying to find an example of such a thing, but other than the load function and binding it to the window… I’m not sure how to proceed. Here is the link to demonstrate what I’m working on, need help with…

http://www2.potsdam.edu/colema.....ect1v2.htm

I’ve gone ahead and slightly modified your plugin so I could import ALL my pictures from google as well as get the bigger image to load without calling the link (which only lets you download the image) as well as capturing the caption for the image (you can view this in the 15th picture). I also removed the bigger picture link.

Any help is appreciated. Thanks so much!!

~k

k,
I am glad you are finding my plugins useful.

As for your trigger question, I tried to set that up myself and was never quite able to get the load trigger to work the way I wanted, but I think that has something todo with the way/when jQuery’s ready function is executed. But what I did was to do something like $(‘.selector’).jqAlbumParser({PARAMS}).click(); or $(‘.selector’).jqAlbumParser({PARAMS}).trigger(‘EVENT’) (event being what ever your event is)

I am working on updating the jqAlbumParser plugin to working better with jQuery 1.2.1 (which has better cross domain support) and will look at how you are using it to get a better idea of how other people will be using it, as well as better parsing into usable dom. (meaning, make it parse dom that is used by most galleries like what I have for the jqGalView structure. Hopefully that is up in the coming days.

Btw, I really like your look, please post a link when you get it done so I can post it to the repository link.

Thanks.

Wow, that worked like a charm! Thanks so much!! I’ll post a link when I have it perfected!

~k

Ok here’s the “final” version (nothing’s ever finished is it?). I’ve got it working so that it simulates a click as you instructed and working on a wordpress blog page.

Visit Site

Thanks again for your help, I really appreciate it!

~k

k,
That is looking really nice, nice work.

Btw, your path to the loader image is not working correctly.

Oh pippins! I didn’t bring it over when I uploaded it from my other site. Thanks for letting me know!

~k

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

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.

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

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

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 :)

Thx Benjamin :)

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

Bye :)

I really like the gallery. I also want to have the thumbnails open the larger image rather than the interim image with the link to the larger image. I tried altering line 234 as above but it breaks the gallery layout. Any suggestions?
Also is it possible to have the popup close by clicking on the photo or including a close link as in Lightbox?

Mike

Mike,
Sorry for the delay getting back to you.

You should be able to edit line 234

  1. $el.trigger('click');

and do something like

  1. window.open(this.altImg,'imgWindow')

Now that will open a new window, but if you are looking to do a lightbox set up, I am not sure how to get them to work together. I will try to figure something out over the weekend and will try to get back to you asap.

Thanks for the response. It worked. I am working on a skin for Jalbum ( jalbum.net) that can incorporate your gallery into a skin. What I was trying to do initially was to be able to link the “larger image” popup to the same but larger images in another folder. Then I thought about just linking to a larger popup would work.
The 3 skins I ahve made so far on Jalbum.net are LightBox 2, Highslide JS and SimpleBox ( a jquery lightbox).

Mike

Hi, it’s possible to open a single image directly?
I want to to see all the gallery or a single image (but if i click to the image i want to go to the gallery)

Roberto,
I am not really understanding the question, are you saying you want all the thumbnails to show at once? If that is the case, just set the “item” param to the total amount of your thumbnails. If not, can you elaborate on your question?

eh.. excuse for the english :-(
i mayopen the foto gallery with the thubnail.. but can i open a gallery with (in example) the 2nd photo clicked ?
i need to see a link with a ranking score for the complete gallery (and when i click to the link i open a norma gallery) but i need to see the most voted photo too (and when i click the link i open the photo in big size).

Excuse for the english too!

Well….riddle me this. Success. Instead of editing an old blog post and putting in the tags… i just created a new blog post with the tags…and all seems to work. If i go back to an old post…and try to add a gallery it dont. Wierd… but this is really nice work. Wow…wish i could program this well.

First of all… VERY COOL GALLERY!

But it will be nicer, if only these images will load, which are on the actualy page.
I’m loading now over 500 images with this gallery, and the loading time of the page’s very long…

Phillip,
I just posted an newer version that will preload images to make things load a little smoother. Have a go at it and let me know how it works out for you.

Great script you have there, found some problems though, cannot modal properly when on IE6 and the title sometimes become null, or undefined at some rare cases.

Thank :)

its amazing work

plz convert it inot vedio gallery is that posiable…?

I am implementing the gallery and all is working great in Firefox.

The pagination links in IE 6 are not acting as links. They are not clickable, so I cant see any of the pictures that are not on the front page.

I am a little confused now. Everything looks OK.

Any help would be extreamly appreciated.

Thanks Gaz

Can I add to my post that the website it question is http://www.casastafford.co.uk/gallery.

I am wondering if it is a css issue. As it looks like the links are there but you cannot click on them. I have disabled the main style sheet and this does not fix the issue.

Has anyone else had this issue?

Thanks in advance.

wow.. .this is really nice .. however i m looking for something like displaying images from RSS Feed rather then statically display them. Is it possible with jQuery ?

Great plugin, very good work, but I’ve got a strange probleme, the gallery looks great on firefox, but it’s bad displayed under IE!
I have done minor changes on the css and js file (change the link from bigger view to add to basket, and change the background style of the div (the green layout)
Furthermore, even when I download the original version of the files ( this link :http://bs-jquery-plugins.googl.....ew.2.1.zip) I meet again the same probleme with IE, anyone got an idea an can help me ?

Probleme resolved… in fact, when trying to access the website by 127.0.0.1, it doesn’t work, but it’s good with localhost :(
always good to know about it
ANYWAY, IT’S A VERY GREAT WORK !

Hey, really great job on the gallery!

I did a good amount of modifying and everything seems to be working very smoothly. My only question is would it be possible to get captions for each individual picture in any way.

Thanks!

oh nevermind, i figured it out.
sorry about that!

Hi there,

Thanks for a great plugin. However, I have encountered a weird problem in IE6 / IE7. I have a gallery on a page of a site I am building for a friend. However when I navigate away to another page on the site and then come back, the gallery breaks and i get this error:

Line: 256, Char:19, Object doesn’t support this property or method

It works fine in FF / Safari…. Not sure what is going on!

Any ideas??

Thanks for your time
Graham

very cool!
munch tks!

i have a question i’m using jqgalview with jqmodal and i don’t know how to change the dimension of the picture…when i click on view full size i want the picture to be bigger than it’s right now…so…what files should i edit?thank you

and please tell me how to put to put a x button because most people don’t know how to exit view full size…sorry for my bad english…thanks again

Hi all

I’m having the same problems than graham below.

When I refresh the page with CTRL-F5 the page loads correctly.

Any ideas?

Thanks in advance.

Hi! i have the same problem at IE7 ……. when my page load ie get a error:
Object doesn’t support this property or method
and the thumb shows bad! but when i press f5 the reload is good! S

Trackbacks

  1. The Book and the Cover » Blog Archive » jQuery: jqAlbumParser Plugin, parses out Flickr, Picasa clientside
  2. Licentia Poetica
  3. The Book and the Cover » Blog Archive » jQuery: jqGalViewII (Photo Gallery)
  4. NouvelleBulle d’Ajax » Blog Archive » jqGalView : galerie photo avec jQuery
  5. Dou? galerii cu jQuery | CNET.ro
  6. Benjamin Sterling Galleries: Wordpress Photo/Image Gallery Plugin for Flickr & Picasa | The Book and the Cover
  7. 50+ Amazing Jquery Examples- Part1
  8. Ajax Araçlar? : vBMaster.Org Seo Yar??mas?
  9. 50?????jQuery?????? | ????
  10. PhotoXhibit plugin Flickr, Picasa, SmugMug albumokhoz | WordPress Magyarország
  11. 50?????jQuery?????? - ??: ?????
  12. 50?????jQuery?????? | CodeLog

Learn from my mistakes, I got burnt by the flame, you don't have to.


RSS Feed Link My Hosting of Choice

63 queries. 0.582 seconds. Powered by WordPress visitor stats