如何将Instagram图片整合到滑块中？

Question

我使用sliderPro 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 init代码如下所示：

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

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

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

Answer 1

您应该使用Instagram API为该用户帐户请求媒体数据。 您将在JSON中获得响应，您可以轻松解析该响应以提取滑块的图像URL。

如果您使用有效<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='container'> <div class='full'> <input type='number' value=''> <select name='select1' class='select'> <option value='a1'>A1</option> <option value='a2'>A2</option> </select> </div> <div class='full'> <input type='number' value=''> <select name='select2' class='select'> <option value='a1'>A1</option> <option value='a2'>A2</option> </select> </div> <div class='full'> <input type='number' value=''> <select name='select3' class='select'> <option value='a1'>A1</option> <option value='a2'>A2</option> </select> </div> <div class='total' id="total"> </div> </div>和<?php if(isset($_POST['submitForm']) && $_POST['submitForm'] == 1){ //form is submitted by button, proceed with DB stuffs echo 'Great, you have submitted the form, will check VALUES and do INSERT.'; } ?> <body> <form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>" name="aForm"> <input type="hidden" name="submitForm" id="submitForm"> <select name="category" onchange="this.form.submit();"> <option value="">Choose...</option> <option value="1" <?=($_POST['category']==1 && !$_POST['submitForm'])?'selected':'';?>>Cat 1</option> <option value="2" <?=($_POST['category']==2 && !$_POST['submitForm'])?'selected':'';?>>Cat 2</option> <option value="3" <?=($_POST['category']==3 && !$_POST['submitForm'])?'selected':'';?>>Cat 3</option> </select> <select name="element"> <?php if($_POST['category'] && !$_POST['submitForm']){ // SELECT from DB based on passed category ID echo '<option value="">Now choose element...</option>'; echo '<option value="1">Elem 1</option>'; echo '<option value="2">Elem 2</option>'; echo '<option value="3">Elem 3</option>'; }else{ echo '<option value="">Choose category first...</option>'; } ?> </select> <input type="button" name="btnSubmit" value="Submit" onclick="document.getElementById('submitForm').value = 1; this.form.submit();"> </form> </body> 向端点执行GET，则会返回用户在JSON中的最新媒体。 More here

USER-ID

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

如果您在下面的网址上执行ACCESS-TOKEN，则会返回有关JSON中该https://api.instagram.com/v1/users/USER-ID/media/recent/?access_token=ACCESS-TOKEN 帐户的媒体数据。更多Embedding For Developers

GET

其他选项包括使用javascript或jquery插件为您处理大部分内容，但我确定如果您需要，可以使用Google搜索。