1

我发帖是因为我在尝试开发的一个脚本时遇到了问题。

我要创建的是一个从 Instagram 接收图像的画廊。为了完成这两项任务，我找到了两个适合我需要的插件，但我无法将它们融合在一起。

我对 Jquery 比较陌生，我不明白为什么我尝试运行的脚本只影响代码的一部分。

这个示例库有两个基本部分：

1）由开发者预加载：

<div class="content-primary"> 
    <ul class="iGallery" id="iGallery">

    <li>
  <a href="http://scontent-b.cdninstagram.com/hphotos-xfa1/t51.2885-15/10817900_1528499780732950_533530016_n.jpg">
    <img src="http://scontent-b.cdninstagram.com/hphotos-xfa1/t51.2885-15/10817900_1528499780732950_533530016_s.jpg">
 <li><a class="ui-link" href="http://scontent-b.cdninstagram.com/hphotos-xfa1/t51.2885-15/10831784_752863841449953_2058216615_n.jpg"><img src="http://scontent-b.cdninstagram.com/hphotos-xfa1/t51.2885-15/10831784_752863841449953_2058216615_s.jpg"></a></li></ul>
  </a>
</li>
</ul>

并且，由于 instagram api 而动态添加的那些：

<script type="text/javascript">

    (function() {
      var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
      s.type = 'text/javascript';
      s.async = true;
      s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
      t.parentNode.insertBefore(s, t);
    })();
  /* ]]> */
    function createPhotoElement(photo) {
      var innerHtml;
        innerHtml= $('<img>')
        .attr('src', photo.images.thumbnail.url);

       innerHtml = $('<a>')
      .attr('href', photo.images.standard_resolution.url)
      .append(innerHtml)
      .append(innerHtml)
       .addClass( "ui-link" );


      return $('<li>')
        .append(innerHtml);
    }

    function didLoadInstagram(event, response) {
      var that = this;

      $.each(response.data, function(i, photo) {
        $(that).append(createPhotoElement(photo));
      });
    }

    $(document).ready(function() {
      var clientId = 'baee48560b984845974f6b85a07bf7d9';

      $('.iGallery').on('didLoadInstagram', didLoadInstagram);
      $('.iGallery').instagram({
        hash: 'usa123',
        count: 1,
        clientId: clientId
      });

    });
  </script>

嗯，主要问题是处理画廊的部分似乎只读取手动添加的部分，而不是由于 instagram api 而出现的部分。

我很确定我的问题与加载脚本的时间有关，因为脚本会更改图像的某些属性，例如href to data-href，但是我尝试预加载该信息，并且收到了相同的结果。

为了直观地了解我的问题，我在 codepen 中有脚本：

http://codepen.io/anon/pen/XJdbZR

红色是动态添加的图片

而且，这就是我的想法，它告诉我脚本只修改了每次加载的信息

在此处输入图像描述

我感谢任何帮助或提示。谢谢

4

2 回答 2

1

简短的回答？丢失<>jQuery 标识符中的字符。您应该像对待 CSS 标识符一样对待标识符。

IE; $('<a>')实际上应该是$('a')。

要对此进行测试，请继续在您最喜欢的浏览器控制台中运行它们并查看差异。

于 2014-12-11T05:56:40.640 回答
1

问题是第一次该页面初始化将绑定imageflip到所有ul#iGallery子级并且在那一刻您的新图像没有加载，因此在类似情况下通常必须再次将您的函数 imageflip 绑定到 ul 中。
我相信这会解决你的问题，但在你的情况下还有另一个问题，因为插件结构，你不能绑定 imageflip 两次。
我将您的代码固定在 codepen“固定代码”，但这仅在 didLoadInstagram 函数触发时才有效。

于 2014-12-11T07:59:08.437 回答