Wie integriere ich Instagram-Bilder in den Slider?

Question

I sliderPro Slider bin mit einem Schieber zu machen, genau wie bei dir exaples Seite HERE, so dass der HTML-Code wie unten aussieht:

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

Und die init-Code jQuery ist wie folgt:

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

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

Nun war ich mit dem folgenden Link, HERE und mir wurde gesagt, dass die Bilder von dieser Seite auf der Folie angezeigt werden sollten und nicht die Bilder, die ich gerade benutze. Das ist ein Instagram Account, also wie integriere ich Instagram in meinen Slider?

Answer 1

Sie sollten die Instagram API verwenden, um Mediendaten für dieses Benutzerkonto anzufordern. Sie erhalten eine Antwort in JSON, die Sie leicht analysieren können, um die Bild-URLs für Ihren Slider zu extrahieren.

Wenn Sie eine GET für den Endpunkt mit einem gültigen USER-ID und ACCESS-TOKEN durchführen, wird das letzte Medium des Benutzers in JSON zurückgegeben. More here

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

Eine andere Möglichkeit ist es, den embed Endpunkt zu verwenden.

Wenn Sie eine GET auf einer URL wie unten durchführen, wird es Mediendaten über dieses USER-ID Konto in JSON zurückgeben. Mehr hier Embedding For Developers

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

Weitere Optionen sind mit einem Javascript oder jQuery-Plugin, das für Sie die meisten dieser Sachen behandelt, aber ich bin sicher, Sie haben es googeln würde, wenn du das nötig.