jQuery / SmugMug / Client Side Javascript Fun

jmaurer

I have developed (with plenty of help from my brother-in-law and lots of other people's great javascript utilities) some fairly simple, but in some cases useful javascript using jQuery.

The code is at http://github.com/jmaurer.

A couple simple examples are at
http://dev.hurleyhome.com/smugmug/slideshow-cycle.html
http://dev.hurleyhome.com/smugmug/galleries.html

The thing to note is that there is no flash and no server side requirement. Which means it will work on mobile browsers (e.g. iPhone) where some of the very nice flash based utilities will not. If you have any problems please let me know.

I hope you find it somewhat useful.
Jerry

p.s. All of the code is release under the MIT license do with it what you will, but if you find any errors, it would be kind for you to send them back so I can merge them into the public branch.

Dan7312

This pages don't seem to work in IE8, even in compatiblity mode, on Vista 64. The pages get these errors:

Webpage error details


User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; WOW64; Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.21022; InfoPath.2; .NET CLR 3.5.30729; .NET CLR 3.0.30729)
Timestamp: Thu, 24 Dec 2009 01:00:13 UTC




Message: 'Login.Session' is null or not an object
Line: 185
Char: 6
Code: 0
URI: http://dev.hurleyhome.com/smugmug/jquery-smugmug-1.0.0.js




Message: Object doesn't support this property or method
Line: 1
Char: 1
Code: 0
URI: https://api.smugmug.com/services/api/json/1.2.2/?method=smugmug.login.anonymously&APIKey=MAukm4dbY4HtE1JSbA2tZ48mIYt3rJO8&Callback=jsonp1261616353664&_=1261616353704

jmaurer wrote:

I have developed (with plenty of help from my brother-in-law and lots of other people's great javascript utilities) some fairly simple, but in some cases useful javascript using jQuery.

The code is at http://github.com/jmaurer.

A couple simple examples are at
http://dev.hurleyhome.com/smugmug/slideshow-cycle.html
http://dev.hurleyhome.com/smugmug/galleries.html

jmaurer

Dan7312 wrote:

This pages don't seem to work in IE8, even in compatiblity mode, on Vista 64.

Hmm I have tested it under XP (IE8), Server 2003 (IE6), and Win7 (IE8) on my Mac (Safari and Firefox) and Linux (Firefox and Epiphany). I will try and create a Vista64 VM and give it a whirl.

I did find (and fix) a minor issue when I was testing under IE6 -- it might have been the Vista issue (an extra comma in the gallaries.html), so when you get a chance try one more time.

Thanks
Jerry

Dan7312

It works now.

jmaurer wrote:

I did find (and fix) a minor issue when I was testing under IE6 -- it might have been the Vista issue (an extra comma in the gallaries.html), so when you get a chance try one more time.

Thanks
Jerry

jmaurer

Thanks for checking it out. I should add I have also tested it on an iPod Touch and it works. If anyone finds any bugs please let me know and I will get them fixed as quickly as possible. If you do make anything cool (my CSS fu is very weak).

Last if you have any good ideas for examples, suggest them here and I will see about creating them.

ScottL

jQuery slideshows
Have you implemented any of these on the SmugMug pages themselves or are these intended to pull SmugMug photos into pages hosted on other servers? Both applications are exciting as I'm looking for a way to do slideshows without using Flash.

Thanks
Scott

devbobo

Nice work...though if you make the following modifications to your jquery-smugmug-gallery-1.0.0.js file, you can to achieve the same result without having to smugmug.images.get for every gallery. <img src="https://us.v-cdn.net/6029383/emoji/thumb.gif&quot; border="0" alt="" >

$.smugmug.albums.get({NickName: nick, Extras: 'AlbumURL,Highlight,ThumbURL,Caption'}, function(albums) {		
    $.each(albums.Albums, function() {
        var album = this;

        if (category == undefined || album.Category.Name == category) {
            image = album.Title;
					
            if(album.Highlight) {
                image = "<img src=\"" + album.Highlight.ThumbURL + "\" title=\"" + album.Highlight.Caption + "\"/>";
            }
					
            html = "<li><a href=\"" + album.URL + "\" id=\"" + album.id + "\">" + image + "</a></li>";
            ul.append(html);
        }
    });
});

Cheers,

David

devbobo

Also, if you change your slideshow over to using API 1.2.2, you can change your smugmug.images.get code to (where the response will be a lot lighter)...

$.smugmug.images.get({AlbumID: albumID, AlbumKey: albumKey, Extras: size + "URL"}, function(images) { 
<snip>
});

Cheers,

David

MarcusT

@Devbobo - Yes, those changes make a big difference, thanks. Still no sign of a documentation update for Extras as previously requested though?

@jmaurer - Please incorporate the changes to your Git repository, and I suggest that you move all of the separate demos (slideshow,gallery,etc) to the main jquery-smugmug area so that they can be viewed/managed/downloaded as one, and ensure that they are all kept up to date with changes to the main jquery-smugmug-X.X.X.js file (currently there is a copy in each separate area). Any chance of an update to support jQuery 1.4.2 while you're at it? I've had a go myself but can't work out where it's going wrong...

southeasternphotography

jmaurer wrote: »

Thanks for checking it out. I should add I have also tested it on an iPod Touch and it works. If anyone finds any bugs please let me know and I will get them fixed as quickly as possible. If you do make anything cool (my CSS fu is very weak).

Last if you have any good ideas for examples, suggest them here and I will see about creating them.

No one seems to have answered you. I have a non-profit website where I want to pull images from my SmugMug Galleries. I have tried SmugMugs Flash Slideshow and Badge code. The Slideshow was very not working for me. The Badge method works sometimes and sometimes gives Error loading....messages. So, that is not working for me.

So I am asking again...can you use jquery from outside SmugMug to send images from SmugMug galleries back to the requesting outside website?

Troup

southeasternphotography

jmaurer wrote: »

I have developed (with plenty of help from my brother-in-law and lots of other people's great javascript utilities) some fairly simple, but in some cases useful javascript using jQuery.

The code is at http://github.com/jmaurer.

A couple simple examples are at
http://dev.hurleyhome.com/smugmug/slideshow-cycle.html
http://dev.hurleyhome.com/smugmug/galleries.html

Today, the second example "My 2009 Galleries" is not working for me...just lists the name. 09-01-11
Troup Nightingale

southeasternphotography

devbobo wrote: »

Also, if you change your slideshow over to using API 1.2.2, you can change your smugmug.images.get code to (where the response will be a lot lighter)...

$.smugmug.images.get({AlbumID: albumID, AlbumKey: albumKey, Extras: size + "URL"}, function(images) { 
<snip>
});

Cheers,

David

@Post #'s 1,7,8

Sounds fantastic. I have a client website on another system that I want to do slideshows from my SmugMug account. I went and looked at the code files listed at top of post #1. Several *.js files, several html files, and one CSS file. I sure wish I knew what I was looking at!!! Any possible way to give info as to where these files are suppose to be stored (in my SmugMug account somehow, and which (is it only one?) file I would put on the client? Also, I am SURE I have to customize SOMETHING to get it to go to my account and get the Galleries I want to choose (multiple galleries per post #7?). And how do we "change to API 1.2.2 and where does #8 code go? (same for #7).

Sorry to be so completely ignorant. It seems like what you guys are doing is EXACTLY what I need instead of using the Badges scheme at SmugMug (which does work - most of the time!!).

Afraid I am a copy/paster...so as much info given as possible would REALLY help. Maybe this is now documented somewhere....

Troup Nightingale
Southeastern Photography
http://www.southeasternphotography.com

Client site is at http://www.hofwyl.org - on the Photo Page - A non-profit organization

southeasternphotography

No help here yet either - BUMP!

southeasternphotography wrote: »

@Post #'s 1,7,8

Sounds fantastic. I have a client website on another system that I want to do slideshows from my SmugMug account. I went and looked at the code files listed at top of post #1. Several *.js files, several html files, and one CSS file. I sure wish I knew what I was looking at!!! Any possible way to give info as to where these files are suppose to be stored (in my SmugMug account somehow, and which (is it only one?) file I would put on the client? Also, I am SURE I have to customize SOMETHING to get it to go to my account and get the Galleries I want to choose (multiple galleries per post #7?). And how do we "change to API 1.2.2 and where does #8 code go? (same for #7).

Sorry to be so completely ignorant. It seems like what you guys are doing is EXACTLY what I need instead of using the Badges scheme at SmugMug (which does work - most of the time!!).

Afraid I am a copy/paster...so as much info given as possible would REALLY help. Maybe this is now documented somewhere....

Troup Nightingale
Southeastern Photography
http://www.southeasternphotography.com

Client site is at http://www.hofwyl.org - on the Photo Page - A non-profit organization

Still hoping someone can get me info on how and where to place the data!!! Any help or instructions appreciated!
Troup