从 Jquery 返回 href 类的问题答案

【问题标题】：Problems returning href class from Jquery从 Jquery 返回 href 类的问题
【发布时间】：2015-10-29 09:11:59
【问题描述】：

我已经下载并实现了一些 jquery 代码，这些代码可以在我的网站上从一个 instagram 主题标签创建一个照片库。我一直在尝试编辑此代码，以便单击图库中的图像会显示在灯箱中，而不是点击返回 instagram 的链接。

这里是代码的来源：http://www.jqueryscript.net/social-media/jQuery-Plugin-To-Create-An-Endless-Instagram-Gallery-embedstagram.html

我一直使用的Lightbox代码是fancybox：http://www.jqueryscript.net/lightbox/Responsive-jQuery-Lightbox-With-Amazing-CSS3-Effects-Fancy-Box-2.html

在我的网站上，为两个 Jqueries 加载了必要的组件，并且函数运行如下：

<script>
            $(document).ready(function(){      
                $(".ins_popup").fancybox({   
                    openEffect : 'fade',
                    closeEffect : 'fade'
                });  
            });   
        </script>

我在原始库 jquery 中找到了链接到 instagram 的 href，并对其进行了编辑以包含类“ins_popup”，如下所示：

function renderPhotos(data) {
      $.each(data.data, function (i, photo) {
        photo = '<li class="photo"><a href="' + photo.images.standard_resolution.url.replace(/\\/, "") + '" class= "ins_popup"><img src="' + photo.images.standard_resolution.url.replace(/\\/, "") + '"></a></li>';

但这似乎不起作用，该链接现在只是打开图片的放大版本，而不是在fancybox中打开它。我已经单独测试了每个组件（fancybox / hashtag gallery）没有问题，我似乎无法让它们相互交谈。

以及相关代码：

<!DOCTYPE html>
<html>
<head>
  <title>Embedstagram jQuery Plugin Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

  <!-- Include CSS Fies -->
  <link href="https://www.googledrive.com/host/0B_9gRWttmryISVpkTGFhVV8yajQ" rel="stylesheet" type="text/css" >
  <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
  <link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet" type="text/css">
  <link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet" type="text/css"> 

  <!-- Include jQuery -->
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

  <!-- Include fancybox library -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
  <script>
   $(document).ready(function(){ 
    $(".ins_popup").fancybox({
     openEffect : 'fade',
     closeEffect : 'fade'
    });
   });
  </script>


</head>
<body>

<div class="jquery-script-clear"></div>


<h1 style="margin:150px auto 30px auto;">Embedstagram jQuery Plugin Demo</h1>
   <div id="embedstagram"></div>


 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="https://www.googledrive.com/host/0B_9gRWttmryIbE0yNUJaeHNOQVk"></script>
   <script type="text/javascript">
    $(document).ready(function () {

      $('#embedstagram').embedstagram({
       client_id: '6f3244d01df94bb98785d04861561307',
       hashtag: '#neverlutionsoundsystem' ,
  thumb: 'tile'
       });

    });
  </script>
  </body>
</html>

以及我编辑过的画廊的 Jquery：

/*global jQuery, window*/
(function ($) {
  $.fn.embedstagram = function (options) {

    var $this = this,
      next_url = '';

    var settings = $.extend({
      client_id: '',
      username: '',
      hashtag: '#neverlutionsoundsystem',
      count: 20,
      responsive: true,
      load_more: true,
      thumb: 'default',
      theme: 'default'
    }, options);

    settings.hashtag = settings.hashtag.replace('#', '');

    $this
      .addClass('embedstagram')
      .addClass('thumb-' + settings.thumb)
      .addClass('theme-' + settings.theme)
      .append('<ul></ul>')
      .append('<a href="#" id="function-button" class="function-button">Loading..</a>');

    var $photos = $this.find('ul'),
      $button = $this.find('#function-button');

    function resize() {
      if (settings.responsive) {
        var e = $this.width();
        var $photo = $('.photo');
        if (1024 >= e && e > 768) {
          $photo.css({'width': '25%', 'padding-bottom': '25%'});
        } else if (768 >= e && e > 570) {
          $photo.css({'width': '33.3%', 'padding-bottom': '33.3%'});
        } else if (570 >= e && e > 400) {
          $photo.css({'width': '50%', 'padding-bottom': '50%'});
        } else if (400 > e) {
          $photo.css({'width': '100%', 'padding-bottom': '100%'});
        } else {
          $photo.css({'width': '20%', 'padding-bottom': '20%'});
        }
      }
    }

    function renderPhotos(data) {
      $.each(data.data, function (i, photo) {
        photo = '<li class="photo"><a href="' + photo.images.standard_resolution.url.replace(/\\/, "") + '" class= "ins_popup"><img src="' + photo.images.standard_resolution.url.replace(/\\/, "") + '"></a></li>';

        $photos.append(photo);
        return i <= (settings.count);
      });
    }

    function getUrl(user_id) {
      var modifier;
      if (user_id) {
        modifier = 'users/' + user_id;
      } else if (settings.hashtag) {
        modifier = 'tags/' + settings.hashtag;
      }
      if (next_url) {
        return next_url;
      }
      return 'https://api.instagram.com/v1/' + modifier + '/media/recent/?&client_id=' + settings.client_id + '&count=' + settings.count;
    }

    function getPhotos(user_id) {
      $button.text('Loading..');
      $.ajax({
        type: "GET",
        dataType: 'jsonp',
        url: getUrl(user_id),
        success: function (data) {

          if (data.meta.error_message) {
            var error_message = 'Error: ' + data.meta.error_message.toLowerCase();
            $button.text(error_message).addClass('error');
            return false;
          }

          if (!settings.load_more) {
             $this.addClass('hide-load-more');
           }
          $button.text('Load More');
          renderPhotos(data);
          next_url = data.pagination.next_url;
          if (!next_url) {
            $button.text('No more images').addClass('disabled');
          }
          resize();
        },
        error: function () {
          $button.text('Error: unknown').addClass('error');
        }
      });
    }

    if (settings.username) {
      $.ajax({
        type: "GET",
        dataType: 'jsonp',
        url: 'https://api.instagram.com/v1/users/search?q=' + settings.username + '&client_id=' + settings.client_id,
        success: function (data) {

          if (data.meta.error_message) {
            var error_message = 'Error: ' + data.meta.error_message.toLowerCase();
            $button.text(error_message).addClass('error');
            return false;
          }

          if (data.data.length) {

            var num_items = data.data.length - 1;
            $.each(data.data, function (i, user) {
              if (settings.username === user.username) {
                var user_id = user.id;
                getPhotos(user_id);
                return false;
              }
              if (i === num_items) {
                $button.text('Error: no users found').addClass('error');
              }
            });

          } else {
            $button.text('Error: no users found').addClass('error');
          }
        },
        error: function () {
          $button.text('Error: unknown').addClass('error');
        }
      });
    } else if (settings.hashtag) {
      getPhotos();
    } else {
      $button.text('Error: missing username or hashtag').addClass('error');
    }

    $button.click(function (e) {
      e.preventDefault();
      if (!$(this).is('.disabled, .error')) {
        getPhotos();
      }
    });

    $(window).on('load resize', resize);

  };
}(jQuery));

如果您需要查看任何其他代码，请询问！非常感谢您的任何帮助，您可能已经猜到了 - 我对所有这些都是新手

谢谢！

【问题讨论】：

我正在测试它的网站在这里：neverlution.co.uk/p/testpic.html
我在您的示例网站中看到您已包含 jquery 两次
是的，我想知道这一点，但由于它们是 2 个不同的版本，我认为如果我删除一个可能会破坏某些东西....我想保留最新版本，看看效果如何？
我更喜欢保留最新版本并删除旧版本。

标签： javascript jquery html fancybox href

【解决方案1】：

当您调用fancybox 时，图像可能尚未加载到DOM。在图片加载后调用 fancybox 插件，而不是在 $(document).ready();

function renderPhotos(data) {
  $.each(data.data, function (i, photo) {
    photo = '<li class="photo"><a href="' + photo.images.standard_resolution.url.replace(/\\/, "") + '" class= "ins_popup"><img src="' + photo.images.standard_resolution.url.replace(/\\/, "") + '"></a></li>';

    $photos.append(photo);
    return i <= (settings.count);
  });
  $(".ins_popup").fancybox({
     openEffect : 'fade',
     closeEffect : 'fade'
  });
}

我还在您的示例网站中看到您在页面中包含了两次 jquery

<!-- Include jQuery -->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

删除第二个 Jquery 包含。这可能是问题所在。

【讨论】：

谢谢你，但它仍然不能使用上面的代码......我是否必须在 embedstagram 库 .JS 中加载 fancybox 文件，而不是在页面的主代码中使用这个方法？
再试一次，现在似乎可以正常工作了。谢谢！