Hey everyone,

I've written an add-on which allows you to seamlessly convert your homepage's SmugMug Flash slideshow to the excellent HTML5 JFriend slideshow. This retains the "slideshow settings" dialog, so you don't have to keep editing your JavaScript code to change settings on your slideshow. It allows you to leave your bio alone, so your bio and slideshow can co-exist. And of course, your visitors no longer need to have Flash installed.

It also adds support for displaying images from feeds, such as by keywords, most popular photos, and recent photos. I hope this support can be rolled into the standard JFriend slideshow too :).

Installation

First, install the JFriend slideshow code: http://www.pixel99.com/smugcustom/slideshow/ (the Top JavaScript, CSS and Bottom JavaScript codes need to be installed). Afterwards, add this code to the bottom of your Top JavaScript:

/*
 * Slideshow upgrader version 0.1, by Sherlock Photography.
 *  
 * Automatically upgrade SmugMug's homepage slideshow to a JFriend HTML5 Slideshow (1.1.1)
 * 
 * JFriend Slideshow is available here: http://www.pixel99.com/smugcustom/slideshow/ and is Copyright John Friend.
 * 
 * Reference: http://www.dgrin.com/showthread.php?t=211681
 * 
 * This is the Top JavaScript code:
 */

// Want to make changes to the slideshow settings on your homepage? Enter them in this section, here's an
// example which selects all possible transitions instead of just the plain fade.
var jfriendHomepageSlideshowTweaks = {
	transitionsList: "all" 
};

if (typeof SM.flash.insertSlideshowIntoElement !== 'undefined')
	(function() 
	{
		SM.flash.insertSlideshowIntoElement = function(elementID, w, h, params) 
		{
			if (elementID != 'here')
				YD.get(elementID).innerHTML = "";
			
			if (params.feedURL) 
			{
				/* SmugMug's feed APIs are tuned for Flash fetching, we can't fetch from those domains
				 * with JavaScript. Fetch from our own domain instead.
				 */
				params.AlbumID = unescape(unescape(params.feedURL.replace('http://api.smugmug.com', '')));
				params.AlbumKey = 'feed';
			}
			
			//Convert SmugMug config to JFriend-style
			var defaults = {
				width: w == "100%" ? parseInt(YD.getComputedStyle(YD.get(elementID), "width"), 10) : w,
				height: h,
				galleryID: params.AlbumID,
				galleryKey: params.AlbumKey,
				randomSlideOrder: params.randomize == "true",
				randomSlideStart: params.randomStart == "true",
				showCaptions: params.captions == "true",
				captionPosition: "bottom",
				clickType: params.clickToImage == "true" ? "clickToGallery" : "none",
				betweenTransitionsTime: params.setSpeed == "med" ? 8 : params.setSpeed == "slow" ? 12 : 4,
				transitionsList: "fade",
				transitionDuration: params.crossFadeSpeed / 1000,
				topAlign: "center",
				splashImageURL: params.splash,
				splashMinDisplayTime: (params.splashDelay || 0) / 1000
			};
			
			var config = YAHOO.lang.merge(defaults, typeof jfriendHomepageSlideshowTweaks !== 'undefined' ? jfriendHomepageSlideshowTweaks : {});
			
			JF.InsertSlideshow(config, elementID == 'here' ? 'here' : "#" + elementID);
		};
		
		SM.flash.insertSlideshow = function(w, h, params) 
		{
			SM.flash.insertSlideshowIntoElement("here", w, h, params);
		};
	})();

And add this code to the bottom of your Bottom JavaScript:

/*
 * Slideshow upgrader version 0.1, by Sherlock Photography.
 *  
 * Automatically upgrade SmugMug's homepage slideshow to a JFriend HTML5 Slideshow (1.1.1)
 * 
 * JFriend Slideshow is available here: http://www.pixel99.com/smugcustom/slideshow/ and is Copyright John Friend.
 * 
 * Reference: http://www.dgrin.com/showthread.php?t=211681
 * 
 * This is the Bottom JavaScript code:
 */

(function() 
{
	var oldGetImageInfoNoLogin = JF.GalleryData.prototype.GetImageInfoNoLogin;
	
	JF.GalleryData.prototype.GetImageInfoNoLogin = function(albumID, albumKey, successCallback, failureCallback, scope)
	{
		function HandleRequestFailure(request, response)
		{
			response.stat = "fail";
			response.code = response.status;
			response.message = response.statusText;
			HandleFailure(request, response);
		}
		// Convert RSS-style feed into a "smugmug.images.get"-style response
		function HandleGetImageFeedSuccess(request, response) 
		{
			if (!request.responseXML) 
			{
				HandleFailure(request, response);
				return false;
			}
			
			var root = request.responseXML.documentElement;
			
			var images = root.getElementsByTagName('item');
			var convertedImages = [];
			
			for (var i = 0; i < images.length; i++) 
			{
				var image = images[i];

				var link = image.getElementsByTagName('link')[0].firstChild.nodeValue;
				var linkMatches = link.match(/#(\d+)_([a-z0-9A-Z]+)$/);
				
				var convertedImage = {
					id: linkMatches[1],
					Key: linkMatches[2],
					Caption: image.getElementsByTagName('title')[0].firstChild.nodeValue,
					URL: link 
				};
				
				// SmugMug creates unhelpful "John Smith's photo" captions
				// for uncaptioned photos. Remove those:
				var authorName;
				
				if (image.getElementsByTagName('credit')[0] != undefined)
					authorName = image.getElementsByTagName('credit')[0].firstChild.nodeValue;
				else
					authorName = image.getElementsByTagName('media:credit')[0].firstChild.nodeValue;
								
				if (convertedImage.Caption == authorName + "'s photo")
					convertedImage.Caption = "";
				
				// Generate URLs for image sizes:
				var imageSizes;
				
				if (image.getElementsByTagName('group')[0] != undefined)
					imageSizes = image.getElementsByTagName('group')[0].getElementsByTagName('content');
				else 
					imageSizes = image.getElementsByTagName('media:group')[0].getElementsByTagName('media:content');

				for (var j = 0; j < imageSizes.length; j++)
				{
					var size = imageSizes[j];
					
					var imageUrl = size.attributes.getNamedItem('url').value;
					
					var sizeMatches = imageUrl.match(/-([a-zA-Z0-9]+)(-\d+)?\.([a-zA-Z]{3})$/);
					var sizeSuffix = sizeMatches[1];
					
					// Assume last size is "original" size
					if (j == imageSizes.length - 1) 
					{
						convertedImage.Width = size.attributes.getNamedItem('width').value;
						convertedImage.Height = size.attributes.getNamedItem('height').value;
						convertedImage.Format = sizeMatches[3];
					}
					
					// Convert the size suffix into a the name of the
					// attribute from the SmugMug API
					for (var k = 0; k < JF.ImageLoader.sizeSuffixes.length; k++) 
					{
						if (sizeSuffix == JF.ImageLoader.sizeSuffixes[k]) 
						{
							convertedImage[JF.ImageLoader.sizeTable[k]] = imageUrl;
							break;
						}
					}
				}
				
				convertedImage.CustomURL = image.getElementsByTagName('guid')[0].firstChild.nodeValue; 
				
				convertedImages.push(convertedImage);
			}

			this.images = convertedImages;
			
			successCallback.call(scope, this.images, this.url);
		}		
		
		if (albumKey == 'feed') 
		{
			var myCallbackObj = {
				success : HandleGetImageFeedSuccess,
				failure: HandleRequestFailure
			};
			
			// Ask SmugMug to generate CustomSize URLs for us
			var url = albumID + "&Size=195x127";
			
			YAHOO.util.Connect.asyncRequest('GET', url, myCallbackObj);			
		} 
		else 
		{
			return oldGetImageInfoNoLogin.call(this, albumID, albumKey, successCallback, failureCallback, scope);
		}
	};
	
	if (typeof homepageSlideshowPanel !== 'undefined') 
	{
		var oldShow = homepageSlideshowPanel.show;
		
		// Slideshow protector covers settings screen, so remove it when
		// settings are entered...
		homepageSlideshowPanel.show = function(event) 
		{
			var elems = YD.getElementsByClassName('slideshowProtector');
			
			for (var i = 0; i < elems.length; i++)
				elems[i].parentNode.removeChild(elems[i]);
	
			oldShow.call(this, event);
		};
	}
})();

After adding the code, your homepage slideshow will be automatically upgraded to a JFriend slideshow (make sure that you have the slideshow turned on in your homepage layout). Here's a screenshot of it running while logged in:



Live demo

You can check out a live demo at my website, http://www.sherlockphotography.org/ .

That worked perfectly to replace default slideshow, but my slideshow is still in the box with border. Any ideas how to remove it and have photos the width of my page (750px)? I tried different things but can't remove the border. Same with biobox border :P Maybe it's the theme that restricts it?

Thanks much!