Question

我正在建立一个新网站，该网站的一部分是集成的Instagram供稿，由instafeed提取。默认情况下，提要从我的IG帐户中提取所有图像，仅限于4张图像，并具有“加载更多”按钮。多亏了弹出框，所有图片均在灯箱中打开。

我想在IG feed画廊的顶部有几个链接，这些链接应充当过滤器。例如，在画廊的顶部，有显示所有类别1，类别2和类别3的链接。当单击category3链接时，仅显示带有标签＃category3的图像，单击category2仅显示带有标签＃category2的图像，依此类推。

可以做到吗？在文档或其他任何地方都没有找到关于此的任何信息。

这是我的index.php的代码

<!-- GALLERY -->
    <section class="module">

        <div class="container">

            <!-- PORTFOLIO CONTENT -->
            <div class="row multi-columns-row">

                <!-- FILTER -->
                <div class="row">

                    <div class="col-sm-12">
                        <ul id="filters" class="filters font-alt">
                            <li><a href="#" data-filter="*" class="current">All</a></li>
                            <li><a href="#" data-filter=".cat1">Category 1</a></li>
                            <li><a href="#" data-filter=".cat2">Category 2</a></li>
                            <li><a href="#" data-filter=".cat3">Category 3</a></li>
                            <li><a href="#" data-filter=".cat4">Category 4</a></li>
                        </ul>
                    </div>

                </div>
                <!-- /FILTER -->

                <!-- INSTAFEED -->
                <div class="container">
                    <div class="row gallery" id="instafeed"></div>
                </div>
                <!-- /INSTAFEED -->

            </div>
            <!-- /PORTFOLIO CONTENT -->

            <!-- SHOW MORE -->
            <div class="row m-t-70 text-center wow fadeInUp">
                <div class="col-sm-12">
                    <button id="show-more" class="btn btn-block btn-lg btn-g show-more">more</button>
                </div>
            </div>
            <!-- /SHOW MORE -->

        </div>

    </section>
    <!-- /GALLERY -->

... 以及我正在使用的各个js：

<script src="<?php echo $baseDIR ?>/assets/js/instafeed.min.js"></script>


<script type="text/javascript">
  var userFeed = new Instafeed({
      get: 'user',
      userId: 'wwwwwwwwww',
      accessToken: 'wwwwwwwwww.xxxxxxx.yyyyyyyyyyyyyyyyyyyyyyyyyyyyyy',
      limit: '4',
      sortBy: 'most-recent',
      resolution: 'standard_resolution',
      orientation: 'square',
      template: '<div class="instaimg col-xs-12 col-sm-12 col-md-6 col-lg-3"><a href="{{image}}" title="{{caption}}" id={{id}}><img src="{{image}}" alt="{{caption}}" class="img-fluid" /></a></div>',
  });
  userFeed.run();

  var btnInstafeedLoad = document.getElementById("show-more");
  btnInstafeedLoad.addEventListener("click", function() {
    userFeed.next()
  });
  </script>

  <script type="text/javascript">
    $('.gallery').each(function() { // the containers for all your galleries
    $(this).magnificPopup({
      delegate: 'a', // the selector for gallery item
      type: 'image',
      gallery: {
        enabled:true
        }
      });
  });
  </script>

我正在考虑对每个类别使用div，并运行供稿的多个实例。每个文档包含一个提要/实例。必须有一种更简单的方法来做到这一点。

instafeed.js和使用主题标签的动态过滤

0 个答案: