Skip to main content

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.

Popular posts from this blog

Double Bunk in Caravan

With our family expanding, we faced a challenge of adding another berth in our caravan, but I did not want to make it permanent.
A couple of options are available, of which one is simply to add a bunk to the single berth. We however did not want to cause any permanent markings on the interior of the caravan .

Netdata + SNMP + Mikrotik

Always wanted to see my Internet line usage as a gauge without having to log into the router.
So today I configured SNMP in Netdata to collect from my Mikrotik router.
/etc/netdata/node.d/snmp.conf:
{
"enable_autodetect": false,
"update_every": 5,
"max_request_size": 100,
"servers": [
{
"hostname": "10.1.1.1",
"community": "public",
"update_every": 5,
"max_request_size": 50,
"options": { "timeout": 20 },
"charts": {
"mikrotik1.cpu": {
"title": "CPU ",
"units": "percentage",
"type": "line",
"family": "cpu",
"dimensions": {
"used": {
&qu…

CasparCG Simple Playlist

It is possible to build a simple playlist as a rundown in the CasparCG client. It will very simply play each item after each other that are on the same layer. In this very simple post I show how to build such a playlist including the very important step of activating the OSC.

The Open Sound Control (OSC) implementation is how the client knows what the server is doing and then being able to send new command back to the server when a piece of media has ended to trigger playback of the next piece. For more details on the OCS, please see http://casparcg.com/wiki/CasparCG_OSC_Protocol