• Gear
  • Shots
  • Photo Craft
  • Video
  • Wide Angle
  • Support
  • New Stuff
  • More
Support Legacy SmugMug Customization JavaScript callback when new image is shown?

Need some help with your New SmugMug Site?

Dgrin Challenges

Our Challenges moderator has lined up an new set of challenges for you. The Weekly Word Challenge. Get all the details and participate in the conversation Weekly Word Challenge.

Past DSS Challenge Winners, DSS Challenge Rules, and other important DSS Challenge information is here.

Looking for a little challenge? The Dgrin Mini-Challenges are a great way to challenge yourself. Take a moment to look through past winners and find the current Mini Challenge here.

From Around the Net

Enjoy a few of our favorite articles from around the 'net. If you have something you think we should see, post it here and we'll have a look.

Journeys

Landscapes

Sports

 
Thread Tools Display Modes
Old Jun-06-2010, 02:19 PM
#1
dound is offline dound OP
David Underhill
dound's Avatar
Huh JavaScript callback when new image is shown?
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?
__________________
~ David Underhill
Old Jun-06-2010, 02:22 PM
#2
jfriend is offline jfriend
Scripting dude-volunteer
If you put this javascript in your bottom javascript:

Code:
onPhotoShow.subscribe(MyNewPhotoLoaded);

function MyNewPhotoLoaded()
{
    // put your code here
}
Then, your function will get called each time the photo changes in the Smugmug view.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Jun-06-2010, 02:26 PM
#3
dound is offline dound OP
David Underhill
dound's Avatar
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 :).
__________________
~ David Underhill
Old Jun-06-2010, 02:36 PM
#4
jfriend is offline jfriend
Scripting dude-volunteer
Quote:
Originally Posted by dound View Post
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.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Jun-06-2010, 03:04 PM
#5
dound is offline dound OP
David Underhill
dound's Avatar
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 ...
__________________
~ David Underhill
Old Jun-06-2010, 03:11 PM
#6
jfriend is offline jfriend
Scripting dude-volunteer
Quote:
Originally Posted by dound View Post
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
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Jun-06-2010, 03:15 PM
#7
dound is offline dound OP
David Underhill
dound's Avatar
Wow, thanks for all this great info John - this should keep me busy for a little while now!
__________________
~ David Underhill
Old Jun-18-2010, 02:42 PM
#8
dound is offline dound OP
David Underhill
dound's Avatar
Quote:
Originally Posted by jfriend View Post
If you put this javascript in your bottom javascript:

Code:
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.
__________________
~ David Underhill
Old Jun-18-2010, 03:03 PM
#9
jfriend is offline jfriend
Scripting dude-volunteer
Quote:
Originally Posted by dound View Post
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.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Jun-24-2010, 02:45 PM
#10
dound is offline dound OP
David Underhill
dound's Avatar
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.
__________________
~ David Underhill
Old Jun-26-2010, 08:43 AM
#11
jfriend is offline jfriend
Scripting dude-volunteer
Quote:
Originally Posted by dound View Post
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.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Jun-26-2010, 09:38 AM
#12
dound is offline dound OP
David Underhill
dound's Avatar
Here's the code:
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.
__________________
~ David Underhill
Tell The World!  
Tags
callback , image changed , javascript
Similar Threads Thread Starter Forum Replies Last Post
Image Tank Review- Wolverine PicPac 250GB Justiceiro Accessories 10 Oct-15-2009 12:35 PM
Audubon Swamp Garden in Magnolia Gardens Dixie Wildlife 25 Apr-10-2007 09:54 PM
JavaScript Help Anyone? (Pop-up Image Size) jethro Legacy SmugMug Customization 4 Nov-16-2006 12:15 AM


Thread Tools
Display Modes

Posting Rules  
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump