| If you have a picasa gallery and want to add it to your website you have a problem. There is no simple way to do this. This tutorial will guide you how to add your or someones else public gallery to your blog or webpage.
Usage #1 First you need to download source code at the end of this tutorial and save it to picasa.js. Then you need to create some html file (or insert apropriate code to your blog) like example below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> var scriptLoader = { _loadScript: function (url, callback) { var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; if (callback) { script.onreadystatechange = function () { if (this.readyState == 'loaded') callback(); } script.onload = callback; } head.appendChild(script); },
load: function (items, iteration) { if (!iteration) iteration = 0; if (items[iteration]) { scriptLoader._loadScript( items[iteration],function () { scriptLoader.load(items, iteration+1); } ) } } } </script>
<script type="text/javascript" src="picasa.js"></script> </head> <body> </body> </html>
#2 Then add style for your gallery. Example below:
#picasaGallery { width: 400px; } .picasaGalleryItem { border: 1px solid silver; margin: 5px; padding: 2px; float: left; }
#3 Then you need to embed/add the gallery to your blog in any place you want like this:
<div id="picasaGallery"></div> <script type="text/javascript"> picasa.load({ containerId: 'picasaGallery', userName: 'sergey.brin', albumName: 'AlcedoHighlights', imageSize: 104 }) </script>
#4 Final source code must look something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> var scriptLoader = {_loadScript: function (url, callback) { var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; if (callback) { script.onreadystatechange = function () { if (this.readyState == 'loaded') callback(); } script.onload = callback; } head.appendChild(script); },
load: function (items, iteration) { if (!iteration) iteration = 0; if (items[iteration]) { scriptLoader._loadScript( items[iteration], function () { scriptLoader.load(items, iteration+1); } ) } } } </script>
<script type="text/javascript" src="picasa.js"></script> <style> #picasaGallery {width: 400px;}.picasaGalleryItem {border: 1px solid silver;margin: 5px;padding: 2px;float: left;}</style> </head> <body> <div id="picasaGallery"></div> <script type="text/javascript"> picasa.load({ containerId: 'picasaGallery', userName: 'sergey.brin', albumName: 'AlcedoHighlights', imageSize: 104 })</script> </body> </html>
Result The above code will generate a gallery from Sergeys Brins picasa galleries:
Source of the library (picasa.js) /** * * Add picasa gallery to your blog or website * http://www.webtoolkit.info/ * **/ var picasa = {
galleries: 0,
gallery: function (galleryObjectId, galleryObjectName, settings) { this.galleryObjectId = galleryObjectId; this.galleryObjectName = galleryObjectName; this.containerId = settings.containerId; this.userName = settings.userName; this.albumName = settings.albumName; this.imageSize = settings.imageSize; this.itemsArray = []; this.setup = function (data) { this.itemsArray = data.feed.entry; this.totalItems = this.itemsArray.length; for (var x = 0; x < this.totalItems; x++) { jQuery('#' + this.containerId).append('<div onClick="document.location.href=\''+this.itemsArray[x].media$group.media$content[0].url+'\'" class="picasaGalleryItem" style="cursor: pointer; width: ' + this.imageSize + 'px; height: ' + this.imageSize + 'px; background: url(' + this.itemsArray[x].media$group.media$thumbnail[0].url + ') no-repeat center center; "></div>'); } }; }, load: function (settings) { var galleryObjectId = picasa.galleries++; var galleryObjectName = 'picasa.gallery' + galleryObjectId; var galleryObject = eval(galleryObjectName + ' = new picasa.gallery(galleryObjectId, galleryObjectName, settings)'); scriptLoader.load(['http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js','http://picasaweb.google.com/data/feed/api/user/' + galleryObject.userName + '/album/' + galleryObject.albumName + '?alt=json-in-script&callback=' + galleryObjectName + '.setup&kind=photo&thumbsize=' + galleryObject.imageSize]); } } | 
