Subscribe For Free Updates!

We'll not spam mate! We promise.

Tuesday, 11 June 2013

Retrieve Picasa Albums and View photos in Asp.Net

Unknown    No comments

Introduction
This article describes how to retrieve Picasa Albums with a photo in ASP.Net.  Here I will describe how to communicate with Picasa using the Google API.
Description
Since it is a third party software, for this we require a third party DLL to be referenced by our application that will communicate with the Gmail server.
For this we must download the Google API setup from the following link:
http://code.google.com/p/google-gdata/
Or you can directly download it from this link:
https://google-gdata.googlecode.com/files/Google_Data_API_Setup_2.1.0.0.msi
When you install this setup you will get these DLL files in your PC:
  1. Google.GData.Client.dll
  2. Google.GData.Photos.dll
  3. Google.GData.Extensions.dll
Collect these DLLs.
To view your retrieved photos in a gallery look we use the jQuery class libraries. So you must download these files and CSS:
1.       jquery-1.10.1.js
2.       jquery.galleriffic.js
3.       jquery.opacityrollover.jsYou can also download it from the source code attached in the file.
Design
Now design your screen like the following screen.

Image1.jpg
Or you can copy the following source code:

// Comment




        


            

                    


                        
                        
                        
                        
                    



                        
                        
                        
                        
                    



                        
                            
                            
                        
                    



                        
                        
                    




        



            


                        
                            
                                
                                    
                                
                            
                            
                                
                                     
                                
                            
                        
                    
                


            
                    







                                Gallery by Sanjeeb



                                CopyRight by Sanjeeb

Next add the following JavaScript code in the head tag (it's used to design the gallery):

<head runat="server">    <title></title>    <link rel="stylesheet" href="css/basic.css" type="text/css" />    <link rel="stylesheet" href="css/galleriffic-2.css" type="text/css" />        <script type="text/javascript" src="js/jquery-1.10.1.js"></script>    <script type="text/javascript" src="js/jquery.galleriffic.js"></script>    <script type="text/javascript" src="js/jquery.opacityrollover.js"></script>    <script type="text/javascript">        document.write('');
    </script>    <script type="text/javascript">        jQuery(document).ready(function ($) {
            // We only want these styles applied when javascript is enabled            $('div.navigation').css({ 'width': '300px', 'float': 'left' });
            $('div.content').css('display', 'block');
            // Initially set opacity on thumbs and add            // additional styling for hover effect on thumbs            var onMouseOutOpacity = 0.67;
            $('#thumbs ul.thumbs li').opacityrollover({
                mouseOutOpacity: onMouseOutOpacity,
                mouseOverOpacity: 1.0,
                fadeSpeed: 'fast',
                exemptionSelector: '.selected'            });
            // Initialize Advanced Galleriffic Gallery            var gallery = $('#thumbs').galleriffic({
                delay: 2500,
                numThumbs: 15,
                preloadAhead: 10,
                enableTopPager: true,
                enableBottomPager: true,
                maxPagesToShow: 7,
                imageContainerSel: '#slideshow',
                controlsContainerSel: '#controls',
                captionContainerSel: '#caption',
                loadingContainerSel: '#loading',
                renderSSControls: true,
                renderNavControls: true,
                playLinkText: 'Play Slideshow',
                pauseLinkText: 'Pause Slideshow',
                prevLinkText: 'Previous Photo',
                nextLinkText: 'Next Photo,
                nextPageLinkText: 'Next ,
                prevPageLinkText: 'Prev',
                enableHistory: false,
                autoStart: false,
                syncTransitions: true,
                defaultTransitionDuration: 900,
                onSlideChange: function (prevIndex, nextIndex) {
                    // 'this' refers to the gallery, which is an extension of $('#thumbs')                    this.find('ul.thumbs').children()
                                                .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                                                .eq(nextIndex).fadeTo('fast', 1.0);
                },
                onPageTransitionOut: function (callback) {
                    this.fadeTo('fast', 0.0, callback);
                },
                onPageTransitionIn: function () {
                    this.fadeTo('fast', 1.0);
                }
            });
        });
    </script></head>

Now go to the code view.
Next add a reference of the following Google gdata DLL to your website:
  • Google.GData.Client.dll
  • Google.GData.Extensions.dll
  • Google.GData.Photos.dll

And write the following code .cs file:
using System; 
using System.Web.UI.WebControls; 
using Google.GData.Photos; 
using System.Data; 
using System.Text;
public partial class _Default : System.Web.UI.Page{
    protected void Page_Load(object sender, EventArgs e)
    {
        lblMsg.Text = string.Empty;
    }
    /// <summary>    /// This method used to bind the albums to grid    /// </summary>    private void BindAlbum()
    {
        AlbumQuery query = new AlbumQuery(PicasaQuery.CreatePicasaUri(txtUserName.Text));
        PicasaService service = new PicasaService("sample");
        service.setUserCredentials(txtUserName.Text, txtpwd.Text);
        Session["token"] = service.QueryClientLoginToken();
        PicasaFeed feed = service.Query(query);
        DataSet ds = new DataSet();
        DataTable dt = new DataTable();
        dt.Columns.Add(new DataColumn("Album", typeof(string)));
        dt.Columns.Add(new DataColumn("NO of photo", typeof(string)));
        dt.Columns.Add(new DataColumn("url", typeof(string)));
        dt.Columns.Add(new DataColumn("id", typeof(string)));
        foreach (PicasaEntry entry in feed.Entries)
        {
            DataRow dr1 = dt.NewRow();
            AlbumAccessor ac = new AlbumAccessor(entry);
            dr1["Album"] = entry.Title.Text;
            dr1["NO of photo"] = ac.NumPhotos;
            dr1["id"] = ac.Id;
            dr1["url"] = entry.Media.Thumbnails[0].Url;
            dt.Rows.Add(dr1);
        }
        ds.Tables.Add(dt);
        ViewState["Album"] = ds;
        GridView1.DataSource = ds;
        GridView1.DataBind();
    }
    /// <summary>    /// this event used to bind the photo to gallery using the albumid    /// </summary>
      protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        if (e.CommandName == "Download")
        {
            Panel1.Visible = true;
            PhotoQuery query = new PhotoQuery(PicasaQuery.CreatePicasaUri(txtUserName.Text, e.CommandArgument.ToString()));
            PicasaService service = new PicasaService("Picasa");
            service.setUserCredentials(hfUsername.Value, hfPwd.Value);
            PicasaFeed feed = service.Query(query);
            StringBuilder html = new StringBuilder();
            string title;
            html.Append("<ul class=\"thumbs noscript\">");
            foreach (PicasaEntry entry in feed.Entries)
            {
                if (entry.Title.Text.LastIndexOf(".") > -1)
                    title = entry.Title.Text.Substring(0, entry.Title.Text.LastIndexOf("."));
                else                    title = entry.Title.Text;
                html.Append(String.Format("<li><a class=\"thumb\" name={0} href=\"{1}\" title=\"{2}\"><img src=\"{3}\" alt=\"{4}\"/></a>",
                    title, entry.Media.Content.Url, title, entry.Media.Thumbnails[0].Url, title));
                html.Append(String.Format("<div class=\"caption\"><div class=\"image-title\">{0}</div><div class=\"image-desc\">{1}</div></div></li>",
                    title, entry.Summary.Text));
            }
            html.Append("</ul>");
            divSlider.InnerHtml = html.ToString();
        }
    }
    protected void GridView1_SelectedIndexChanging(object sender, GridViewPageEventArgs e)
    {
        DataSet ds = ViewState["Album"] as DataSet;
        GridView1.PageIndex = e.NewPageIndex;
        GridView1.DataSource = ds;
        GridView1.DataBind();
    }
    protected void btnLogin_Click(object sender, EventArgs e)
    {
        if (txtUserName.Text != string.Empty && txtpwd.Text!=string.Empty)
        {
            hfUsername.Value = txtUserName.Text;
            hfPwd.Value = txtpwd.Text;
            tdlogin.Visible = false;
            BindAlbum();
        }
        else            lblMsg.Text = "Enter Your gmail id and pwd";
    }
}

Now build your application. And enter the Gmail id and password in the corresponding TextBox.
Click on the "Login" button. It will show all your Albums with names, number of photos and album cover photo in the grid.
Image2.jpeg


 Image3.jpeg

Now click on any album cover photo to see all photos. It will show all photos in the gallery. In the gallery you can also see the slide show.

 Image4.jpg 

 To download Code Click Here

Socializer Widget By Blogger Yard
SOCIALIZE IT →
FOLLOW US →
SHARE IT →

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

 

Copyright © 2013 DOT NET MY LIFE.