从Jquery返回href类的问题

时间:2015-08-06 09:33:35

标签: javascript jquery html fancybox href

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

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

我一直使用的灯箱代码是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,并对其进行了编辑,以包含类&#39; ins_popup&#39;像这样:

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

如果您需要查看任何其他代码,请询问!任何帮助都非常感谢,因为您可能已经猜到了 - 我对这一切都是新手

谢谢!

1 个答案:

答案 0 :(得分:0)

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

compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

此外,我在您的示例网站中看到您已在页面中包含两次jquery

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包含。这可能是个问题。