Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

Jquery → Создание слайд-шоу с Flickr

Создание слайд-шоу с Flickr


Демо: смотреть
Скачать: jqflick.zip [24,39 Kb] (cкачиваний: 122)


Сегодня мы будем развивать JQuery плагин, который позволит легко создавать слайд-шоу, руководства по продуктам и презентаций из ваших фотографий в Flickr. Плагин будет использовать API для Flickr и YQL чтобы доставить фото в наборы, после чего оно будет создать разметку слайд-шоу.

HTML
В начале создадим общий макет, подключим все стили и js скрипты, а так же jQuery библиотеку и плагины.

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


Далее код который потом будет заполнен слайдером.
<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>


Наше слайд-шоу будет выглядеть вот так:
Создание слайд-шоу с Flickr


CSS

Мы должны обеспечить работу плагина с его собственным стилем, так что легче его включить в сайт. Эта таблица стилей должна влиять только на разметку.

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


Создание слайд-шоу с Flickr


JQuery
Начиная с JQuery, мы смотрим, что первый ответ от Flickr API выглядит следующим образом:

Пример YQL ответа
{
    "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.."
            }]
        }
    }
}


Вы можете найти фотографии по адресу, заменив слова со значениями объектов:
http://farm{FARM}.static.flickr.com/{SERVER}/{ID}_{SECRET}.jpg


Теперь мы готовы к написанию JQuery кода.
Давайте посмотрим, на jqFlick.js, основной файл плагина, выглядит следующим образом:

jqFlick.js
(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 = $('<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:
                // 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.

Теперь наш скрипт.

JS / 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);
    });

});


Заключение

Вы можете использовать этот плагин для создания слайд-шоу, руководства по продуктам или презентаций.

Демо: смотреть
Скачать: jqflick.zip [24,39 Kb] (cкачиваний: 122)
Опубликовал dimas_ua, 8-05-2011, 00:00 Комментариев: 0
 (голосов: 1)