em Uncategorized

Álbum em PHP utilizando a API do Picasa, JQuery e FancyBox

Esses dias surgiu a oportunidade de um trabalho, o cliente precisava reformular o site, melhorar o processo de publicação de conteúdo, entre outros… Ao acessar o site para dar uma olhada no tipo de conteúdo, me deparo com o link álbum, cliquei pra conferir e fui parar no picasa, no álbum do cara.

Muito empolgado com as funções de XML do PHP resolvi aproveitar a API do picasa para implementar um álbum com a cara do site do meu cliente mas com a infraestrutura do picasa 😀 .

O código é bem simples, coloquei comentários onde pudesse gerar dúvidas.

Segue:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Álbum usando a API do Picasa + JQuery + FancyBox</title>
    <style type="text/css" media="all">
        html, body {margin: 0px;    padding: 0px;}
        body {background: #EAEAEA; font-family: "Trebuchet MS",Verdana,Arial,sans-serif; font-size: 14px; line-height: 1.6;}
        a {outline: none; margin-right: 20px;}
        a img {border: 1px solid #CCC; padding: 2px; margin: 10px 5px 10px 0;}
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://fancybox.net/js/fancybox/jquery.fancybox-1.2.6.css" media="screen" />
    <script type="text/javascript" src="http://fancybox.net/js/fancybox/jquery.fancybox-1.2.6.pack.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("a.zoom").fancybox();
        });
    </script>
</head>
<body>
<?php
 /* Álbum usando API do Picasa... :D v. 0.1
  *
  * Auhor: Felipe Furst
  * email: [email protected]
  */
    $picasaUser = "mobilemechanics"; // usuário do picasa
    /* ----------------- daqui só mexa se souber oq está fazendo ---------------- */
    if(!$_GET["id"]) {
        $tt = file_get_contents("http://picasaweb.google.com/data/feed/api/user/{$picasaUser}"); // busca os álbuns
        $xml = simplexml_load_string($tt);
        echo "<div id="albuns" align="center">";
        for($i = 0; $i < count($xml->{"entry"}); $i++) {
            $gphoto = $xml->{"entry"}[$i]->children("http://schemas.google.com/photos/2007"); // pega os nodos filhos do namespace http://schemas.google.com/photos/2007
            $media = $xml->{"entry"}[$i]->children("http://search.yahoo.com/mrss/"); // semelhante à linha acima
            echo "<a href="".$_SERVER["PHP_SELF"]."?id=".$gphoto->{"id"}.""><img src="".$media->{"group"}->{"thumbnail"}->attributes()->url."" alt="" /></a>";
        }
        echo "</div>";
    }
    else {
        $tt = file_get_contents("http://picasaweb.google.com/data/feed/api/user/{$picasaUser}/albumid/{$id}"); // busca as fotos de um determinado álbum passado por parâmetro
        $xml = simplexml_load_string($tt);
        echo utf8_decode($xml->{"title"})."<br>".utf8_decode($xml->{"subtitle"})."<br>";
        echo "<div id="album" align="center">";
        for($i = 0; $i < count($xml->{"entry"}); $i++) {
            $media = $xml->{"entry"}[$i]->children("http://search.yahoo.com/mrss/"); // esse cara aqui vc já conhece ...
            echo "<a class="zoom" rel="group" title="".utf8_decode($media->{"group"}->{"description"})."" href="".$media->{"group"}->{"content"}->attributes()->url.""><img src="".$media->{"group"}->{"thumbnail"}[1]->attributes()->url."" alt="" /></a>";
        }
        echo "</div>";
    }
?>
</body>

O bom disso tudo é que você organiza tuas fotos em uma aplicação específica para esta função, não consome tempo desenvolvendo, não consome espaço no servidor e mantém a identidade visual do site.

Claro, há o que melhorar, mas o básico tá aí. Até…

Links de APIs e bibliotecas utilizados:
http://code.google.com/intl/pt-BR/apis/picasaweb/overview.html
http://br.php.net/manual/en/book.simplexml.php
http://fancybox.net/
 

Escreva um comentário

Comentário