Tuesday, March 11, 2014

Display Picasa Web Albums using jQuery and Lightbox into asp.net Website

Import the following jQuery and CSS

<link href="fancyBox/jquery.fancybox.css" rel="stylesheet" type="text/css" />

<link href="fancyBox/helpers/jquery.fancybox-thumbs.css" rel="stylesheet" type="text/css" />

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<script src="fancyBox/jquery.fancybox.pack.js" type="text/javascript"></script>

<script src="fancyBox/helpers/jquery.fancybox-thumbs.js" type="text/javascript"></script>

<link href="jquery.picasagallery.css" rel="stylesheet" type="text/css" />

<script src="jquery.picasagallery.js" type="text/javascript"></script>


Make Division in ContentPlaceHolder


<div class="picasagallery">

</div>

Call the below Function


<script type="text/javascript">

$(document).ready(function () {

$('.picasagallery').picasagallery({

username: 'xyz@gmail.com', // Your Picasa public username

hide_albums: ['Scrapbook Photos', 'Instant Upload', 'Photos from posts'], // hidden album names

link_to_picasa: false, // true to display link to original album on Google Picasa

thumbnail_width: '160', // width of album and photo thumbnails

thumbnail_cropped: false, // use cropped format (square)

title: 'Albums', // title shown above album list

inline: false // true to display photos inline instead of using the fancybox plugin



});

});

 
</script>

Gallery'>