JavaScript >> Javascript 文檔 >  >> Tags >> CSS

製作 Flickr 驅動的幻燈片

今天我們將開發一個 jQuery 插件,它可以讓您輕鬆地從您的 Flickr 照片集中創建幻燈片、產品指南或演示文稿。該插件將使用 Flickr 的 API 和 YQL 來獲取集合中的照片,之後它將創建幻燈片的標記並監聽事件。

HTML

在開始 jqFlick 之前 (我們插件的名稱),以免首先確定底層文檔的 HTML 結構。我包括插件的 CSS 樣式表 - jqFlick.css ,我們將在下一步中創建它,以及插件的 js 文件 - 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>

此外,我們還有 styles.css ,用於設置頁面本身的樣式,以及調用插件的 script.js。此外,我們還有一個 select 元素,其中包含插件的三種不同配置的演示。我們稍後會回到這個話題。

上面片段中的另一個重要元素是 #flickrSlider div,將由 jqFlick 填充滑塊的 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>

#flickrSlider div 被分配了一個類名 - .flickrSliderHolder ,寬度和高度。在其中,我們有一個帶有幻燈片的無序列表,一個帶有上一個和下一個箭頭的箭頭 div 持有者,以及一個標題的跨度。無序列表設置得足夠寬,可以並排容納 LI。滑動動畫是通過動畫UL的left屬性來實現的。

CSS

我們需要為插件提供自己的樣式表,這樣更容易包含到網站中。這個樣式表必須只影響插件生成的標記,我們必須確保它不會破壞頁面上的任何其他元素。為此,我們將在樣式前加上 .flickrSliderHolder 類名,由插件分配給幻燈片夾。

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

一旦調用,jqFlick 分配 .flickrSliderHolder 類到滑塊支架 div,並生成我們在上一步中看到的標記。上面的代碼設置了箭頭、標題、無序列表和容器的樣式。

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

在這裡,我選擇了此照片集中包含的照片。響應包含有關圖像的有用信息。我們將使用這些對象的 farm、id、secret 和 server 屬性來組合照片所在的 URL,而 title 屬性將用作標題。

您可以在以下地址找到您的照片,將關鍵字替換為對象的值:

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

在我們的插件中,我們將使用 Flickr 的 API 方法來列出照片集中的照片。但是,要與 Flickr 的 API 通信,我們需要註冊一個 API 密鑰。

API 密鑰註冊

這一步其實很簡單。您需要進行有效的 Flickr 註冊並訪問此頁面。在您選擇註冊類型(在我們的案例中為非商業)後,您填寫申請詳細信息。您現在可以獲得 API 密鑰,稍後您將需要它。

現在我們準備好編寫 jQuery 代碼了。如您所知,在插件中封裝 jQuery 功能有很多好處,您可以閱讀我們的 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,
            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 將選項對像作為其唯一參數。您需要指定照片集的 ID(photosetID 屬性),您可以在查看照片集時輕鬆地從 Web 瀏覽器的地址欄中復制。 jqFlick 只能顯示公共照片集 .

現在讓我們看看插件是如何被調用的。在此文件的頂部,您需要粘貼我們在上面生成的 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);
    });

});

在上面的 switch 語句中,我正在監聽 select 下拉菜單的 change 事件。在那裡,根據選擇的值,我分配不同的選項對象,然後將其傳遞給插件。這演示了在不佔用太多屏幕空間的情況下可用的不同選項。

這樣,我們的 Flickr 驅動的幻燈片就完成了!

結論

您可以使用此插件製作幻燈片、產品指南或演示文稿。要使用該插件,您只需將 jqFlickr 文件夾拖放到您的網站根目錄,並在您的 HTML 文檔中包含 jqFlick.css 和 jqFlick.js。


Tutorial JavaScript 教程
  1. Javascript:如何劫持輸入類型=點擊行為提交?

  2. React Native 內存分析(JSC vs V8 vs Hermes)

  3. Javascript 刪除所有出現的重複元素,只留下唯一的一個

  4. 如何在 React 中添加熱鍵

  5. 類中的 JavaScript 靜態函數 |示例代碼

  6. 獲取調用函數的元素的 ID

  7. jQuery 檢查窗口是否在 iFrame 中

  1. 使用javascript更改圖像不透明度

  2. 將 JSON 對象轉換為另一個 – 格式化

  3. React 如何在幕後工作

  4. 如何在 Python 中解碼轉義的 unicode javascript 代碼?

  5. 在服務器上顯示驗證錯誤 - Asp Core Web API + Axios + React Hook Form

  6. 開始使用 NodeJS

  7. 為您的 KendoReact 應用程序添加暗模式

  1. 成為高效程序員應該加入的 10 大殺手論壇

  2. 使用基於哈希的內容緩存來提升你的 React 應用程序的用戶體驗。

  3. 如何在您的 React 應用程序中實現 Google 身份驗證!

  4. 原子 CSS-in-JS