Slimming down your smug

wellman

Some of the more fantastic javascript hacks for Smugmug have one drawback - they must be loaded onto each and every one of your smugmug pages, regardless of whether they're actually needed for that page. For instance, bigwebguy's slideshow code is about 8k, and devbobo's thumbnail zoomer is 19k. If you're overly obsessed with minor details like myself, I offer a solution below.

If you have a server you can stick text files on (or are willing to get a free service like filelodge.com [no endorsement, I don't use them]), you can place your larger chunks of javascript functionality on an outside server and load them up to smugmug only when you need them. Here's how...

First off, take the code you want to use conditionally and save it as something.js on your server of choice.

Add this function to your javascript section. It basically gives you a convenient means of testing for the different class identifiers of a smugmug page (ie homepage, category, galleryPage, etc).

function isBodyClass(sClass) 
{
  sClassName = document.body.className;
  re = new RegExp(sClass + "( |$)") 
  if (!sClassName) return false;
  return re.test(sClassName);
}

The exact implementation will depend on what you want your tested condition(s) to be. In the example below, I wanted to only load up the bulk zoomer code when I'm logged in, so I added this function (in script tags) to my footer. You'll need to change your if test and the location of your JS file. The rest should be OK as is.

// Load Bulk Zoom Thumbnailer only if logged in
if (isBodyClass('loggedIn'))
{
  oScript = document.createElement('script');
  oScript.type = 'text/javascript';
  oScript.src = 'http://myotherserver.com/bulk_zoom_thumbnailer.js';
  document.getElementsByTagName('head').item(0).appendChild(oScript);
}

Now the bulk thumbnail zoomer code only gets loaded when I'm logged in, which saves my viewers 19k of download every time they click on a new page on my site.

The main drawback to this methodology is that my site now relies on two servers. I tried stuffing the code into an HTML-only smugmug gallery (so I could read it into a variable and load it up dynamically), but Smugmug must have some anti-JS filtering going on in the "description" field for galleries. I suppose I'd do the same if I were Smugmug.

Thanks to devbobo for his help in a previous post which set me on the path to figuring this out! Hope some folks get some use out of the technique. I'm all for improvements if you have any.

bwg

wellman wrote:

The main drawback to this methodology is that my site now relies on two servers. I tried stuffing the code into an HTML-only smugmug gallery (so I could read it into a variable and load it up dynamically), but Smugmug must have some anti-JS filtering going on in the "description" field for galleries. I suppose I'd do the same if I were Smugmug.

cool deal greg...i was actually thinking of this last night after reading your posts.

check out http://bigwebguy2.smugmug.com/gallery/1261608

you can put the js code in the description via the customize gallery screen.

the extra ajax hit to the server would probably not be that big of a deal for stuff like the bulk zoom where you only want it when you're logged in..although i probably wouldn't do it for stuff like the slideshow because it cant be cached like if it were just a file on a server. it would be nice to not have to depend on a remote host though.

wellman

bigwebguy wrote:

you can put the js code in the description via the customize gallery screen.

Thanks! I guess the form on the customize gallery screen is a little more forgiving than the "live" edit box on the gallery when I'm logged in. Sweet!