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”

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

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.

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

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?

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

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

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

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.

[...] or Picasa photo album and parses it into your current layout as is or hook in another plugin like the jqGalView Plugin, the jqGalScroll Plugin, or the jqShuffle Plugin to create your photo gallery on the fly and with [...]

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

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.773 seconds. Powered by WordPress visitor stats