javascript - 如何将 Instagram 图片整合到 slider 中？

Question

我正在使用 sliderPro Slider 制作 slider ，与 this examples page 中的完全一样，因此 HTML 代码如下所示:

<div id="example2" class="slider-pro">
  <div class="sp-slides">
    <div class="sp-slide">
      <a href="http://bqworks.com/slider-pro/images/image1_large.jpg">
        <img class="sp-image" src="../src/css/images/blank.gif" data-src="http://bqworks.com/slider-pro/images/image1_medium.jpg" data-retina="http://bqworks.com/slider-pro/images/image1_large.jpg" />
      </a>
      <p class="sp-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>

    <div class="sp-slide">
      <a href="http://bqworks.com/slider-pro/images/image2_large.jpg">
        <img class="sp-image" src="../src/css/images/blank.gif" data-src="http://bqworks.com/slider-pro/images/image2_medium.jpg" data-retina="http://bqworks.com/slider-pro/images/image2_large.jpg" />
      </a>
      <p class="sp-caption">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>

    <div class="sp-slide">
      <a href="http://bqworks.com/slider-pro/images/image3_large.jpg">
        <img class="sp-image" src="../src/css/images/blank.gif" data-src="http://bqworks.com/slider-pro/images/image3_medium.jpg" data-retina="http://bqworks.com/slider-pro/images/image3_large.jpg" />
      </a>
      <p class="sp-caption">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
    </div>

    <div class="sp-slide">
      <a href="http://bqworks.com/slider-pro/images/image4_large.jpg">
        <img class="sp-image" src="../src/css/images/blank.gif" data-src="http://bqworks.com/slider-pro/images/image4_medium.jpg" data-retina="http://bqworks.com/slider-pro/images/image4_large.jpg" />
      </a>
      <p class="sp-caption">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>

    <div class="sp-slide">
      <a href="http://bqworks.com/slider-pro/images/image5_large.jpg">
        <img class="sp-image" src="../src/css/images/blank.gif" data-src="http://bqworks.com/slider-pro/images/image5_medium.jpg" data-retina="http://bqworks.com/slider-pro/images/image5_large.jpg" />
      </a>
      <p class="sp-caption">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div class="sp-slide">
      <a href="http://bqworks.com/slider-pro/images/image6_large.jpg">
        <img class="sp-image" src="../src/css/images/blank.gif" data-src="http://bqworks.com/slider-pro/images/image6_medium.jpg" data-retina="http://bqworks.com/slider-pro/images/image6_large.jpg" />
      </a>
      <p class="sp-caption">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>

    <div class="sp-slide">
      <a href="http://bqworks.com/slider-pro/images/image7_large.jpg">
        <img class="sp-image" src="../src/css/images/blank.gif" data-src="http://bqworks.com/slider-pro/images/image7_medium.jpg" data-retina="http://bqworks.com/slider-pro/images/image7_large.jpg" />
      </a>
      <p class="sp-caption">Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>

    <div class="sp-slide">
      <a href="http://bqworks.com/slider-pro/images/image8_large.jpg">
        <img class="sp-image" src="../src/css/images/blank.gif" data-src="http://bqworks.com/slider-pro/images/image8_medium.jpg" data-retina="http://bqworks.com/slider-pro/images/image8_large.jpg" />
      </a>
      <p class="sp-caption">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni.</p>
    </div>

    <div class="sp-slide">
      <a href="http://bqworks.com/slider-pro/images/image9_large.jpg">
        <img class="sp-image" src="../src/css/images/blank.gif" data-src="http://bqworks.com/slider-pro/images/image9_medium.jpg" data-retina="http://bqworks.com/slider-pro/images/image9_large.jpg" />
      </a>
      <p class="sp-caption">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
    </div>

    <div class="sp-slide">
      <a href="http://bqworks.com/slider-pro/images/image10_large.jpg">
        <img class="sp-image" src="../src/css/images/blank.gif" data-src="http://bqworks.com/slider-pro/images/image10_medium.jpg" data-retina="http://bqworks.com/slider-pro/images/image10_large.jpg" />
      </a>
      <p class="sp-caption">Sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
    </div>
  </div>
</div>

jQuery 初始化代码如下:

$( document ).ready(function( $ ) {

       $( '#example2' ).sliderPro({
            width: '20%',
            height: 500,
            aspectRatio: 1.5,
            visibleSize: '100%',
            forceSize: 'fullWidth'
        });

现在我得到了 this link并被告知该页面中的图像应该显示在幻灯片中，而不是我现在正在使用的图像。那是一个 Instagram 帐户，那么如何将 Instagram 集成到我的 slider 中？

Answer 1

你应该使用 Instagram API请求该用户帐户的媒体数据。 您将收到 JSON 格式的响应，您可以轻松解析该响应以提取 slider 的图像 URL。

如果您使用有效的USER-ID 和ACCESS-TOKEN 对下面的端点执行GET，它将返回用户最近的JSON 中的媒体。 More here

https://api.instagram.com/v1/users/USER-ID/media/recent/?access_token=ACCESS-TOKEN

另一种方法是使用嵌入端点。

如果您对如下所示的 url 执行 GET，它将以 JSON 格式返回有关该 USER-ID 帐户的媒体数据。更多信息 Embedding For Developers

https://www.instagram.com/USER-ID/media/

其他选项包括使用 javascript 或 jquery 插件来为您处理大部分这些东西，但我相信如果您需要的话，您会用 google 搜索它。