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 = $('
- ',{ css:{ width: options.width*r.query.count, height:options.height } }); // Looping through the photo results: $.each(r.query.results.photo,function(){ data = this; // Creating a new LI element with the photo as its // centered background image: $('
- ',{ css : { backgroundImage: 'url('+templateReplace(flickrSRC,data)+')', width: options.width } }).appendTo(ul); }); flickrSlider.addClass('flickrSliderHolder') .width(options.width) .height(options.height+25) .append(ul); // Binding a custom "slide" event. // You can then flickrSlider.trigger("slide",2) // to go to the second slide: flickrSlider.bind('slide',function(e,slide){ if(slide < 1 || slide > cnt || ul.is(':animated')){ return false; } ul.animate({ left:-(slide-1)*options.width },{ easing: 'easeInOutCirc', duration: 300 }); if(options.captions){ // Animating the transition between // the captions (if enabled): caption.fadeOut(150,function(){ caption.html(r.query.results.photo[slide-1].title); }).fadeIn(150); } currentPos = slide; }); var arrows = $('
',{ className: 'arrows' }); // Creating the previous / next arrows, and // binding event listeners for the click events: var arrowPrev = $('',{ className: 'previous', href: '#', click : function(){ var toShow = currentPos - 1; if(toShow < 1){ toShow = cnt; } flickrSlider.trigger('slide',[toShow]); return false; } }).appendTo(arrows); var arrowNext = $('',{ className: 'next', href: '#', click : function(){ var toShow = currentPos + 1; if(toShow > cnt){ toShow = 1; } flickrSlider.trigger('slide',[toShow]); return false; } }).appendTo(arrows); arrows.appendTo(flickrSlider); // Showing the first slide by default: flickrSlider.trigger('slide',[1]); if(options.autoAdvance){ // If auto advance is enabled, listen for // the load event and schedule a periodic slide change. // // Read more here: // http://tutorialzine.com/2011/01/how-to-make-auto-advancing-slideshows/ $(window).load(function(){ $.fn.jqFlick.timeOut = null; arrowPrev.add(arrowNext).click(function(e,simulated){ if(!simulated){ clearTimeout($.fn.jqFlick.timeOut); } }); (function autoAdvance(){ if($.fn.jqFlick.timeOut){ arrowNext.trigger('click',[true]); } $.fn.jqFlick.timeOut = setTimeout(autoAdvance,options.advancePeriod); })(); }); } }); // This custom event removes all event listeners, // and empties the slider holder: flickrSlider.bind('jqFlickRemove',function(){ if($.fn.jqFlick.timeOut){ clearTimeout($.fn.jqFlick.timeOut); } flickrSlider.empty().unbind('jqFlickRemove slide'); }); return flickrSlider; }; // Helper function for replacing "{KEYWORD}" with // the respectful values of an object: function templateReplace(template,data){ return template.replace(/{([^}]+)}/g,function(match,group){ return data[group.toLowerCase()]; }); } // A custom easing functon. For more info visit: // http://gsgd.co.uk/sandbox/jquery/easing/ $.easing.easeInOutCirc = function (x, t, b, c, d) { if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; }; })(jQuery);
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.