Cato's Place

This post continues on from Part 1. So if you have not read that, you may want to do so before continuing.

After completing the steps in the previous blog we now have a set of photo album thumbnail images. We shall now add the links that will then open up the Picasa Web Album

Appending the following to the displayed images code does the job for Picasa Web Albums:

.wrap("<div class='imgholder'><a href=" + item.link[1].href + "></a></div>");

So the complete code for the displaying of the album thumbnail images and links to them becomes this:

$jq("<img/>").attr("src",item.media$group.media$thumbnail[0].url)
  .appendTo("#images")
  .wrap("<div class='imgholder'><a href=" + item.link[1].href + "></a></div>");

Next we will add some styles to the images and the holder. Add the following code:

#images {
  overflow:hidden;
  height: 160px;
}
.imgholder {
  overflow:hidden;
  width: auto;
  float: left;
  border-right: 1px solid white;
  background: black;
  height: 160px;
}
.imgholder a,
.imghover a:hover,
.imghover a:hover img,
.imgholder a img {
  margin: 0;
  padding: 0;
  border: 0;
}

This code adds a fixed height to the images panel, floats the image container divs to the left inside the images panel and prevent margin/padding inheritence. When adding this widget to any other page you may need to clear:left at the bottom of the images panel. If you need to do this add an empty div with the id of imgholderend and add this code at the end of the styles:

.imgholderend {
  clear:left;
}

Now it is time to animate the images. First up we set the images that are not the first one to slivers of 10px wide and then add the JQuery code that animates the slivers. This code comes after the image loop code.

  // Set up the image container divs to collapse
  $jq(".imgholder").not(":first").css("width","10px");

  // Add the container mouseover event function
  $jq(".imgholder").mouseover(function() {

    // Make every image other than the one being mousedover small
    $jq(".imgholder").stop().not(this).animate({width:"10px"});

    // Make the currently active image big (set width to image width)
    $jq(this).animate({width:$jq(this).find("img").width()+"px"});

  });

Loading this code into the browser now should show you the Picasa Photo Stream slivers. Mouse over the images and they should animate to expand the currently moused over sliver.

Now that this code is working we can add it to a WordPress sidebar widget.

The first thing to check is that JQuery is enabled for your theme. For the default theme this means updating the call PHP in the header.php where wp_head() is called to the following:

<?php
  wp_enqueue_script('jquery');
  wp_head();
?>

The next thing is to add a text widget and add the Javascript code and the image holding divs we have developed over the 2 blogs:

<script type="text/javascript">
var picasaFeed = "http://picasaweb.google.com/data/feed/base/user/psellars?alt=json&kind=album&hl=en_US&callback=?";
var $jq = jQuery.noConflict();

$jq.getJSON(picasaFeed,function(data) {

  $jq.each(data.feed.entry, function(i,item) {
    $jq("<img/>").attr("src",item.media$group.media$thumbnail[0].url)
      .appendTo("#images")
      .wrap("<div class='imgholder'><a href='"+item.link[1].href+"'</a></div>");
  });

  // Set up the image container divs to collapse
  $jq(".imgholder").not(":first").css("width","10px");

  // Add the container mouseover event function
  $jq(".imgholder").mouseover(function() {

    // Make every image other than the one being mousedover small
    $jq(".imgholder").stop().not(this).animate({width:"10px"});

    // Make the currently active image big (set width to image width)
    $jq(this).animate({width:$jq(this).find("img").width()+"px"});

  });

});
</script>
<div id="images"></div>
<div id="imgholderend"></div>

..then add the CSS to your theme CSS. On WordPress this can be found in Appearance then Editor from the menu. The CSS to add is thus:

/* Picasa Web Albums Extra */
#images {
  overflow:hidden;
  height: 160px;
}
.imgholder {
  overflow:hidden;
  width: auto;
  float: left;
  border-right: 1px solid white;
  background: black;
  height: 160px;
}
.imgholder a,
.imghover a:hover,
.imghover a:hover img,
.imgholder a img {
  margin: 0;
  padding: 0;
  border: 0;
}
.imgholderend {
  clear:left;
}

That is it, you should now have a Picasa Web Album widget like that in the sidebar of this blog’s main page.

Hopefully you found this a useful blog – having written it I am considering writing such blogs more as articles on my website rather than blogs going forward. Makes more sense to me to blog about issues/little bits and pieces I have experimented with rather than these article type blogs.