Hacer una presentación de diapositivas con Flickr

Hoy desarrollaremos un complemento jQuery que facilitará la creación de presentaciones de diapositivas, guías de productos o presentaciones a partir de sus conjuntos de fotos de Flickr. El complemento utilizará las API de Flickr y YQL para obtener las fotos en los conjuntos, después de lo cual creará el marcado de la presentación de diapositivas y escuchará los eventos.

El HTML

Antes de comenzar con jqFlick (el nombre de nuestro complemento), para no establecer primero la estructura HTML del documento subyacente. Incluyo la hoja de estilo CSS del complemento - jqFlick.css , que crearemos en el siguiente paso, y el archivo js del complemento:jqFlick.js .

index.html

<!DOCTYPE html>
<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>

Además, tenemos styles.css , que aplica estilo a la página en sí, y script.js, que llama al complemento. Además, tenemos un elemento de selección con demostraciones de tres configuraciones diferentes del complemento. Volveremos a esto en un momento.

El otro elemento importante en el fragmento anterior es el #flickrSlider div, que se completará con el HTML del control deslizante mediante jqFlick complemento:

Código generado

<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>

El #flickrSlider a div se le asigna un nombre de clase - .flickrSliderHolder , un ancho y una altura. En su interior tenemos una lista desordenada con las diapositivas, un contenedor de div de flecha con flechas anterior y siguiente, y un lapso para los subtítulos. La lista desordenada está configurada para que sea lo suficientemente amplia como para acomodar los LI uno al lado del otro. La animación de la diapositiva se logra animando la propiedad izquierda de la UL.

El CSS

Necesitamos proporcionar el complemento con su propia hoja de estilo, para que sea más fácil de incluir en un sitio web. Esta hoja de estilo solo debe afectar el marcado generado por el complemento, y debemos asegurarnos de que no dañe ningún otro elemento de la página. Para lograr esto, vamos a anteponer los estilos con .flickrSliderHolder nombre de clase, asignado al titular de la presentación de diapositivas por el complemento.

jqFlick.css

.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;
}

Una vez llamado, jqFlick asigna el .flickrSliderHolder class al div del soporte del control deslizante y genera el marcado que vimos en el paso anterior. El código anterior diseña las flechas, el título, la lista desordenada y el contenedor.

El código jQuery

Comenzando con la sección jQuery, primero veamos cómo se ve una respuesta de la API de Flickr:

Respuesta YQL de muestra

{
    "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.."
            }]
        }
    }
}

Aquí he seleccionado las fotos que están contenidas en este conjunto de fotos. La respuesta contiene información útil sobre las imágenes. Vamos a usar las propiedades de granja, id, secreto y servidor de estos objetos para armar la URL en la que se encuentran las fotos, mientras que las propiedades de título se usarán como subtítulos.

Puede encontrar sus fotos en la siguiente dirección, reemplazando las palabras clave con los valores de los objetos:

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

En nuestro complemento, usaremos el método API de Flickr para enumerar fotos en un conjunto de fotos. Sin embargo, para comunicarnos con las API de Flickr, necesitaremos registrarnos para obtener una clave de API.

Registro de clave API

Este paso es en realidad bastante simple. Debe tener un registro válido de Flickr y visitar esta página. Después de elegir el tipo de registro (no comercial en nuestro caso), completa los detalles de la solicitud. Ahora obtiene su clave API, que necesitará en un segundo.

Ahora estamos listos para escribir el código jQuery. Como sabe, encapsular la funcionalidad jQuery en un complemento tiene muchos beneficios, como puede leer en nuestro tutorial del complemento jQuery. Veamos cómo se ve jqFlick.js, el archivo del complemento principal:

jqFlick.js

(function($){

    $.fn.jqFlick = function(options){

        // Default options:

        options = $.extend({
            width:500,
            height:500,
            maxFetch:50,
            captions:false,
            autoAdvance:false,
            advancePeriod:5000,
            apiKey:''
        },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}'"+
                " AND api_key='{KEY}'";

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

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

        // 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 = $('<span>',{
                className: 'caption'
            }).appendTo(flickrSlider);

            var ul = $('<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:

                $('<li>',{
                    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 = $('<div>',{
                className: 'arrows'
            });

            // Creating the previous / next arrows, and
            // binding event listeners for the click events:

            var arrowPrev = $('<a>',{
                className: 'previous',
                href: '#',
                click : function(){
                    var toShow = currentPos - 1;
                    if(toShow < 1){
                        toShow = cnt;
                    }

                    flickrSlider.trigger('slide',[toShow]);
                    return false;
                }
            }).appendTo(arrows);

            var arrowNext = $('<a>',{
                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:
                // https://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 toma un objeto de opciones como su único parámetro. Debe especificar el ID del conjunto de fotos (el ID del conjunto de fotos property), que puede copiar fácilmente desde la barra de direcciones de su navegador web mientras ve el conjunto de fotos. El jqFlick solo puede mostrar conjuntos de fotos públicos. .

Ahora veamos cómo se llama el complemento. En la parte superior de este archivo, deberá pegar la clave API de Flickr que generamos anteriormente:

js/script.js

$(document).ready(function(){

    // Paste your Flickr API key here
    var apiKey = '';

    // Creating a flickr slider. This is
    // how you would probably use the plugin.

    $('#flickrSlider').jqFlick({
        photosetID: '72157625956932639',
        width:500,
        height:320,
        autoAdvance:true,
        apiKey:apiKey
    });

    // 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,
                    apiKey:apiKey
                };
                break;
            case '2':
                options = {
                    photosetID:'42296',
                    width:500,
                    height:500,
                    captions:true,
                    autoAdvance:true,
                    apiKey:apiKey
                };
                break;
            case '3':
                options = {
                    photosetID:'72157625961099915',
                    width:200,
                    height:150,
                    apiKey:apiKey
                }
        }

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

});

En la declaración de cambio anterior, estoy escuchando el evento de cambio del menú desplegable de selección. Allí, dependiendo del valor de la selección, asigno diferentes objetos de opciones, que luego se pasan al complemento. Esto demuestra las diferentes opciones que están disponibles sin ocupar mucho espacio en la pantalla.

¡Con esto, nuestra presentación de diapositivas con tecnología de Flickr está completa!

Conclusión

Puede usar este complemento para crear presentaciones de diapositivas, guías de productos o presentaciones. Para usar el complemento, solo necesita colocar la carpeta jqFlickr en la raíz de su sitio web e incluir jqFlick.css y jqFlick.js en sus documentos HTML.

Hacer una presentación de diapositivas con Flickr

El HTML

index.html

Código generado

El CSS

jqFlick.css

El código jQuery

Respuesta YQL de muestra

Registro de clave API

jqFlick.js

js/script.js

Conclusión

Función Sugerir aplicación con PHP, MySQL y jQuery

Polyfilling HTML5 y CSS3 con Modernizr

¿Cómo crear una aplicación PWA con HTML, CSS y VanillaJS?

¡Barras de progreso CSS!

Detectar AdBlock usando HTML CSS y JavaScript

Sexismo, racismo, positividad tóxica y TailwindCSS