Create a Page Gallery from your Picasa Web Albums

Do you want to create a page containing the albums of your Picasa Web account? If yes, then let's do it! :D

First, let me mention this very nice JQuery script made by alanhamlett to make this possible. Go to his site, from there you can download all the scripts and css files and take a look at the sample. Study it if you want! You can also host the scripts on your own, you need :

  • jquery.fancybox.pack.js
  • jquery.fancybox-thumbs.js
  • jquery.picasagallery.js


picasa gallery
sample output from alanhamlett site

Anyway, the thing that I'll be teaching here, or maybe sharing is how to implement it here in Blogger. So, here it is!


Implementation

First, from Dashboard > Template > Edit HTML then find </head> and paste the code just above it.

<script src='http://code.jquery.com/jquery-latest.js'/>
<script src="http://mattmorzcodes.googlecode.com/files/jquery.fancybox.pack.js" type="text/javascript"></script>
<script src="http://mattmorzcodes.googlecode.com/files/jquery.fancybox-thumbs.js" type="text/javascript"></script>
<script src="http://mattmorzcodes.googlecode.com/files/jquery.picasagallery.js" type="text/javascript"></script>
Ignore this if you have it already, <script src='http://code.jquery.com/jquery-latest.js'/>

Second, still in your template find ]]></b:skin>  just above it paste the code:



Then you need to SAVE IT!

Lastly, create a new page and put a title, maybe "Gallery" then switch to HTML and paste the code below,

<div class='picasagallery'></div>
<script type="text/javascript">
            $(document).ready(function() { $('.picasagallery').picasagallery(
             {'username':'otakuview','hide_albums' : ['FW', 'woody','Hoody: Hizuki Yuuki'],'thumbnail_width' : '300'});
  });
        </script>
Note: Only Public Albums will show but you have an option to hide such albums. I advice set your album first to Public. 

Configuration:

  • otakuview- change it with your username
  • 'FW', 'woody','Hoody: Hizuki Yuuki'- title of the album you want to hide
  • 300- width in pixel size
Change it with your preference.

If this doesn't work consider deleting all the jquery lib files, then just add the code below ]]></b:skin>
  <script src='http://code.jquery.com/jquery-latest.js'/>

Popular posts from this blog

Set table width to 100% on PDF export in Datatables

Add/Subtract Single Digit Number in Assembly Language