smugmugbox: display photos on your own site using API1.2

wensheng

This is modification of flickrbox for smugmug.
It allow you to show photos on your own site (not smugmug site) using lightbox.

The files is at: http://wensheng.com/smugmugbox.tar.gz
You only need to change nickname inside config.php and index.php

Update: 5/22/07 I added slideshow hack to lightbox.js, now this can display slideshow.

The demo is http://wensheng.com/smugmug/ (slideshow enabled)

http://wensheng.com/smugmug2 (slideshow disabled)

devbobo

Hi wensheng,

This looks great, but I found a potential issue with your code, when you are constructing image urls like this...

a.href="http://"+nickname+".smugmug.com/photos/"+this.data[j].id+"-M.jpg";

This will not display the correct image, if the user has cropped, rotated or done any number of operations on SmugMug. After that the image url becomes something like...

"http://"+nickname+".smugmug.com/photos/"+this.data[j].id+"-M-1.jpg";

So, it would make more sense to do the following...

in mysmug.php, change the code to this...

//--------- Get photos from first albums
$method = "&method=smugmug.images.get&Heavy=1&AlbumID=".$albums[0]['id'];
$response = apiSend($url.$method);

if($response && $response['stat']=='ok')
{
    //$images= array_keys($response['Images']);
    foreach($response['Images'] as $k=>$v)
    {
        $albums[0]['photos'][]=array(
            'id'=>$v['id'],
            'title'=>'',
            [B]'mediumURL'=>$v['MediumURL'],
               'albumURL'=>$v['AlbumURL'][/B]
        );
    }
}

then in smugmug.js...

        =this.start; j&lt;this.finish; j++)<this.finish; j++)="">
        {
            var li=document.createElement("li");
            var a = document.createElement("a");
            a.href=[B]this.data[j].mediumURL[/B];
            
            //a.title=this.data[j].title; //currently we don't get title
            
            a.title='source: [URL="http://dgrin.com/%27+%3Cb%3Ethis.data%5Bj%5D.albumURL%3C/b%3E+%27"]'+[B]this.data[j].albumURL[/B]+'[/URL]';
            a.rel="lightbox[kkk]";
            
            var img=document.createElement("img");
            img.src="http://"+nickname+".smugmug.com/photos/"+this.data[j].id+"-"+thumbnail_mode+".jpg";
            img.width=thumbnail_width;
            img.height=thumbnail_height;
        
            
            img.alt=this.data[j].title;
            img.id=this.data[j].id;
            
            a.appendChild(img);
            li.appendChild(a);
            ul.appendChild(li);
        }    
        div.appendChild(ul);
        var p_div=document.createElement("ul");
        p_div.id=this.pagination_id;
        div.appendChild(p_div);
        this.pagination();
        this.preloadImgs(this.start)
        initLightbox();
    }

you obviously still need to address the img.src variable, but I will let you work that out.

I hope this has helped a bit.

Cheers,

David</this.finish;>

wensheng

Thanks
Thanks David!

I didn't know that, I never did any post-processing.

Currently "smugmug.images.get" return only ID's. To get image url, we need to use "smugmug.images.getURLs" or "smugmug.image.getInfo". The problem is that these 2 methods take image as argument, not album. To get URL for each images in a album, we need to make multiple api calls. E.g. if a album has 100 photos, we make 100 api calls, this would take a long time, and is not a good idea.

The basic problem is smugmug api call return too little infomation, which limits what we can do with it compared with other API, like flickr's.

I saw on other thread there mentioned "smugmug.js", in which they have a ajax call method. Where can I get this file? I am thinking of using ajax call to get info from smugmug directly.

Rightnow, because of cross-site limitation of xmlhttprequest, I make ajax call to my site, and my site call smugmug api to get info, then return info back to browser.

If I can call smugmug directly using ajax, smugmugbox will be a simpler, pure javascript implementation(without php).

wensheng

undocumented api feature
Hi, David, I have fixed the problem.

If I specify "Heavy=1" during smugmug.images.get request, I got all the information I needed.

This feature is not documented. see http://smugmug.jot.com/WikiHome/1.2.0/smugmug.images.get
In results section, it just says "array of ImageIDs".
I thought I could only get imageid's.

I saw you are the author of this wiki article. Would you mind update the doc if you find time?

Thanks for helping.

devbobo

Hi,

I am working on version 1.2.1 functionality, as part of that release I am redoing the coumetation.

Cheers,

David

wensheng

update: added slideshow feature
I hacked lightbox a little bit to add slideshow feature to smugmugbox.

File updated.

slideshow demo

devbobo

wensheng wrote:

Rightnow, because of cross-site limitation of xmlhttprequest, I make ajax call to my site, and my site call smugmug api to get info, then return info back to browser.

If I can call smugmug directly using ajax, smugmugbox will be a simpler, pure javascript implementation(without php).

The other week I added a JSONCallback parameter for the JSON api...

http://api.smugmug.com/hack/json/1.2.0/?method=smugmug.albums.get&SessionID=....&JSONCallback=myCallback

in this case, the results are returned like this...

myCallback({...});

where {...} is the JSON object.

Using this method, you bypass using xmlhttprequests...

<*script src="http://api.smugmug.com/hack/json/1.2.0/?method=smugmug.albums.get&SessionID=....&JSONCallback=myCallback"></*script*&gt;

I hope this makes some sense.

Cheers,

David

wensheng

Thanks
Thanks David!

I got it.


I will release a js version soon.

romeroax

a little more help
Sounds sweet, but I'm still a little confused as to how to use this (i'm a newbie to JSON though). Any chance you've got an example of how to call this using Mochikit?

devbobo wrote:

The other week I added a JSONCallback parameter for the JSON api...

http://api.smugmug.com/hack/json/1.2.0/?method=smugmug.albums.get&SessionID=....&JSONCallback=myCallback

in this case, the results are returned like this...

myCallback({...});

where {...} is the JSON object.

Using this method, you bypass using xmlhttprequests...

<*script src="http://api.smugmug.com/hack/json/1.2.0/?method=smugmug.albums.get&SessionID=....&JSONCallback=myCallback"><!--*script*--&gt;

I hope this makes some sense.

Cheers,

David

devbobo

romeroax wrote:

Sounds sweet, but I'm still a little confused as to how to use this (i'm a newbie to JSON though). Any chance you've got an example of how to call this using Mochikit?

Hi romeroax,

How this works in Mochikit is no different to how it works in plain old js.

Here's an example, say you call an api method, like this...
<*script* src="http://api.smugmug.com/hack/json/1.2.0/?method=smugmug.albums.get&SessionID=....&JSONCallback=myCallback"></*script*&gt;

That method would return a response like this...
{"stat":"ok","method":"smugmug.albums.get","Albums":{"2578746":{"id":2578746,"Title":"SmugBrowser","Category":{"id":138702,"Name":"Uploaders"}},"2528127":{"id":2528127,"Title":"blah","Category":{"id":0,"Name":"Other"}}}}

In your code, you will have a function like this...

function myCallback(json) {
....
}

within the function you can access the json structure like this...

json.stat
json.method
json.Albums
etc


I hope this helps a bit, let me know if you have any more questions.

Cheers,

David

wensheng

romeroax wrote:

Sounds sweet, but I'm still a little confused as to how to use this (i'm a newbie to JSON though). Any chance you've got an example of how to call this using Mochikit?

you can take a look at my pure js version:

http://wensheng.com/slideshowbox.tar.gz



I was unsure how to use it at first. Then I thought of generate js call within the callback function and it worked. There might be more elegant ways to do it though, like recursive callbacks.

romeroax

cool
nice work!

LaFlacaD

romeroax wrote:

nice work!

Now how can I get this done for myself?