benjaminsterling.com

The jQuery jqAlbumParser Plugin takes a link linking to your Flickr 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, the jqGalViewII Plugin or the jqShuffle Plugin to create your photo gallery on the fly and with very little coding on your part.

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