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 13, 2007

33 Comments

jQuery: jqAlbumParser Plugin, parses out Flickr, Picasa clientside

by in Javascript,jQuery,jQuery Plugin,Photogallery,Plugin on September 13, 2007 @ 11:46 pm

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
  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
  1. <style media="all">
  2.     @import url("/articles/jqGalViewII/common/css/jqGalViewII.css");
  3. </style>
  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:

  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

  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

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

33 Responses to “jQuery: jqAlbumParser Plugin, parses out Flickr, Picasa clientside”

Hi,

i really love your plugin!

But how must the markup look like when using the Parser with the updated PhotoGallery 2.0??

M.
I am in the process of updating this plugin to make it output something better and that will work better with the update of jqGalView, my other plugin and most of the other photo gallery type plugins.

That won’t be ready for another few days, but if you want a quick fix till then, the code below should work.

@ about line 226 that starts “for(i in photos){”

Change:

  1. $item.append('<img src="'+photos[i][item.opts.buildFrom]['url']+'" alt="'+photos[i]['title']+'" title="'+photos[i]['title']+'"/>');

to:

  1. $item.append('<a href="'+photos[i]['full']['url']+'" rel="nofollow"><img src="'+photos[i][item.opts.buildFrom]['url']+'" alt="'+photos[i]['title']+'" title="'+photos[i]['title']+'"/></a>');

Like I said, I am hoping to get this plugin updated in the next couple of day and will have better instructions/documentation, as you can see, my docs suck and it is not one of my strong suits.

is there a reason or way around the fact that it will only display up to 20 thumbnails?

Chris,
The script should grab all thumbnails that are passed back from what ever account you are using unless you set the “count” param to 20. Do you have a url I can have a look at?

What a most excellent plugin! Thank you!

How might I append the code to be able to display the title of the large image in an h2 or something or the like? Seems as the though the thumbnails have the Flickr title, however it is not passed into the large image. Thank you again.

Jo

Jo,
Looks like you will need to make two changes to the code. Let me experiment and I will try to get back to you tonight. Do you have a link to what you have so far so I can have an idea of what structure you are working with?

Hi Benjamin,
I’ve got an h2 stubbed in here: http://junktrunk.com . click on the image of Tom to load the gallery.

In firefox it appears to be showing a broken img icon right before the ajax-loader gif shows before the first image loads.

thanks again for the help! I’m really diggin this thing.

Joe

@joe: sorry for the later reply, at about line 90 of the jqGalViewII.js file you can make a change to hide the image like:

  1. //change
  2. el.image = $('<img/>').appendTo(el.mainImgContainer);
  3. //to
  4. el.image = $('<img style="display:block;"/>').appendTo(el.mainImgContainer);

What that should do, is “hide” the img the fadein code executed which happens at about line 194.

Let me know if that works.

Thanks Benjamin, that hid the broken img icon, but you meant display:none instead of display:block, no?

Were you able to have a look about passing the json img title over? I was able to append an h2 in there, and just need the method to pass it in. Thanks again!

lol, yeah Joe, I meant display:none;. I did and I forgot to post about, I am heading out the door right now, and will try to have a response for you when I get back.

Joe,
If you change at about like 93 in your file:

  1. var $imgTitleHolder

to

  1. el.imgTitleHolder

then change line 194:

  1. el.loader.fadeOut('fast',function(){el.image.fadeIn();});

to

  1. el.loader.fadeOut('fast',function(){
  2.      el.image.fadeIn();
  3.      el.imgTitleHolder.text(img.altTxt).fadeIn();
  4. });

That should do the trick, let me know if that works.

Worked like a charm! I just started looking into json and the use of jquery for parsing last week. Your code is enlightening. Thanks so much! I’m gonna go try to horse in the description now. :D

Glad it worked out for you Joe, if you are dealing with JSON, jQuery and PHP, I would suggest that you take a look at my post about it called Using JSON in PHP4 and PHP5 with an included class or json_decode

thanks for this great plugin

This works great! Thanks for putting this out there, you are strong to quite strong good sir ; )

i’m trying to get the plugin to work on:
http://www.webweb.co.il/t

but firefox produces an error and does not show the gallery, any idea why?
thanks in advance.

Hi Ben,

I am trying to use your albumparser, which is great, on a web site. I am having the user click on a link for the photos, but then I want it to appear in a div container like so:

  1. Gallery 1 <a href="http://picasaweb.google.com/data/feed/base/user/balmeter/albumid/5161830896280030449?kind=photo&amp;alt=rss&amp;authkey=9m0W3RYEy64&amp;hl=en_US" rel="nofollow">Picasa</a>

Content 1

I have tried changing the calling method to:

  1. $(document).ready(function(){
  2.     $(".jqAlbumParser").jqAlbumParser({
  3.         pluginExec : function(){
  4.             $(".putHere").jqGalViewII(); // $(this).jqGalViewII();
  5.         }
  6.     }); // take out .click for others
  7. });

It only prints out the list of images, and not in the jGalViewII shell. How do I change this?

Thanks in Advance
Brian

Sorry Div tags are like this

  1. Gallery 1 <a href="http://picasaweb.google.com/data/feed/base/user/balmeter/albumid/5161830896280030449?kind=photo&amp;alt=rss&amp;authkey=9m0W3RYEy64&amp;hl=en_US" rel="nofollow">Picasa</a>
  2.        Content 1

Brain: You need to do $(this).jqGalViewII(); and not $(“.putHere”).jqGalViewII(); Try that and let me know if it works.

Got it figured out Ben. I edited the “appendTo” string in the jqAlbumParser with the ID of the . Worked like a charm. Now, my next step is to incorporate this into the jQuery Accordian. Is there a way to pass a variable to the appendTo?

Ben, how do I hide or close the gallery after it has been opened?

Brian: Not sure what you mean by “pass a variable to the appendTo”? Can you elaborate?

To tell you the truth, I never even thought about closing a gallery after it is opened. It never crossed my mind. Let me take a look at a few things to see what can be done. Maybe appending a link after the initial link with the text “close gallery” and giving that a click event that will just remove the gallery. $(‘SELECTOR’).remove(); I will try to come up with something this weekend but not entirely sure I will have time.

Ben, I want to pass a variable like you are doing for the wa:picasa. So, on your album link you have class=”jqAlbumParser wa:picasa”. I want to pass the appendTo variable too. So, I have tried class=”jqAlbumParser wa:picasa appendTo:#putHereID” but it does not seem to recognize the appendTo. If I open the jqAlbumParser.js file and edit the appendTo attribute in the default settings it works. But I want multiple galleries on a page, that I can open and close, the best way to do this would be to pass the ID of the div in the appendTo attribute. Then I can close the div by a “close” link, that will hide the open gallery. So, how do I pass the variable :^) Thanks for your effort.

Ben, was there an answer for post #3? I am running into a 20 thumbnail limit although there is 113 available.

TIA

TIA, that answer is still that same, he never got back to me so I am not sure of what his settings were. Can you show me the url you are pulling from and are you setting count?

Hey Ben, Did you get a chance to look into my request? #23 Thanks again. Brian

Hi Ben, no I’m not setting any count params. heres a link.
http://www.lucky13tattoos.ca/flickr_test.asp

Is there a way I can make the larger images “larger”?

TIA

ps great plugin!

any luck with the count limitation? I can’t figure it out….

TIA

netcomp,
Sorry, I’ve been wrapped up in some other items. It looks like Flickr limits rss feeds to 20, there is an alternatives, but will require you getting an api key (http://www.flickr.com/services/api/keys/) and then what we will need to do is adjust a few items in the code to let us play with a different url that we can create that will return all the images. So get that api and contact me off list and I can walk you thru the changes; they should be very minor.

Brain, I’m sorry, I missed your comment also, You should be able to do something like:

  1. it.opts.appendTo = (cls.match(/appendTo:(\w+)/)||[])[1] || it.opts.appendTo;
  1. class="wa:picasa appendTo:#myelement"

That should work; but it is untested.

Hey Ben,

Just wanted to update you on my project. Got multiple instances of your jqAlbumParser. It’s working great. Thanks for the code and your help.
http://www.brianalmeter.com/charlotte

Brian Alemter

Hi Ben: This is a great plug in. I’m trying to use it as above in comment #11 or so. I’ve got the heading loading and in the jsGalViewll.js i have the:
el.imgTitleHolder = $('').appendTo($container);
el.imgDescrHolder = $('').appendTo($container);
var $holder = $('').appendTo($container);

in the imgDescHoldr – it only shows the tags for the flickr photo and not the actual description. I also noticed that it did that on the junktrunk site above.

any clue on how to get the description to show up instead of the tags?

I don’t know where it comes from, but in FF3.0 upon loading of picasa album I see strange pink box in my top-left corner of page with message saying “Started: jqAlbumParser”. Any hints how to disable it?


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