Image/Photo Gallery Viewer using jQuery

September 30, 2007

Image/Photo Gallery Viewer using jQuery

by Benjamin Sterling in Flash Alternatives, Javascript, Photogallery, jQuery, jQuery Plugin on September 30, 2007 @ 12:01 pm

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

PLAIN TEXT

JavaScript:

<script type="text/javascript" src="/articles/common/js/jquery-1.2.1.pack.js"></script>
<script type="text/javascript" src="/articles/jqGalView/common/js/jqGalView.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#example1").jqGalView();
});
</script>

The xhtml

PLAIN TEXT

HTML:

<ul id="example1" title="My Gallery">
<li><a href="PathToFullSizeImage"><img src="PathToFullThumbnailImage" alt="Some alt text" width="144" height="96" border="0"/></a></li>
<li><a href="PathToFullSizeImage"><img src="PathToFullThumbnailImage" alt="Some alt text" width="144" height="96" border="0"/></a></li>
<li><a href="PathToFullSizeImage"><img src="PathToFullThumbnailImage" alt="Some alt text" width="144" height="96" border="0"/></a></li>
</ul>

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

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:

PLAIN TEXT

HTML:

</p>
<table title="This is a title">
<tr>
<td><img src=""/></tr>
</table>
<p>

It can just be a div:

PLAIN TEXT

HTML:

</p>
<div title="this is a div title"><img src=""/></div>
<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...

PLAIN TEXT

JavaScript:

<script type="text/javascript">
$(document).ready(function(){
$("#example2").jqGalView({
modal:true,
title:"This is a new title",
openTxt:"Open me!!!!",
backTxt:"Go back to the thumbnails",
goFullSizeTxt:"Bigger Image",
tnease:"backinout"
});
});
</script>

will produce below

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

Tags: jQuery, jQuery Plugin, Photogallery, Plugin

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

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

1. licentiapoetica

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

~k
September 30th, 2007 at 9:48 pm | Link

2. Benjamin Sterling

k,
That is looking really nice, nice work.

Btw, your path to the loader image is not working correctly.
September 30th, 2007 at 9:45 pm | Link

3. licentiapoetica

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
September 30th, 2007 at 8:55 pm | Link

4. licentiapoetica

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

~k
September 30th, 2007 at 7:24 pm | Link

5. Benjamin Sterling

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.
September 30th, 2007 at 2:43 pm | Link

6. licentiapoetica

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
September 30th, 2007 at 12:31 am | Link

7. AzHousePro

That works perfect. Thanks for the help.

Mike
September 28th, 2007 at 4:04 pm | Link

8. Benjamin Sterling

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.
September 28th, 2007 at 7:09 am | Link

9. AzHousePro

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.
September 28th, 2007 at 2:54 am | Link

10. Benjamin Sterling

Sweet; post the link to your project when it is done so I can see how it looks.
September 27th, 2007 at 3:15 pm | Link

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

benjaminsterling.com

September 30, 2007