Labels

PicasaWEB Portfolio in Blogger

Let me start by thanking Louis van Rensburg and Tim Haak for helping me on this one.

The original start information came from Blogger Xpertise - http://www.blogxpertise.com/2012/09/custom-slideshow-widget-using-picasa.html.

You want to start by ensuring you have the JQuery Java code in your Blogger instance.

Now, editing the HTML part of a Blogger template can make everything break, so be sure to keep copies of the code somewhere save. It is also not totally dangerous as you can restore the template version anytime.

Edit the Blogger template: www.blogger.com -> Template -> Edit HTML -> Read the warning -> Proceed -> and tick the "Expand Widget Templates"

Part 1:

</b:template-skin>

<script src='https://www.google.com/jsapi' type='text/javascript'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>



Part 2:

</head>

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

<!-- Thumbsnails from Picasa -->
<script type='text/javascript'>//<![CDATA[
function goThumbs(imageDestination, picasaEmail, picasaAlbum, picasaResults, picasaDimension){
 var url = 'https://picasaweb.google.com/data/feed/api/user/' + picasaEmail + '/album/' + picasaAlbum + '?kind=photo&imgmax=' + picasaDimension + '&max-results=' + picasaResults + '&alt=json';
    ($.getJSON(url, 'callback=?')).success(function(data){
  var slides   = new Array();
  var thumbs  = new Array();
  var captions  = new Array();
  var heights  = new Array();
  var widths  = new Array();
  var htmlthing = '';
  
  $(data.feed.entry).each(function(i, entry){
   slides[i]  = entry.content.src;
   thumbs[i] = entry.media$group.media$thumbnail[0].url;
   
   if(i!='undefined') {
    htmlthing = htmlthing + '<a class="group1 cboxElement" href="' + slides[i] + '" rel="colorbox">';
    htmlthing = htmlthing + '<img src="'+thumbs[i]+'" /></a>';
   }
  });
  
  $('#goThumbs').html(htmlthing);
 });
}

//]]></script>
<!-- End -->


Part 3: 
<div>Here are some of my favourite photographs I've taken over the years. <br>

<script type="text/javascript">

$(function(){
 goThumbs('#goThumbs','johan@who-els.co.za','Portfolio',20,1024); 
});

$(document).ready(function(){
  $("a[rel='colorbox']").colorbox();
});

</script>

<div class="separator" style="clear: both; text-align: center;" id="goThumbs" ></div>
</div>

Output:


Note: I'm calling a different LightBox than the default in Blogger, and I will share that information when I have it all.
Labels:

Popular Posts