如何向插件添加灯箱选项

时间：2018-12-03 14:22:19

标签： javascript jquery github lightbox

嗨，我想从我的GitHub的Masongram插件中添加Lightbox选项，该插件目前运行良好，我在GitHub上没有找到关于此选项的任何信息。所以我决定添加它，但我不知道为什么，当我尝试在Lightbox中打开instagram中的图像而没有提到直接链接时，我无法使其工作。这是当我添加图像的链接时的代码以及工作示例。该工作示例在左上方，带有“打开”链接：

<script src="lightbox.min.js"></script>
<link rel="stylesheet" href="lightbox.css">


<a href="http://www.mydomaine.com/img/2.jpg" data-lightbox="lightbox-group-1" title="">open</a>

<a href="http://www.mydomaine.com/img/4.jpg" data-lightbox="lightbox-group-1" title=""></a>

<a href="http://www.mydomaine.com/img/5.jpg" data-lightbox="lightbox-group-1" title=""></a>

我尝试创建但尚无法使用的代码位于标题部分内，其中存在一个instagram按钮，并且效果很好，因此我想通过添加此部分来为Lightbox创建相同的按钮：

<a tabindex="-1" class="btn btn-primary" href="{link}" data-lightbox="lightbox-group-1"><i class="fa fa-arrows-alt"></i> Bigger</a>

内部：

caption: '<div class="text-center"><p data-if="{likes}"><i class="fa fa-heart text-danger"></i> {likes}</p><p data-if="{caption}">{caption}</p><a tabindex="-1" class="btn btn-primary" href="{link}" target="_blank" data-if="{link}"><i class="fa fa-instagram"></i> Instagram</a><a tabindex="-1" class="btn btn-primary" href="{link}" data-lightbox="lightbox-group-1"><i class="fa fa-arrows-alt"></i> Bigger</a></div>'

完整代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- COMMON TAGS -->
<meta charset="utf-8">
<title>MasonGram, Instagram photo feed jQuery plugin</title>
<!-- Search Engine -->
<meta name="description" content="Display Instagram images with infinite scroll, masonry layout, and other customizations">
<meta name="image" content="https://mladenplavsic.github.io/masongram/masongram.jpg">
<!-- Schema.org for Google -->
<meta itemprop="name" content="MasonGram, Instagram photo feed jQuery plugin">
<meta itemprop="description" content="Display Instagram images with infinite scroll, masonry layout, and other customizations">
<meta itemprop="image" content="https://mladenplavsic.github.io/masongram/masongram.jpg">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="MasonGram, Instagram photo feed jQuery plugin">
<meta name="twitter:description" content="Display Instagram images with infinite scroll, masonry layout, and other customizations">
<!-- Twitter - Article -->
<!-- Open Graph general (Facebook, Pinterest & Google+) -->
<meta name="og:title" content="MasonGram, Instagram photo feed jQuery plugin">
<meta name="og:description" content="Display Instagram images with infinite scroll, masonry layout, and other customizations">
<meta name="og:image" content="https://mladenplavsic.github.io/masongram/masongram.jpg">
<meta name="og:url" content="https://mladenplavsic.github.io/masongram">
<meta name="og:site_name" content="MasonGram, Instagram photo feed jQuery plugin">
<meta name="og:type" content="article">

<link rel="stylesheet" href="masongram.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

<style>
.btn
{ margin: 0px 10px!important; }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script>

<script async defer src="https://buttons.github.io/buttons.js"></script>
<script src="masongram.min.js"></script>




<script>
  var access_token = window.location.hash.replace(/#access_token=([\w\d.]+)/, '$1');
  var authorization = 'https://api.instagram.com/oauth/authorize/?client_id=640f******************89e4d&redirect_uri=' + window.location + '&response_type=token&scope=public_content';    
  if (!access_token) {
    access_token = '2432******************e13a';
  }


  $(document).ready(function () {
    $('#photos').masongram({
      access_token: access_token,
      count: 30,
      offset: 10,

      size: 'standard_resolution',
      caption: '<div class="text-center"><p data-if="{likes}"><i class="fa fa-heart text-danger"></i> {likes}</p><p data-if="{caption}">{caption}</p><a tabindex="-1" class="btn btn-primary" href="{link}" target="_blank" data-if="{link}"><i class="fa fa-instagram"></i> Instagram</a><a tabindex="-1" class="btn btn-primary" href="{link}" data-lightbox="lightbox-group-1"><i class="fa fa-arrows-alt"></i> Bigger</a></div>'
    });
    $('.authorization').attr('href', authorization);
  });
</script>


<script src="lightbox.min.js"></script>
<link rel="stylesheet" href="lightbox.css">


</head>
<body>


***Here is a working example****
<a href="http://www.mydomaine.com/img/2.jpg" data-lightbox="lightbox-group-1" title="">open</a>

<a href="http://www.mydomaine.com/img/4.jpg" data-lightbox="lightbox-group-1" title=""></a>

<a href="http://www.mydomaine.com/img/5.jpg" data-lightbox="lightbox-group-1" title=""></a>
***Here is a working example****



<div style="max-width:1260px; width:90%; margin: 0 auto;">
    <div id="photos"></div>
</div>

</body>
</html>

完成js部分：

!function(t,n,o){"use strict";t.masongram=o.fn.masongram=function(t){return this.each(function(){new e(this,t)})};var e=function(){function e(t,n){var o=this;d.forEach(function(t){o.require(t)}),u||(this.configure(n),this.setup(t))}var c,r,s,l,d=["jQuery","Masonry"],u=!1;return e.prototype={require:function(n){var o=void 0!==t[n];return o||(u=!0,console.error("Dependency unavailable: "+n)),o},configure:function(t){c=o.extend(!0,{endpoint:"users/self",loop:!1,count:10,offset:10,size:"low_resolution",caption:"{caption}",location:"inherit&caption"},t)},setup:function(e){var i=this;r=o("<div>").attr({class:"masongram-container"}).appendTo(e),o("<div>").attr({class:"masongram-image-sizer masongram-image-size-"+c.size}).appendTo(r),r.masonry({itemSelector:".masongram-image-container",columnWidth:".masongram-image-sizer",percentPosition:!0}),s=new a(c),s.on("loaded",function(t){i.append(t)});var l;o(t).scroll(function(){l||(l=setTimeout(function(){r.imagesLoaded().progress(function(){o(t).scrollTop()>o(n).height()-o(t).height()*(1+c.offset/100)&&i.load()}),l=null},100))}),r.on("layoutComplete",function(){r.imagesLoaded().progress(function(){o("body").height()<o(t).height()&&i.load()})}),i.load()},load:function(){l||(l=!0,s.load())},append:function(n){n.forEach(function(e,a){var s=new i(e,{caption:c.caption,size:c.size,location:c.location}),d=s.getObject();setTimeout(function(){d.imagesLoaded().progress(function(){r.append(d).masonry("appended",d),a+1===n.length&&(l=!1,o(t).trigger("scroll"))})},200*a)})}},e}(),a=function(){function t(t){n=t,e="https://api.instagram.com/v1/"+n.endpoint+"/media/recent/"}var n,e;return t.prototype={load:function(){if(e){var t=this,a=o.Deferred();return o.ajax({type:"POST",url:e,data:{access_token:n.access_token,count:n.count},dataType:"jsonp"}).success(function(i){o(t).trigger("loaded",[i.data]),a.resolve(i.data),n.loop||(e=!(!i.pagination||!i.pagination.next_url)&&i.pagination.next_url)}).error(function(){a.reject("Error fetching data")}),a.promise()}},on:function(t,n){o(this).on(t,function(t,o){n(o)})}},t}(),i=function(){function t(t,n){e=t,a=n,this.parseLocation(),this.create()}var n,e,a,i="NO_DATA";return t.prototype={create:function(){n=o("<div>").attr({tabindex:0,class:"masongram-image-container masongram-image-size-"+a.size});var t=o("<img>").attr({src:e.images[a.size].url,width:e.images[a.size].width,height:e.images[a.size].height,class:"masongram-image"});t.appendTo(n);var i=o("<div>",{class:"masongram-image-caption-container"}),c=o("<div>",{class:"masongram-image-caption"});e.caption&&e.caption.text&&c.html(this.parseCaption()),c.appendTo(i),i.appendTo(n)},getObject:function(){return n},parseLocation:function(){if(a.location.indexOf("inherit")===-1&&delete e.location,a.location.indexOf("caption")!==-1&&e.caption&&e.caption.text&&/@[\d]+\.[\d]+,[\d]+\.[\d]+/.test(e.caption.text)){var t=e.caption.text.match(/@([\d]+\.[\d]+),([\d]+\.[\d]+)/);e.caption.text=e.caption.text.replace(/\s*@([\d]+\.[\d]+),([\d]+\.[\d]+)/,""),e.location={latitude:t[1],longitude:t[2]}}},parseCaption:function(){var t=a.caption;if(/{.*}/.test(t)){var n=t.match(/{([^}]+)}/g);n.forEach(function(n){switch(n){case"{location}":t=t.replace(n,e.location&&void 0!==e.location.latitude&&void 0!==e.location.longitude?e.location.latitude+","+e.location.longitude:i);break;case"{latitude}":t=t.replace(n,e.location&&void 0!==e.location.latitude?e.location.latitude:i);break;case"{longitude}":t=t.replace(n,e.location&&void 0!==e.location.longitude?e.location.longitude:i);break;case"{caption}":t=t.replace(n,e.caption&&void 0!==e.caption.text?e.caption.text:i);break;case"{likes}":t=t.replace(n,e.likes&&void 0!==e.likes.count?e.likes.count:i);break;case"{link}":t=t.replace(n,e.link?e.link:i)}})}return t}},t}()}(window,document,jQuery);
//# sourceMappingURL=masongram.min.js.map

1 个答案:

答案 0 :(得分：0)

请查看https://mladenplavsic.github.io/masongram/上的最新版本-支持“ FancyBox”灯箱插件

相关问题
最新问题