When a user clicks on a thumbnail in my gallery, the #mainImage src attribute is updated. Is there some way I can register a JavaScript event listener so that I receive a callback when this happens?

If not, I could have a function check #mainImage.src every 100ms and check to see if it had changed. This wouldn't be so bad, but I was hoping I wouldn't have to resort to polling it. Is there a better way?

If you put this javascript in your bottom javascript:

onPhotoShow.subscribe(MyNewPhotoLoaded);

function MyNewPhotoLoaded()
{
    // put your code here
}

Then, your function will get called each time the photo changes in the Smugmug view.

Wonderful! Is there someplace where this and other events are documented? I imagine there might be other things like this that would be worth discovering :).

Originally Posted by dound Wonderful! Is there someplace where this and other events are documented? I imagine there might be other things like this that would be worth discovering :).

Not that I know of.

Haha, that's too bad. Well, I'm especially glad for your help and quick replies then .

Is there a way to get the new image's SmugMug Key and ID without parsing #mainImage.src? It wouldn't be hard to parse but if the work's already done I'll take advantage of it.

Also, is there a similar event I can subscribe to in order to be notified of when the list of thumbnails change? And to get a list of which thumbnails are currently showing? I could just look at the children of #thumbnail to get a list of image IDs, but if there's a easier way ...

Originally Posted by dound Haha, that's too bad. Well, I'm especially glad for your help and quick replies then . Is there a way to get the new image's SmugMug Key and ID without parsing #mainImage.src? It wouldn't be hard to parse but if the work's already done I'll take advantage of it. Also, is there a similar event I can subscribe to in order to be notified of when the list of thumbnails change? And to get a list of which thumbnails are currently showing? I could just look at the children of #thumbnail to get a list of image IDs, but if there's a easier way ...

When they navigate to a new page of thumbnails in the Smugmug view, a new page is loaded and thus all JS is re-initialized so this event will get called for the new main image.

The following global JS variables are available in the Smugmug view web page, but may not be available in other pages so be careful with your script.

AlbumID
AlbumKey
ImageID
ImageKey

In the Smugmug view, you can get lots more info about the various photos in the page with access to the photoInfo array:

photoInfo[ImageID]

For example, the filename can be retrieved with:

photoInfo[ImageID].fileName

Wow, thanks for all this great info John - this should keep me busy for a little while now!

Originally Posted by jfriend If you put this javascript in your bottom javascript: onPhotoShow.subscribe(MyNewPhotoLoaded); function MyNewPhotoLoaded() { // put your code here } Then, your function will get called each time the photo changes in the Smugmug view.

This works, but the callback is a little slow - there is a noticeable lag time between when I click on a thumbnail or "next" and when my function gets called. Perhaps it only fires once the photo is actually loaded?

Is there a way to get a callback as soon as ImageID is set? That's all the information I need, and perhaps there's some way I could get a callback faster in this case.

Originally Posted by dound This works, but the callback is a little slow - there is a noticeable lag time between when I click on a thumbnail or "next" and when my function gets called. Perhaps it only fires once the photo is actually loaded? Is there a way to get a callback as soon as ImageID is set? That's all the information I need, and perhaps there's some way I could get a callback faster in this case.

Not that I know of.

Fortunately there is a way to get the callback faster. Unfortunately, the only way to do it is via polling.

I use setInterval() to periodically call a function which checks to see if ImageID is changed. When ImageID changes, I manually issue the callback registered with onPhotoShow. I find that this results in a MUCH snappier response time that is quite tolerable for the user.

Numbers (for fun)

• Just using onPhotoShow, there is a about a 600ms delay between clicking a thumbnail and the callback arriving. Yuck!
• Using polling, I can easily trim the delay to <=100ms (using a polling interval of 100ms) which is good enough.

Originally Posted by dound Fortunately there is a way to get the callback faster. Unfortunately, the only way to do it is via polling. I use setInterval() to periodically call a function which checks to see if ImageID is changed. When ImageID changes, I manually issue the callback registered with onPhotoShow. I find that this results in a MUCH snappier response time that is quite tolerable for the user. Numbers (for fun) Just using onPhotoShow, there is a about a 600ms delay between clicking a thumbnail and the callback arriving. Yuck! Using polling, I can easily trim the delay to <=100ms (using a polling interval of 100ms) which is good enough.

Where in your site are you using setInterval()? I wanted to see what kind of impact it has on CPU utilization when the browser is idle on your site, but I don't see the code you talked about in the normal places in your site (top and bottom javascript) so I can't check it out.

Here's the code:

/**
 * poll to find out about any change to ImageID ASAP - the onPhotoShow
 * callback is usually WAY too slow to wait for (~600ms!).
 */
var pastImageID = null;
setInterval(function() {
	if(pastImageID !== ImageID) {
		if(photoInfo[ImageID] !== undefined) {
			newPhotoLoaded(); // sets pastImageID to ImageID
		}
	}
}, 100);

I expect the CPU utilization impact to be pretty low - it just has to call the above function about once every 100ms, which is an eternity for a processor. The function itself is extremely cheap whenever the image hasn't changed. I don't notice it on my computer anyway.

I'd be interested to hear about what you observe when trying it out.