如何將instagram圖片整合到滑塊中？

Question

我使用sliderPro滑塊，使滑塊，它完全等同於你exaples頁HERE，所以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的初始化代碼是象下面這樣：

$（文件）。就緒（函數（$）{

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

現在，我得到了下面的鏈接，HERE，並被告知該頁面的圖像應顯示在幻燈片中，而不是我現在使用的圖像。這是一個instagram帳戶，那麼我如何將instagram集成到我的滑塊中？

Answer 1

您應該使用Instagram API來請求該用戶帳戶的媒體數據。 您將在JSON中獲得響應，您可以輕鬆地解析該響應以提取滑塊的圖像URL。

如果您使用有效的USER-ID和ACCESS-TOKEN對下面的端點執行GET，它將以JSON形式返回用戶最近的媒體。 More here

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

另一種方法是使用嵌入式端點。

如果您對像下面這樣的網址執行GET，它將以JSON形式返回有關該賬號的媒體數據USER-ID。這裏更多Embedding For Developers

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

其他選項包括使用JavaScript或jQuery插件，處理大部分的這些東西給你，但我敢肯定，你會用Google搜索它，如果你需要的。