Cómo crear un carrusel de tus fotos de Flickr en Javascript

A lo largo de este artículo, vamos a desarrollar un plugin para jQuery que nos permitirá crear presentaciones de nuestras imágenes almacenadas en Flickr de una forma más sencilla. El plugin utilizará el API de Flickr, así como YQL para buscar las imágenes, para después enmarcarlas.

Como en todo desarrollo, vamos a empezar con la creación del código HTML, donde se visualizará la presentación de las dispositivas.

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jqFlick - Flickr Micro Slider Plugin | Tutorialzine Demo</title>



<link rel="stylesheet" type="text/css" href="assets/css/styles.css" />

<link rel="stylesheet" type="text/css" href="assets/jqFlick/jqFlick.css" />



</head>

<body>



<div id="page">



       
<h1>Flickr Powered Micro Slider</h1>



       
<div id="flickrSlider"></div>



       
<p class="demos">More demos: <select>

       
<option value="1" selected>Presentation Example</option>

       
<option value="2">Photo Slideshow</option>

       
<option value="3">Product Shots (small)</option>

   
</select></p>



</div>



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

<script src="assets/jqFlick/jqFlick.js"></script>

<script src="assets/js/script.js"></script>



</body>

</html>

En el código anterior, nos fijamos que hacemos uso de la hoja de estilos styles.css, donde le daremos los estilos que nosotros queramos a la página, y del archivo script.js, donde hacemos la llamada al plugin que vamos a crear. También hemos creado un select con varias opciones, que según la que seleccionemos, mostrará una galería u otra.

Otra parte importante del código anterior, corresponde al div que lleva por id “flickrSlider”, ya que será ahí donde se pinte el código correspondiente a la galería de imágenes que traigamos de Flickr. Este código tendrá la siguiente estructura.

<div id="flickrSlider" class="flickrSliderHolder" style="width: 500px; height: 345px;">

       
<span class="caption"></span>

       
<ul style="width: 1000px; height: 320px; left: 0px;">

               
<li style="background-image: url('example.jpg'); width: 500px;"></li>

               
<li style="background-image: url('example2.jpg'); width: 500px;"></li>

       
</ul>

       
<div class="arrows">

               
<a class="previous" href="#"></a>

               
<a class="next" href="#"></a>

       
</div>

</div>

Si nos fijamos, dentro encontramos una lista desordenada con las imágenes, y otro div con los controles para pasar de una imagen a otra. También dispone de un span con id “caption”, donde se pintará el título de cada imagen.

El siguiente paso será darle al plugin sus propios estilos, por lo que crearemos la hoja de estilos jqFlick.css, que sólo afectará al código generado por el plugin, por lo que tenemos que estar seguros de que no afecte al resto de elementos de la página.

.flickrSliderHolder{
        position:relative;
        overflow:hidden;
}

.flickrSliderHolder ul{
        position:absolute;
        height:100%;
        list-style:none;
}

.flickrSliderHolder ul li{
        float:left;
        height:100%;
        background-repeat:no-repeat;
        background-position:center center;
}

.flickrSliderHolder .arrows{
        position:absolute;
        right:0;
        bottom:0;
}

.flickrSliderHolder .arrows a{
        width:22px;
        height:22px;
        float:left;
        background:url('arrows.png') no-repeat top left;
        text-decoration:none;
        outline:none;
        border:none;
}

.flickrSliderHolder a.previous:hover{
        background-position:left bottom;
}

.flickrSliderHolder a.next{
        margin-left:-1px;
        background-position:top right;
}

.flickrSliderHolder a.next:hover{
        background-position:bottom right;
}

.flickrSliderHolder .caption{
        font-size:13px;
        line-height: 22px;
        position:absolute;
        bottom:0;
        left:0;
}

Ahora vamos a empezar con el código correspondiente a jQuery, aunque comenzaremos mostrando la información que nos devuelta el API de Flickr.

{
    "query": {
        "count": 3,
        "created": "2011-02-19T20:11:18Z",
        "lang": "en-US",
        "results": {
            "photo": [{
                "farm": "6",
                "id": "5456788328",
                "isprimary": "1",
                "secret": "e9eddccf8e",
                "server": "5213",
                "title": "The title of the image becomes an optional caption."
            }, {
                "farm": "6",
                "id": "5456179165",
                "isprimary": "0",
                "secret": "28bae85307",
                "server": "5216",
                "title": "There are no limits really."
            }, {
                "farm": "6",
                "id": "5456179233",
                "isprimary": "0",
                "secret": "e05287691f",
                "server": "5018",
                "title": "What more do you need.."
            }]
        }
    }
}

La API nos devuelve información sobre las fotos que vamos a utilizar. De todo lo que nos devuelve, nosotros utilizaremos the farm, id, secret, and server de los objetos que nos devuelva, que serán utilizado en la url para mostrar la imagen, mientras que el title lo utilizaremos en el caption.

Para encontrar las fotos de Flickr, la url que podemos utilizar es la siguiente.

http://farm{FARM}.static.flickr.com/{SERVER}/{ID}_{SECRET}.jpg

Ahora que sabemos como funciona la creación de las urls de Flickr, vamos a ponernos manos a la obra para crear nuestro plugin.

(function($){
        $.fn.jqFlick = function(options){
                // Default options:
                options = $.extend({
                        width:500,
                        height:500,
                        maxFetch:50,
                        captions:false,
                        autoAdvance:false,
                        advancePeriod:5000
                },options);

                // Using YQL and the flickr.photosets.photos table to query the Flickr API.
                var YQL = 'http://query.yahooapis.com/v1/public/yql?q={QUERY}&format=json&callback=?',
                        query = "SELECT * FROM flickr.photosets.photos({MAX}) WHERE photoset_id='{PHOTOSET}'";

                // Replacing the "{EXAMPLE}" keywords from the strings:

                YQL = templateReplace(YQL,{
                        "query": encodeURIComponent(
                                templateReplace(query,{
                                        photoset : options.photosetID,
                                        max     : options.maxFetch
                                }
                        ))
                });

                // Template for building Flickr's image URLs:

                var flickrSRC = 'http://farm{FARM}.static.flickr.com/{SERVER}/{ID}_{SECRET}.jpg',

                        flickrSlider = this;

                flickrSlider.trigger('jqFlickRemove');

                // Fetching the images using Flickr's API:

                $.getJSON(YQL,function(r){

                        if(!r || !r.query || !r.query.count){

                                throw "There is no such photoset!";

                        }

                        var currentPos = 1,

                                cnt = r.query.count;

                        var caption = $('',{

                                className: 'caption'

                        }).appendTo(flickrSlider);

                        var ul = $('

jqFlick coge un objeto de opciones como su único parámetro. Necesitamos especificar el id del phoset que vamos a utilizar, pero esto lo podemos obtener de forma sencilla en la dirección pública que se muestra en el navegador que utilicemos para ver las imágenes.

El siguiente paso consiste en hacer la llamada al plugin desde el fichero script.js

$(document).ready(function(){



        // Creating a flickr slider. This is

        // how you would probably use the plugin.



        $('#flickrSlider').jqFlick({

                photosetID: '72157625956932639',

                width:500,

                height:320,

                autoAdvance:true

        });



        // Creating different flickr sliders,

        // depending on the select element value.



        $('select').change(function(){



                var options = {};



                switch(this.value){

                        case '1':

                                options = {

                                        photosetID: '72157625956932639',

                                        width:500,

                                        height:320,

                                        captions:true,

                                        autoAdvance:true

                                };

                                break;

                        case '2':

                                options = {

                                        photosetID:'42296',

                                        width:500,

                                        height:500,

                                        captions:true,

                                        autoAdvance:true

                                };

                                break;

                        case '3':

                                options = {

                                        photosetID:'72157625961099915',

                                        width:200,

                                        height:150

                                }

                }



                $('#flickrSlider').jqFlick(options);

        });



});

En este código, podemos ver que estamos escuchando el evento del Select, ya que dependiendo de la opción seleccionada, nos mostrará una cosa u otra, dependiendo de las opciones que se le pase al plugin desarrollado.

Pueden ver un ejemplo en este enlace.

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP