Instagram Gallery - Version 3.0.7

Version Description

  • Fix. instagram masonry
Download this release

Release Info

Developer quadlayers
Plugin Icon 128x128 Instagram Gallery
Version 3.0.7
Comparing to
See all releases

Code changes from version 3.0.6 to 3.0.7

Files changed (3) hide show
  1. assets/frontend/js/qligg.min.js +1 -335
  2. insta-gallery.php +2 -2
  3. readme.txt +4 -1
assets/frontend/js/qligg.min.js CHANGED
@@ -1,335 +1 @@
1
- (function ($) {
2
- "use strict";
3
-
4
- var swiper_index = 0, $swipers = {};
5
-
6
- // Ajax load
7
- // ---------------------------------------------------------------------------
8
-
9
- function qligg_load_item_images($item, next_max_id) {
10
-
11
- var $wrap = $('.insta-gallery-list', $item),
12
- $spinner = $('.insta-gallery-spinner', $item),
13
- feed = $item.data('feed');
14
-
15
- $.ajax({
16
- url: qligg.ajax_url,
17
- type: 'post',
18
- timeout: 30000,
19
- data: {
20
- action: 'qligg_load_item_images',
21
- next_max_id: next_max_id,
22
- feed: JSON.stringify(feed)
23
- },
24
- beforeSend: function () {
25
- $spinner.show();
26
- },
27
- success: function (response) {
28
-
29
- if (response.success !== true) {
30
- $wrap.append($(response.data));
31
- $spinner.hide();
32
- return;
33
- }
34
- var $images = $(response.data);
35
-
36
- $wrap.append($images).trigger('qligg.loaded', [$images]);
37
-
38
- },
39
- complete: function () {
40
- },
41
- error: function (jqXHR, textStatus) {
42
- $spinner.hide();
43
- console.log(textStatus);
44
- }
45
- });
46
-
47
- }
48
-
49
- // Images
50
- // ---------------------------------------------------------------------------
51
-
52
- $('.insta-gallery-feed').on('qligg.loaded', function (e, images) {
53
-
54
- var $item = $(e.delegateTarget),
55
- $wrap = $('.insta-gallery-list', $item),
56
- $spinner = $('.insta-gallery-spinner', $item),
57
- $button = $('.insta-gallery-button.load', $item),
58
- options = $item.data('feed'),
59
- total = $(images).length,
60
- loaded = 0;
61
- $wrap.trigger('qligg.imagesLoaded', [images]);
62
-
63
- /* if (total) {
64
- $wrap.find('.insta-gallery-image').load(function (e) {
65
- loaded++;
66
- if (loaded >= total) {
67
- $wrap.trigger('qligg.imagesLoaded', [images]);
68
- }
69
- });
70
- }*/
71
-
72
- if (total < options.limit) {
73
- $spinner.hide();
74
- setTimeout(function () {
75
- $button.fadeOut();
76
- }, 300);
77
- }
78
-
79
- });
80
-
81
- // Spinner
82
- // ---------------------------------------------------------------------------
83
-
84
- $('.insta-gallery-feed').on('qligg.imagesLoaded', function (e) {
85
-
86
- var $item = $(e.delegateTarget),
87
- $spinner = $('.insta-gallery-spinner', $item);
88
-
89
- $spinner.hide();
90
-
91
- });
92
-
93
- // Gallery
94
- // ---------------------------------------------------------------------------
95
-
96
- $('.insta-gallery-feed[data-feed_layout=gallery]').on('qligg.imagesLoaded', function (e, images) {
97
-
98
- var $item = $(e.delegateTarget);
99
-
100
- $item.addClass('loaded');
101
-
102
- $(images).each(function (i, item) {
103
- setTimeout(function () {
104
- $(item).addClass('ig-image-loaded');
105
- }, 150 + (i * 30));
106
-
107
- });
108
- });
109
-
110
- // Carousel
111
- // ---------------------------------------------------------------------------
112
-
113
- $('.insta-gallery-feed[data-feed_layout=carousel]').on('qligg.imagesLoaded', function (e, images) {
114
-
115
- var $item = $(e.delegateTarget);
116
-
117
- $item.addClass('loaded');
118
-
119
- $(images).each(function (i, item) {
120
- //setTimeout(function () {
121
- $(item).addClass('ig-image-loaded');
122
- //}, 500 + (i * 50));
123
-
124
- });
125
- });
126
-
127
- $('.insta-gallery-feed[data-feed_layout=carousel]').on('qligg.imagesLoaded', function (e, images) {
128
-
129
- var $item = $(e.delegateTarget),
130
- $swiper = $('.swiper-container', $item),
131
- options = $item.data('feed');
132
- options.carousel.slides = options.carousel.slidespv;
133
- /// options.carousel.interval = options.carousel.autoplay_interval;
134
- swiper_index++;
135
-
136
- $swipers[swiper_index] = new Swiper($swiper, {
137
- //direction: 'vertical',
138
- //wrapperClass: 'insta-gallery-list',
139
- //slideClass: 'insta-gallery-item',
140
- loop: true,
141
- autoHeight: true,
142
- observer: true,
143
- observeParents: true,
144
- slidesPerView: 1,
145
- spaceBetween: 2,
146
- autoplay: options.carousel.autoplay ? {
147
- delay: parseInt(options.carousel.autoplay_interval),
148
- } : false,
149
- pagination: {
150
- el: '.swiper-pagination',
151
- dynamicBullets: true,
152
- clickable: true,
153
- type: 'bullets',
154
- },
155
- navigation: {
156
- nextEl: '.swiper-button-next',
157
- prevEl: '.swiper-button-prev',
158
- },
159
- breakpoints: {
160
- 320: {
161
- slidesPerView: 1,
162
- spaceBetween: 1,
163
- },
164
- 480: {
165
- spaceBetween: parseInt(options.spacing),
166
- slidesPerView: Math.min(2, parseInt(options.carousel.slides))
167
- },
168
- 768: {
169
- spaceBetween: parseInt(options.spacing),
170
- slidesPerView: Math.min(3, parseInt(options.carousel.slides))
171
- },
172
- 1024: {
173
- spaceBetween: parseInt(options.spacing),
174
- slidesPerView: parseInt(options.carousel.slides)
175
- },
176
- }
177
- });
178
- });
179
-
180
- // Masonry
181
- // ---------------------------------------------------------------------------
182
-
183
- $('.insta-gallery-feed[data-feed_layout=masonry]').on('qligg.imagesLoaded', function (e, images) {
184
-
185
- var $item = $(e.delegateTarget),
186
- $wrap = $('.insta-gallery-list', $item);
187
-
188
- if (!$wrap.data('masonry')) {
189
- $wrap.masonry({
190
- itemSelector: '.insta-gallery-item',
191
- isResizable: true,
192
- isAnimated: false,
193
- transitionDuration: 0,
194
- percentPosition: true,
195
- columnWidth: '.insta-gallery-item:last-child'
196
- });
197
- } else {
198
- $wrap.masonry('appended', images, false);
199
- }
200
- });
201
-
202
-
203
- $('.insta-gallery-feed[data-feed_layout=masonry]').on('layoutComplete', function (e, items) {
204
-
205
- var $item = $(e.delegateTarget);
206
-
207
- $item.addClass('loaded');
208
-
209
- $(items).each(function (i, item) {
210
- // setTimeout(function () {
211
- $(item.element).addClass('ig-image-loaded');
212
- // }, 500 + (i * 50));
213
-
214
- });
215
- });
216
-
217
- // Popup
218
- // ---------------------------------------------------------------------------
219
- $('.insta-gallery-feed').on('qligg.loaded', function (e) {
220
-
221
- var $item = $(e.delegateTarget),
222
- $wrap = $('.insta-gallery-list', $item),
223
- options = $item.data('feed');
224
-
225
- // Redirect
226
- // -------------------------------------------------------------------------
227
- $('.insta-gallery-item .insta-gallery-icon.qligg-icon-instagram', $wrap).on('click', function (e) {
228
- e.stopPropagation();
229
- });
230
-
231
- // Carousel
232
- // -------------------------------------------------------------------------
233
- //$('.insta-gallery-item', $wrap).on('mfpOpen', function (e) {
234
- //});
235
-
236
- if (!options.popup.display) {
237
- return;
238
- }
239
-
240
- $('.insta-gallery-item', $wrap).magnificPopup({
241
- type: 'inline',
242
- callbacks: {
243
- beforeOpen: function () {
244
- this.st.mainClass = this.st.mainClass + ' ' + 'qligg-mfp-wrap';
245
- },
246
- elementParse: function (item) {
247
-
248
- var media = '', profile = '', counter = '', caption = '', info = '', likes = '', date = '', comments = '';
249
-
250
- if (item.el.data('item').type && item.el.data('item').type == 'video') {
251
- media = '\n\
252
- <video autoplay>\n\
253
- <source src="' + item.el.data('item').videos.standard + '" type="video/mp4">\n\
254
- </video>'
255
- } else {
256
- media = '<img src="' + item.el.data('item').images.standard + '"/>'
257
- }
258
- counter = '<div class="mfp-icons"><div class="mfp-counter">' + (item.index + 1) + ' / ' + $('.insta-gallery-item', $wrap).length + '</div><a class="mfp-link" href="' + item.el.data('item').link + '" target="_blank" rel="noopener"><i class="qligg-icon-instagram"></i>Instagram</a></div>';
259
-
260
- if (options.popup.profile) {
261
- profile = '<div class="mfp-user"><img src="' + options.profile.profile_picture_url + '"><a href="https://www.instagram.com/' + options.profile.username + '" title="' + options.profile.name + '" target="_blank" rel="noopener">' + options.profile.username + '</a></div>';
262
- }
263
-
264
- if (options.popup.caption) {
265
- caption = '<div class="mfp-caption">' + item.el.data('item').caption + '</div>';
266
- }
267
-
268
- if (item.el.data('item').date) {
269
- date = '<div class="mfp-date">' + item.el.data('item').date + '</div>';
270
- }
271
-
272
- if (item.el.data('item').comments && options.popup.comments) {
273
- comments = '<div class="mfp-comments"><i class="qligg-icon-comment"></i>' + item.el.data('item').comments + '</div>';
274
- }
275
-
276
- if (item.el.data('item').likes && options.popup.likes) {
277
- likes = '<div class="mfp-likes"><i class="qligg-icon-heart"></i>' + item.el.data('item').likes + '</div>';
278
- }
279
-
280
- if (options.popup.likes || options.popup.comments) {
281
- info = '<div class="mfp-info">' + likes + comments + date + '</div>';
282
- }
283
-
284
- item.src = '<div class="mfp-figure ' + options.popup.align + '">' + media + '<div class="mfp-close"></div><div class="mfp-bottom-bar"><div class="mfp-title">' + profile + counter + caption + info + '</div></div></div>';
285
- }
286
- },
287
- gallery: {
288
- enabled: true
289
- }
290
- });
291
-
292
- });
293
-
294
- // Init
295
- // ---------------------------------------------------------------------------
296
-
297
- $('.insta-gallery-feed').on('click', '.insta-gallery-button.load', function (e) {
298
- e.preventDefault();
299
-
300
- var $item = $(e.delegateTarget);
301
-
302
- if (!$item.hasClass('loaded')) {
303
- return false;
304
- }
305
-
306
- var next_max_id = $('.insta-gallery-list .insta-gallery-item:last-child', $item).data('item').i;
307
-
308
- qligg_load_item_images($item, next_max_id);
309
-
310
- });
311
-
312
- $('.insta-gallery-feed').each(function (index, item) {
313
-
314
- var $item = $(item);
315
-
316
- if ($item.hasClass('loaded')) {
317
- return false;
318
- }
319
-
320
- qligg_load_item_images($item, 0);
321
-
322
- });
323
-
324
- // IE8
325
- // ---------------------------------------------------------------------------
326
-
327
- if (navigator.appVersion.indexOf("MSIE 8.") != -1) {
328
- document.body.className += ' ' + 'instagal-ie-8';
329
- }
330
- if (navigator.appVersion.indexOf("MSIE 9.") != -1) {
331
- document.body.className += ' ' + 'instagal-ie-9';
332
- }
333
-
334
- })(jQuery);
335
-
1
+ !function($){"use strict";var swiper_index=0,$swipers={};function qligg_load_item_images($item,next_max_id){var $wrap=$(".insta-gallery-list",$item),$spinner=$(".insta-gallery-spinner",$item),feed=$item.data("feed");$.ajax({url:qligg.ajax_url,type:"post",timeout:3e4,data:{action:"qligg_load_item_images",next_max_id:next_max_id,feed:JSON.stringify(feed)},beforeSend:function(){$spinner.show()},success:function(response){if(!0!==response.success)return $wrap.append($(response.data)),void $spinner.hide();var $images=$(response.data);$wrap.append($images).trigger("qligg.loaded",[$images])},complete:function(){},error:function(jqXHR,textStatus){$spinner.hide(),console.log(textStatus)}})}$(".insta-gallery-feed").on("qligg.loaded",(function(e,images){var $item=$(e.delegateTarget),$wrap=$(".insta-gallery-list",$item),$spinner=$(".insta-gallery-spinner",$item),$button=$(".insta-gallery-button.load",$item),options=$item.data("feed"),total=$(images).length,loaded=0;total&&$wrap.find(".insta-gallery-image").load((function(e){++loaded>=total&&$wrap.trigger("qligg.imagesLoaded",[images])})),total<options.limit&&($spinner.hide(),setTimeout((function(){$button.fadeOut()}),300))})),$(".insta-gallery-feed").on("qligg.imagesLoaded",(function(e){var $item=$(e.delegateTarget),$spinner;$(".insta-gallery-spinner",$item).hide()})),$(".insta-gallery-feed[data-feed_layout=gallery]").on("qligg.imagesLoaded",(function(e,images){var $item;$(e.delegateTarget).addClass("loaded"),$(images).each((function(i,item){setTimeout((function(){$(item).addClass("ig-image-loaded")}),150+30*i)}))})),$(".insta-gallery-feed[data-feed_layout=carousel]").on("qligg.imagesLoaded",(function(e,images){var $item;$(e.delegateTarget).addClass("loaded"),$(images).each((function(i,item){$(item).addClass("ig-image-loaded")}))})),$(".insta-gallery-feed[data-feed_layout=carousel]").on("qligg.imagesLoaded",(function(e,images){var $item=$(e.delegateTarget),$swiper=$(".swiper-container",$item),options=$item.data("feed");options.carousel.slides=options.carousel.slidespv,swiper_index++,$swipers[swiper_index]=new Swiper($swiper,{loop:!0,autoHeight:!0,observer:!0,observeParents:!0,slidesPerView:1,spaceBetween:2,autoplay:!!options.carousel.autoplay&&{delay:parseInt(options.carousel.autoplay_interval)},pagination:{el:".swiper-pagination",dynamicBullets:!0,clickable:!0,type:"bullets"},navigation:{nextEl:".swiper-button-next",prevEl:".swiper-button-prev"},breakpoints:{320:{slidesPerView:1,spaceBetween:1},480:{spaceBetween:parseInt(options.spacing),slidesPerView:Math.min(2,parseInt(options.carousel.slides))},768:{spaceBetween:parseInt(options.spacing),slidesPerView:Math.min(3,parseInt(options.carousel.slides))},1024:{spaceBetween:parseInt(options.spacing),slidesPerView:parseInt(options.carousel.slides)}}})})),$(".insta-gallery-feed[data-feed_layout=masonry]").on("qligg.imagesLoaded",(function(e,images){var $item=$(e.delegateTarget),$wrap=$(".insta-gallery-list",$item);$wrap.data("masonry")?$wrap.masonry("appended",images,!1):$wrap.masonry({itemSelector:".insta-gallery-item",isResizable:!0,isAnimated:!1,transitionDuration:0,percentPosition:!0,columnWidth:".insta-gallery-item:last-child"})})),$(".insta-gallery-feed[data-feed_layout=masonry]").on("layoutComplete",(function(e,items){var $item;$(e.delegateTarget).addClass("loaded"),$(items).each((function(i,item){$(item.element).addClass("ig-image-loaded")}))})),$(".insta-gallery-feed").on("qligg.loaded",(function(e){var $item=$(e.delegateTarget),$wrap=$(".insta-gallery-list",$item),options=$item.data("feed");$(".insta-gallery-item .insta-gallery-icon.qligg-icon-instagram",$wrap).on("click",(function(e){e.stopPropagation()})),options.popup.display&&$(".insta-gallery-item",$wrap).magnificPopup({type:"inline",callbacks:{beforeOpen:function(){this.st.mainClass=this.st.mainClass+" qligg-mfp-wrap"},elementParse:function(item){var media="",profile="",counter="",caption="",info="",likes="",date="",comments="";media=item.el.data("item").type&&"video"==item.el.data("item").type?'\n <video autoplay>\n <source src="'+item.el.data("item").videos.standard+'" type="video/mp4">\n </video>':'<img src="'+item.el.data("item").images.standard+'"/>',counter='<div class="mfp-icons"><div class="mfp-counter">'+(item.index+1)+" / "+$(".insta-gallery-item",$wrap).length+'</div><a class="mfp-link" href="'+item.el.data("item").link+'" target="_blank" rel="noopener"><i class="qligg-icon-instagram"></i>Instagram</a></div>',options.popup.profile&&(profile='<div class="mfp-user"><img src="'+options.profile.profile_picture_url+'"><a href="https://www.instagram.com/'+options.profile.username+'" title="'+options.profile.name+'" target="_blank" rel="noopener">'+options.profile.username+"</a></div>"),options.popup.caption&&(caption='<div class="mfp-caption">'+item.el.data("item").caption+"</div>"),item.el.data("item").date&&(date='<div class="mfp-date">'+item.el.data("item").date+"</div>"),item.el.data("item").comments&&options.popup.comments&&(comments='<div class="mfp-comments"><i class="qligg-icon-comment"></i>'+item.el.data("item").comments+"</div>"),item.el.data("item").likes&&options.popup.likes&&(likes='<div class="mfp-likes"><i class="qligg-icon-heart"></i>'+item.el.data("item").likes+"</div>"),(options.popup.likes||options.popup.comments)&&(info='<div class="mfp-info">'+likes+comments+date+"</div>"),item.src='<div class="mfp-figure '+options.popup.align+'">'+media+'<div class="mfp-close"></div><div class="mfp-bottom-bar"><div class="mfp-title">'+profile+counter+caption+info+"</div></div></div>"}},gallery:{enabled:!0}})})),$(".insta-gallery-feed").on("click",".insta-gallery-button.load",(function(e){e.preventDefault();var $item=$(e.delegateTarget),next_max_id;if(!$item.hasClass("loaded"))return!1;qligg_load_item_images($item,$(".insta-gallery-list .insta-gallery-item:last-child",$item).data("item").i)})),$(".insta-gallery-feed").each((function(index,item){var $item=$(item);if($item.hasClass("loaded"))return!1;qligg_load_item_images($item,0)})),-1!=navigator.appVersion.indexOf("MSIE 8.")&&(document.body.className+=" instagal-ie-8"),-1!=navigator.appVersion.indexOf("MSIE 9.")&&(document.body.className+=" instagal-ie-9")}(jQuery);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
insta-gallery.php CHANGED
@@ -4,7 +4,7 @@
4
  * Plugin Name: Social Feed Gallery
5
  * Plugin URI: https://quadlayers.com/portfolio/instagram-feed-gallery/
6
  * Description: Display beautiful and responsive galleries on your website from your Instagram feed account.
7
- * Version: 3.0.6
8
  * Author: QuadLayers
9
  * Author URI: https://quadlayers.com
10
  * License: GPLv3
@@ -19,7 +19,7 @@ if (!defined('QLIGG_PLUGIN_NAME')) {
19
  define('QLIGG_PLUGIN_NAME', 'Social Feed Gallery');
20
  }
21
  if (!defined('QLIGG_PLUGIN_VERSION')) {
22
- define('QLIGG_PLUGIN_VERSION', '3.0.6');
23
  }
24
  if (!defined('QLIGG_PLUGIN_FILE')) {
25
  define('QLIGG_PLUGIN_FILE', __FILE__);
4
  * Plugin Name: Social Feed Gallery
5
  * Plugin URI: https://quadlayers.com/portfolio/instagram-feed-gallery/
6
  * Description: Display beautiful and responsive galleries on your website from your Instagram feed account.
7
+ * Version: 3.0.7
8
  * Author: QuadLayers
9
  * Author URI: https://quadlayers.com
10
  * License: GPLv3
19
  define('QLIGG_PLUGIN_NAME', 'Social Feed Gallery');
20
  }
21
  if (!defined('QLIGG_PLUGIN_VERSION')) {
22
+ define('QLIGG_PLUGIN_VERSION', '3.0.7');
23
  }
24
  if (!defined('QLIGG_PLUGIN_FILE')) {
25
  define('QLIGG_PLUGIN_FILE', __FILE__);
readme.txt CHANGED
@@ -4,7 +4,7 @@ Donate link: https://quadlayers.com/portfolio/instagram-gallery/
4
  Tags: Instagram, Instagram feed, Instagram gallery, Instagram photos, Instagram widget, Instagram pictures
5
  Requires at least: 3.4
6
  Tested up to: 5.5.3
7
- Stable tag: 3.0.6
8
  License: GPLv3
9
  License URI: https://www.gnu.org/licenses/gpl-3.0.html
10
 
@@ -105,6 +105,9 @@ There may be some other plugins(like: fancybox, elementor) which also uses image
105
 
106
  == Changelog ==
107
 
 
 
 
108
  = 3.0.6 =
109
  * Fix. carousel media files
110
 
4
  Tags: Instagram, Instagram feed, Instagram gallery, Instagram photos, Instagram widget, Instagram pictures
5
  Requires at least: 3.4
6
  Tested up to: 5.5.3
7
+ Stable tag: 3.0.7
8
  License: GPLv3
9
  License URI: https://www.gnu.org/licenses/gpl-3.0.html
10
 
105
 
106
  == Changelog ==
107
 
108
+ = 3.0.7 =
109
+ * Fix. instagram masonry
110
+
111
  = 3.0.6 =
112
  * Fix. carousel media files
113