JavaScript >> Javascript 文檔 >  >> jQuery

一個很酷的 Instagram 重力畫廊

今天我們將製作一些完全是為了好玩的東西——一個“重力”畫廊。這將是一個腳本,它在 Instagram 上運行搜索,獲取並在網格中顯示照片,然後使用 Box2D 庫來模擬它們之間的物理交互。而這一切都在不到 40 行的 JS 代碼中完成!

讓我們看看這是怎麼做到的。

理念

我們將使用兩個 jQuery 插件為我們完成繁重的工作:

  • Spectragram - 這個插件將處理與 Instagram API 的通信(我們只需要給它一個訪問令牌,稍後會詳細介紹)。我們只會用它來搜索最近的照片,但它可以做的更多;
  • jQuery Gravity - 這個插件是開源 Box2D 物理庫的友好包裝器,最初用 C++ 編寫並移植到許多其他語言,包括 JavaScript。

剩下的就是編寫膠水代碼,使它們可以很好地協同工作。

獲取 Instagram 訪問令牌

Instagram 要求對其 API 的每個請求都使用有效的訪問令牌進行簽名。要獲得這樣的令牌,您需要從他們的開發者控制台註冊一個應用程序(說明)。在“網站”和“OAuth redirect_uri”字段中輸入您網站的 URL。我們不會使用這些,但它們是註冊所必需的。當您提交表單時,您將獲得一個client id 和一個客戶端密碼 .將客戶端 ID 複製到某處,因為稍後您將需要它。

您現在可以獲得訪問令牌。別擔心,這一點也不難——只需在瀏覽器中打開一個新標籤頁,然後訪問這個 URL:

https://instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token

將 CLIENT-ID 部分替換為 client id 您在上面複製,並帶有您網站地址的 REDIRECT-URL。這將引導您進入權限屏幕。授權後,您將被重定向到這樣的地址:

http://your-redirect-uri#access_token=27600791.f59def8.2d064937f95f42d6a782f831faaa50f1

恭喜,您現在擁有訪問令牌!我們很快就會使用它。

HTML

HTML 再簡單不過了:

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Instagram "Gravity" Gallery | Tutorialzine Demo</title>

        <!-- CSS Includes -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Cookie" />
        <link rel="stylesheet" href="assets/css/styles.css" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

        <h1>Instagram Gallery</h1>

        <ul id="gallery">
            <!-- The instagram photos will go here as <li> elements -->
        </ul>

        <a href="#" id="gravityButton">Start!</a>

        <!-- JavaScript includes -->
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="assets/js/spectragram.min.js"></script>
        <script src="assets/js/jGravity-min.js"></script>
        <script src="assets/js/script.js"></script>

    </body>
</html>

我們只有一些在頭部鏈接的 CSS 文件(包括來自 Google Web Fonts 的字體),以及在頁腳中的一些 JS 文件(帶有兩個插件的 jQuery,以及我們接下來要編寫的 script.js 文件)。

照片將被插入到 #gallery div 和 #gravityButton 會觸發jQuery Gravity插件。

jQuery 代碼

這是使畫廊工作的代碼:

assets/js/script.js

$(function(){

    // Configure the Spectragram plugin. Follow the instructions
    // in the tutorial on how to generate an access token
    jQuery.fn.spectragram.accessData = {
        accessToken: 'YOUR-ACCESS-TOKEN',
        clientID: 'CLIENT-ID'
    };

    // Run a search about 'coffee' on instagram
    // and display the results
    $('#gallery').spectragram('getRecentTagged',{
        query: 'coffee',
        max:6
    });

    $('#gravityButton').click(function(e){
        e.preventDefault();

        // Turn on the gravity!
        $('body').jGravity({
            target: '#gallery li',
            ignoreClass: 'ignoreMe',
            weight: 25,
            depth: 5,
            drag: true
        });

        // Disable clicking on the photos (so they can
        // be dragged without redirecting the browser)
        $('#gallery li').click(function(e){
            e.preventDefault()
        });

        // Remove some of the elements as they get in the way
        $('footer, #gravityButton').remove();
    });

});

在這個文件的頂部,您需要傳遞您之前獲得的訪問令牌和客戶端 ID,以便頻譜圖插件可以完成它的工作。在此之後,您使用搜索字符串和要返回的最大結果數調用插件。

最後,我們監聽 #gravityButton 上的點擊 並調用 jGravity 插件。防止點擊照片是個好主意,否則如果不在新標籤中打開它們幾乎不可能拖動它們。

有了這個我們很酷的“重力”畫廊就完成了!

完成!

我通常會嘗試在結論中給出我們教程的一些實際用途,但這次根本沒有。不過,這確實是一個有趣的實驗!


Tutorial JavaScript 教程
  1. 使用 ES2020 可選鏈接運算符進行無錯誤的屬性鏈接

  2. JavaScript ES2020 中的可選鏈接圖解

  3. Nuxt 3 第一步.. 所以我是 Nuxt 的忠實粉絲,而且非常……

  4. 使用 Electron 構建基於 React 的應用程序的要點

  5. 有沒有辦法告訴 Chrome 網絡調試器在頁面坐標中顯示當前鼠標位置?

  6. 20 多個 2020 年最佳 React UI 組件庫/框架

  7. 5 分鐘了解 CSS 變量 - 初學者教程

  1. 鼠標點擊觸發鼠標離開

  2. 跳入 React 或 Hooks

  3. 搜索數組,兩種方式

  4. 如何在 Cypress 中訪問 Redux 狀態

  5. 在 Javascript 中調用另一個函數中定義的函數

  6. 將 Contabo 對象存儲與 NodeJS 一起使用

  7. 在 React 中使用 Redux 使 WebSocket 與用戶 Internet 連接同步(第 2 部分)

  1. 優化您的 Web 應用程序以獲得最大的運行時性能和過早的優化🦄

  2. Next.js - 如何充分利用 <Image/> 組件

  3. 如何在 DOM 元素上使用 .forEach?

  4. 對象引用(為什麼是 [this]!==[this])