Note: I did a re-layout of the site and the plugin belows styles have not been adjusted yet, I hope to get to it soon.

Here we have yet another photo / image gallery, except at this point it is only a proof of concept. I see a ton of photo galleries in Flash and see a lot of effects that just can’t be done in JavaScript, but a ton of effects that can be achieved. This one is nothing fancy and not fully tested, but when I have more time I may take is some other features that are present in my other plugins in to this one.

Anyway, here it goes, please feel free to post any feedback. Not sure if I will take this plugin anywhere, but if there is interest, I may.

This is the jQuery Gallery View II plugin (jqGalViewII) which takes a list of your images and creates an easily styles photo gallery. This plugin will preload all of your larger images for faster viewing.

The Head

The Body

And that would produce the following:

The Downloads

Download zip with demo and styles: http://bs-jquery-plugins.googl.....II.1.0.zip
The jQuery core is available at: http://code.google.com/p/jqueryjs/downloads/list.

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

The xhtml

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:

It can just be a 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...

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

The jqAmungUs widget is a jQuery plugin that will aide as an alternative to the icon and will give more detail to who is currently on your site and alternatively whose been on your site and where they came from (as far as country is concerned).

The set up is pretty simple:

Add some code to the head of your web page:

And create the div you want to the data to load to:

And you will get:

Or, you can add the type param and set it to map and get:

Download

The jqAmungUs Plugin is available at: http://www.benjaminsterling.co.....AmungUs.js.

The jqAmungUs server side is available at:PHP and ASP.

The jQuery core is available at: http://code.google.com/p/jqueryjs/downloads/list.

Support

Support for the jqGalView Plugin is available through the jQuery Mailing Listand the comment section below.

Please post a link to the site you are using this plugin for and a brief desciption so I can see what others are doing with the plugin.

This documentation is maintained by Benjamin Sterling. Post comments or questions below.

Code Notes

Why jqAlbumParser? Well, after building a few photo gallery plugins and plans for different variations of flash-like galleries (I am on a convert flash apps to jQuery ran apps kick), I found myself wanting to use other peoples photos, ie. friends and families, but did not want to download them. So I wanted to be able to bring in Picasa and Flickr photos, but sadly their JSON formats are different, I needed a way to pull them both in on the same page and be able to use them with the same functions and so I figured I'd bring their JSON and parse them to my own object and poof, jqAlbumParser! Anyway, I am rambling, check out below and if you have any question (since I know my comment and explanations suck) post a comment and I will get back to asap. Also, if you use this plugin, drop me your url and a brief description of your site and I will be sure to post it to my Plugin Repository page.

The Basic Demo

Picasa | Flickr

The Simple Code

The xhtml

PLAIN TEXT

HTML:

1. <a href="http://picasaweb.google.com/data/feed/base/user/sterling.benjamin/albumid/5065213814603581825?kind=photo&amp;alt=rss&amp;hl=en_US" class="jqAlbumParser
2. wa:picasa">Picasa</a>
3. |
4. <a href="http://api.flickr.com/services/feeds/photos_public.gne?ids=11983862@N00" class="jqAlbumParser
5. wa:flickr">Flickr</a>

The head stuff

PLAIN TEXT

CSS:

1. <style media="all">
2.     @import url("/articles/jqGalViewII/common/css/jqGalViewII.css");
3. </style>

PLAIN TEXT

JavaScript:

1. <script type="text/javascript" src="/articles/common/js/jquery-1.2.1.pack.js"></script>
2. <script type="text/javascript" src="/articles/jqAlbumParser/common/js/jqAlbumParser.js"></script>
3. <script type="text/javascript" src="/articles/jqGalViewII/common/js/jqGalViewII.js"></script>
4. <script type="text/javascript">
5. $(document).ready(function(){
6.     $(".jqAlbumParser").jqAlbumParser({
7.         pluginExec : function(){
8.             $(this).jqGalViewII();
9.         }
10.     });
11. });
12. </script>

The Small Print

So you see the set up is somewhat simple; in the example above I used the jqAlbumParser in conjuction with the jqGalViewII plugin so you can see how I envision a person would use this plugin. You will be able to use the jqAlbumParser with any of my plugin, and any photogallery plugin that works with the same structure that this plugin can put out.

To get the url for your Picasa album, go to your account and then the album you want; go to the bottom right corner and you will find a RSS feed link and either right click and click copy link location or click that link and copy the url from there.

To get the url for you Flickr album, go to the photo section of your account and go to the bottom left and copy the RSS link.

You will also notice that in the demo links that there is a "wa:picasa" and a "wa:flickr," if you are not going to add separate jqAlbumParser calls for different services, ie. Picasa and Flickr, you will need to add one of those to the correct link.

Now you are probably asking yourself, "How do I get this to execute when the page loads?" or "I tried 'load' as the "triggerEvent" but it does not work, how come?" The answer, do:

PLAIN TEXT

JavaScript:

1. <script type="text/javascript">
2. $(document).ready(function(){
3.     $('.jqAlbumParser').jqAlbumParser({
4.         pluginExec : function(){
5.             $(this).jqGalViewII();
6.         }
7.     }).click();
8. });
9. </script>

or

PLAIN TEXT

JavaScript:

1. <script type="text/javascript">
2. $(document).ready(function(){
3.     $(".jqAlbumParser").jqAlbumParser({
4.         pluginExec : function(){
5.             $(this).jqGalViewII();
6.         }
7.     }).trigger("click");
8. });
9. </script>

The download

http://benjaminsterling.com/ar.....mParser.js

The Head

The Body

The Outcome

Options

Below are a list of options you can pass to the jqGalScroll plugin.

Styling

I am in no way a great designer, so the example is very bare, but the follow urls are sites that done a nice job with the plugin:

• http://www.ryanbrenizer.com/wedding_portrait

Thanks

Koes put a fire under my butt to improve this plugin and when I took too long he took what I had and added the horizontal scroll and in turn I ripped it from his hands and made it better :) http://www.koesbong.com/

Download

The jqGalScroll v2.1 Plugin is available at: http://bs-jquery-plugins.googl.....ll.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 jqShuffle Plugin allows you to take a list/group of photos/paragraphs and shuffle through them. When set, it provides a flash-like photo gallery effect.

The plugin is still in development as far as extras go. Base functionality will take your list and produce a shuffle effect similiar to the way you would shuffle a stack of photos, taking the top most photo, moving it to the left and then repositioning it to the bottom of the stack.

<script type="text/javascript">
		$(document).ready(function(){
				$('.imageBox').jqShuffle();
		});
</script>