ساخت اسلایدشو Flickr

ساخت اسلایدشو Flickr

در این آموزش ما به شما نحوه ساخت اسلایدشو Flickr رو میدیم.این اسلایدشو با این که ظاهری بسیار ساده دارد ولی بسیار کاربردی بوده و میتواند نمای زیبایی به وبسایت شما بدهد.

برای مشاهده لینک وارد شود

مثل همیشه ما کار را با نوشتن کد های پایه ای HTML آغاز می کنیم.ما در کد زیر فایل های CSS و جاوااسکریپت را که در ادامه انها را خواهیم نوشت وارد کردم.

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>

بخش مهمی که در بالا است تگ flickrslider# است که در زیر کامل آن را مشاهده می کنید

Generated Code

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

به تگ flickrslider# کلاسی با نام flickrsliderHolder اختصاص داده شده است که ارتفاع و عرض و فلش ها را نگه می دارد.

CSS

خوب حالا ما کد های 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;
}

jQuery

کد های jQuery را شروع می کنیم.ابتدا به ما اجازه بدبد تا نحوه دریافت پاسخ از Flickr API را ببینیم

Sample YQL Response

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

خوب شما در ضمن میتونید تصاویر را با جایگزین کردن keyword هایشان در ادرس زیر پیدا کنید

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

خوب اکنون کد های اصلی را مینویسیم.در زیر بخش اصلی کدمان را مشاهده می کنید

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:
                // 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);

و در آخر  نحوه فراخوانی پلاگین را مینویسیم.در بالای فایل شما باید کلید اصلی Flickr API را وارد کنید:

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

});

پایان

+2
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


پنج × = 5

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>