Instagram Feed - Version 1.2.3

Version Description

  • Fix: Replaced the 'on' function with the 'click' function to increase compatibility with themes using older versions of jQuery
Download this release

Release Info

Developer smashballoon
Plugin Icon 128x128 Instagram Feed
Version 1.2.3
Comparing to
See all releases

Code changes from version 1.2.1 to 1.2.3

README.txt CHANGED
@@ -3,7 +3,7 @@ Contributors: smashballoon
3
Tags: Instagram, Instagram feed, Instagram photos, Instagram plugin, Instagram stream, Custom Instagram Feed, responsive Instagram, mobile Instagram, Instagram posts, Instagram wall, Instagram account
4
Requires at least: 3.0
5
Tested up to: 4.0
6
- Stable tag: 1.2.1
7
License: GPLv2 or later
8
License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
@@ -34,7 +34,7 @@ Display the Instagram photo feed of any non-private Instagram account.
34
= Feedback or Support =
35
We're dedicated to providing the most customizable, robust and well supported Instagram feed plugin in the world, so if you have an issue or have any feedback on how to improve the plugin then please open a ticket in the [Support forum](http://wordpress.org/support/plugin/instagram-feed 'Instagram Feed Support Forum').
36
37
- For a pop-up photo **lightbox**, to display posts by **hashtag**, to show photo **captions** + more, check out the [Pro version](https://smashballoon.com/instagram-feed/demo/ 'Instagram Feed Pro').
38
39
== Installation ==
40
@@ -61,7 +61,7 @@ For a pop-up photo **lightbox**, to display posts by **hashtag**, to show photo
61
* **buttontextcolor** - The text color of the button. Any hex color code - Example: `[instagram-feed buttontextcolor=#fff]`
62
* **imageres** - The resolution/size of the photos. 'full', 'medium' or 'thumb' - Example: `[instagram-feed imageres=full]`
63
64
- For more shortcode options, check out the [Pro version](https://smashballoon.com/instagram-feed/demo/ 'Instagram Feed Pro').
65
66
== Frequently Asked Questions ==
67
@@ -90,7 +90,7 @@ If you're still having an issue displaying your feed then please open a ticket i
90
91
= Can I view the full-size photos directly on my website? =
92
93
- This is a feature of the [Pro version](https://smashballoon.com/instagram-feed/demo/ 'Instagram Feed Pro') of the plugin, which allows you to view the photos in a pop-up lightbox, display captions, display photos by hashtag + more!
94
95
= How do I embed my Instagram Feed directly into a WordPress page template? =
96
@@ -116,7 +116,7 @@ The below options are available on the Instagram Feed Settings page but can also
116
* **buttontextcolor** - The text color of the button. Any hex color code - Example: `[instagram-feed buttontextcolor=#fff]`
117
* **imageres** - The resolution/size of the photos. 'full', 'medium' or 'thumb' - Example: `[instagram-feed imageres=full]`
118
119
- For more shortcode options, check out the [Pro version](https://smashballoon.com/instagram-feed/demo/ 'Instagram Feed Pro').
120
121
== Screenshots ==
122
@@ -126,6 +126,12 @@ For more shortcode options, check out the [Pro version](https://smashballoon.com
126
4. The Instagram Settings page. Super simple to set up and customize.
127
128
== Changelog ==
129
130
= 1.2.1 =
131
* Fix: Fixed a minor issue with the Custom JavaScript being run before the photos are loaded
@@ -137,7 +143,7 @@ For more shortcode options, check out the [Pro version](https://smashballoon.com
137
* New: Added an option to display your Instagram photos in random order
138
* New: A new tabbed layout has been implemented on the plugin's settings pages
139
* New: Added an option to preserve your settings when uninstalling the plugin
140
- * New: Added a [Pro version](https://smashballoon.com/instagram-feed/demo/ 'Instagram Feed Pro') of the plugin which allows you to display photos by hashtag, display captions, view photos in a pop-up lightbox, show the number of likes & comments and more
141
* Tweak: The 'Load More' button now automatically hides if there are no more photos to load
142
* Tweak: Added a small gap to the top of the 'Load More' button
143
* Tweak: Added a icon to the Instagram Feed menu item
3
Tags: Instagram, Instagram feed, Instagram photos, Instagram plugin, Instagram stream, Custom Instagram Feed, responsive Instagram, mobile Instagram, Instagram posts, Instagram wall, Instagram account
4
Requires at least: 3.0
5
Tested up to: 4.0
6
+ Stable tag: 1.2.3
7
License: GPLv2 or later
8
License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
34
= Feedback or Support =
35
We're dedicated to providing the most customizable, robust and well supported Instagram feed plugin in the world, so if you have an issue or have any feedback on how to improve the plugin then please open a ticket in the [Support forum](http://wordpress.org/support/plugin/instagram-feed 'Instagram Feed Support Forum').
36
37
+ For a pop-up photo **lightbox**, to display posts by **hashtag**, show photo **captions**, **video** support + more, check out the [Pro version](http://smashballoon.com/instagram-feed/demo/ 'Instagram Feed Pro').
38
39
== Installation ==
40
61
* **buttontextcolor** - The text color of the button. Any hex color code - Example: `[instagram-feed buttontextcolor=#fff]`
62
* **imageres** - The resolution/size of the photos. 'full', 'medium' or 'thumb' - Example: `[instagram-feed imageres=full]`
63
64
+ For more shortcode options, check out the [Pro version](http://smashballoon.com/instagram-feed/demo/ 'Instagram Feed Pro').
65
66
== Frequently Asked Questions ==
67
90
91
= Can I view the full-size photos directly on my website? =
92
93
+ This is a feature of the [Pro version](http://smashballoon.com/instagram-feed/demo/ 'Instagram Feed Pro') of the plugin, which allows you to view the photos in a pop-up lightbox, support videos, display captions, display photos by hashtag + more!
94
95
= How do I embed my Instagram Feed directly into a WordPress page template? =
96
116
* **buttontextcolor** - The text color of the button. Any hex color code - Example: `[instagram-feed buttontextcolor=#fff]`
117
* **imageres** - The resolution/size of the photos. 'full', 'medium' or 'thumb' - Example: `[instagram-feed imageres=full]`
118
119
+ For more shortcode options, check out the [Pro version](http://smashballoon.com/instagram-feed/demo/ 'Instagram Feed Pro').
120
121
== Screenshots ==
122
126
4. The Instagram Settings page. Super simple to set up and customize.
127
128
== Changelog ==
129
+ = 1.2.3 =
130
+ * Fix: Replaced the 'on' function with the 'click' function to increase compatibility with themes using older versions of jQuery
131
+
132
+ = 1.2.2 =
133
+ * Tweak: Added an initialize function to the plugin
134
+ * Fix: Fixed an occasional issue with the 'Sort Photos By' option being undefined
135
136
= 1.2.1 =
137
* Fix: Fixed a minor issue with the Custom JavaScript being run before the photos are loaded
143
* New: Added an option to display your Instagram photos in random order
144
* New: A new tabbed layout has been implemented on the plugin's settings pages
145
* New: Added an option to preserve your settings when uninstalling the plugin
146
+ * New: Added a [Pro version](http://smashballoon.com/instagram-feed/demo/ 'Instagram Feed Pro') of the plugin which allows you to display photos by hashtag, display captions, view photos in a pop-up lightbox, show the number of likes & comments and more
147
* Tweak: The 'Load More' button now automatically hides if there are no more photos to load
148
* Tweak: Added a small gap to the top of the 'Load More' button
149
* Tweak: Added a icon to the Instagram Feed menu item
img/instagram-pro-promo.png CHANGED
Binary file
instagram-feed.php CHANGED
@@ -3,7 +3,7 @@
3
Plugin Name: Instagram Feed
4
Plugin URI: http://smashballoon.com/instagram-feed
5
Description: Add a simple customizable Instagram feed to your website
6
- Version: 1.2.1
7
Author: Smash Balloon
8
Author URI: http://smashballoon.com/
9
License: GPLv2 or later
@@ -126,7 +126,7 @@ add_filter('widget_text', 'do_shortcode');
126
//Enqueue stylesheet
127
add_action( 'wp_enqueue_scripts', 'sb_instagram_styles_enqueue' );
128
function sb_instagram_styles_enqueue() {
129
- wp_register_style( 'sb_instagram_styles', plugins_url('css/sb-instagram.css?2', __FILE__) );
130
wp_enqueue_style( 'sb_instagram_styles' );
131
}
132
@@ -134,7 +134,7 @@ function sb_instagram_styles_enqueue() {
134
add_action( 'wp_enqueue_scripts', 'sb_instagram_scripts_enqueue' );
135
function sb_instagram_scripts_enqueue() {
136
//Register the script to make it available
137
- wp_register_script( 'sb_instagram_scripts', plugins_url( '/js/sb-instagram.js?4' , __FILE__ ), array('jquery'), '1.8', true );
138
139
//Options to pass to JS file
140
$sb_instagram_settings = get_option('sb_instagram_settings');
3
Plugin Name: Instagram Feed
4
Plugin URI: http://smashballoon.com/instagram-feed
5
Description: Add a simple customizable Instagram feed to your website
6
+ Version: 1.2.3
7
Author: Smash Balloon
8
Author URI: http://smashballoon.com/
9
License: GPLv2 or later
126
//Enqueue stylesheet
127
add_action( 'wp_enqueue_scripts', 'sb_instagram_styles_enqueue' );
128
function sb_instagram_styles_enqueue() {
129
+ wp_register_style( 'sb_instagram_styles', plugins_url('css/sb-instagram.css?3', __FILE__) );
130
wp_enqueue_style( 'sb_instagram_styles' );
131
}
132
134
add_action( 'wp_enqueue_scripts', 'sb_instagram_scripts_enqueue' );
135
function sb_instagram_scripts_enqueue() {
136
//Register the script to make it available
137
+ wp_register_script( 'sb_instagram_scripts', plugins_url( '/js/sb-instagram.js?5' , __FILE__ ), array('jquery'), '1.8', true );
138
139
//Options to pass to JS file
140
$sb_instagram_settings = get_option('sb_instagram_settings');
js/sb-instagram.js CHANGED
@@ -8,73 +8,75 @@
8
//IE8 also doesn't offer the .bind() method triggered by the 'sortBy' property. Copy and paste the polyfill offered here:
9
if(!Function.prototype.bind){Function.prototype.bind=function(e){if(typeof this!=="function"){throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable")}var t=Array.prototype.slice.call(arguments,1),n=this,r=function(){},i=function(){return n.apply(this instanceof r&&e?this:e,t.concat(Array.prototype.slice.call(arguments)))};r.prototype=this.prototype;i.prototype=new r;return i}}
10
11
- /* Lightbox v2.7.1 by Lokesh Dhakar - http://lokeshdhakar.com/projects/lightbox2/ */
12
- (function(){var a=jQuery,b=function(){function a(){this.fadeDuration=500,this.fitImagesInViewport=!0,this.resizeDuration=700,this.positionFromTop=50,this.showImageNumberLabel=!0,this.alwaysShowNavOnTouchDevices=!1,this.wrapAround=!1}return a.prototype.albumLabel=function(a,b){return"Image "+a+" of "+b},a}(),c=function(){function b(a){this.options=a,this.album=[],this.currentImageIndex=void 0,this.init()}return b.prototype.init=function(){this.enable(),this.build()},b.prototype.enable=function(){var b=this;a("body").on("click","a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]",function(c){return b.start(a(c.currentTarget)),!1})},b.prototype.build=function(){var b=this;a("<div id='lightboxOverlay' class='lightboxOverlay'></div><div id='lightbox' class='lightbox'><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' /><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'></a></div></div></div><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'></a></div></div></div></div>").appendTo(a("body")),this.$lightbox=a("#lightbox"),this.$overlay=a("#lightboxOverlay"),this.$outerContainer=this.$lightbox.find(".lb-outerContainer"),this.$container=this.$lightbox.find(".lb-container"),this.containerTopPadding=parseInt(this.$container.css("padding-top"),10),this.containerRightPadding=parseInt(this.$container.css("padding-right"),10),this.containerBottomPadding=parseInt(this.$container.css("padding-bottom"),10),this.containerLeftPadding=parseInt(this.$container.css("padding-left"),10),this.$overlay.hide().on("click",function(){return b.end(),!1}),this.$lightbox.hide().on("click",function(c){return"lightbox"===a(c.target).attr("id")&&b.end(),!1}),this.$outerContainer.on("click",function(c){return"lightbox"===a(c.target).attr("id")&&b.end(),!1}),this.$lightbox.find(".lb-prev").on("click",function(){return b.changeImage(0===b.currentImageIndex?b.album.length-1:b.currentImageIndex-1),!1}),this.$lightbox.find(".lb-next").on("click",function(){return b.changeImage(b.currentImageIndex===b.album.length-1?0:b.currentImageIndex+1),!1}),this.$lightbox.find(".lb-loader, .lb-close").on("click",function(){return b.end(),!1})},b.prototype.start=function(b){function c(a){d.album.push({link:a.attr("href"),title:a.attr("data-title")||a.attr("title")})}var d=this,e=a(window);e.on("resize",a.proxy(this.sizeOverlay,this)),a("select, object, embed").css({visibility:"hidden"}),this.sizeOverlay(),this.album=[];var f,g=0,h=b.attr("data-lightbox");if(h){f=a(b.prop("tagName")+'[data-lightbox="'+h+'"]');for(var i=0;i<f.length;i=++i)c(a(f[i])),f[i]===b[0]&&(g=i)}else if("lightbox"===b.attr("rel"))c(b);else{f=a(b.prop("tagName")+'[rel="'+b.attr("rel")+'"]');for(var j=0;j<f.length;j=++j)c(a(f[j])),f[j]===b[0]&&(g=j)}var k=e.scrollTop()+this.options.positionFromTop,l=e.scrollLeft();this.$lightbox.css({top:k+"px",left:l+"px"}).fadeIn(this.options.fadeDuration),this.changeImage(g)},b.prototype.changeImage=function(b){var c=this;this.disableKeyboardNav();var d=this.$lightbox.find(".lb-image");this.$overlay.fadeIn(this.options.fadeDuration),a(".lb-loader").fadeIn("slow"),this.$lightbox.find(".lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption").hide(),this.$outerContainer.addClass("animating");var e=new Image;e.onload=function(){var f,g,h,i,j,k,l;d.attr("src",c.album[b].link),f=a(e),d.width(e.width),d.height(e.height),c.options.fitImagesInViewport&&(l=a(window).width(),k=a(window).height(),j=l-c.containerLeftPadding-c.containerRightPadding-20,i=k-c.containerTopPadding-c.containerBottomPadding-120,(e.width>j||e.height>i)&&(e.width/j>e.height/i?(h=j,g=parseInt(e.height/(e.width/h),10),d.width(h),d.height(g)):(g=i,h=parseInt(e.width/(e.height/g),10),d.width(h),d.height(g)))),c.sizeContainer(d.width(),d.height())},e.src=this.album[b].link,this.currentImageIndex=b},b.prototype.sizeOverlay=function(){this.$overlay.width(a(window).width()).height(a(document).height())},b.prototype.sizeContainer=function(a,b){function c(){d.$lightbox.find(".lb-dataContainer").width(g),d.$lightbox.find(".lb-prevLink").height(h),d.$lightbox.find(".lb-nextLink").height(h),d.showImage()}var d=this,e=this.$outerContainer.outerWidth(),f=this.$outerContainer.outerHeight(),g=a+this.containerLeftPadding+this.containerRightPadding,h=b+this.containerTopPadding+this.containerBottomPadding;e!==g||f!==h?this.$outerContainer.animate({width:g,height:h},this.options.resizeDuration,"swing",function(){c()}):c()},b.prototype.showImage=function(){this.$lightbox.find(".lb-loader").hide(),this.$lightbox.find(".lb-image").fadeIn("slow"),this.updateNav(),this.updateDetails(),this.preloadNeighboringImages(),this.enableKeyboardNav()},b.prototype.updateNav=function(){var a=!1;try{document.createEvent("TouchEvent"),a=this.options.alwaysShowNavOnTouchDevices?!0:!1}catch(b){}this.$lightbox.find(".lb-nav").show(),this.album.length>1&&(this.options.wrapAround?(a&&this.$lightbox.find(".lb-prev, .lb-next").css("opacity","1"),this.$lightbox.find(".lb-prev, .lb-next").show()):(this.currentImageIndex>0&&(this.$lightbox.find(".lb-prev").show(),a&&this.$lightbox.find(".lb-prev").css("opacity","1")),this.currentImageIndex<this.album.length-1&&(this.$lightbox.find(".lb-next").show(),a&&this.$lightbox.find(".lb-next").css("opacity","1"))))},b.prototype.updateDetails=function(){var b=this;"undefined"!=typeof this.album[this.currentImageIndex].title&&""!==this.album[this.currentImageIndex].title&&this.$lightbox.find(".lb-caption").html(this.album[this.currentImageIndex].title).fadeIn("fast").find("a").on("click",function(){location.href=a(this).attr("href")}),this.album.length>1&&this.options.showImageNumberLabel?this.$lightbox.find(".lb-number").text(this.options.albumLabel(this.currentImageIndex+1,this.album.length)).fadeIn("fast"):this.$lightbox.find(".lb-number").hide(),this.$outerContainer.removeClass("animating"),this.$lightbox.find(".lb-dataContainer").fadeIn(this.options.resizeDuration,function(){return b.sizeOverlay()})},b.prototype.preloadNeighboringImages=function(){if(this.album.length>this.currentImageIndex+1){var a=new Image;a.src=this.album[this.currentImageIndex+1].link}if(this.currentImageIndex>0){var b=new Image;b.src=this.album[this.currentImageIndex-1].link}},b.prototype.enableKeyboardNav=function(){a(document).on("keyup.keyboard",a.proxy(this.keyboardAction,this))},b.prototype.disableKeyboardNav=function(){a(document).off(".keyboard")},b.prototype.keyboardAction=function(a){var b=27,c=37,d=39,e=a.keyCode,f=String.fromCharCode(e).toLowerCase();e===b||f.match(/x|o|c/)?this.end():"p"===f||e===c?0!==this.currentImageIndex?this.changeImage(this.currentImageIndex-1):this.options.wrapAround&&this.album.length>1&&this.changeImage(this.album.length-1):("n"===f||e===d)&&(this.currentImageIndex!==this.album.length-1?this.changeImage(this.currentImageIndex+1):this.options.wrapAround&&this.album.length>1&&this.changeImage(0))},b.prototype.end=function(){this.disableKeyboardNav(),a(window).off("resize",this.sizeOverlay),this.$lightbox.fadeOut(this.options.fadeDuration),this.$overlay.fadeOut(this.options.fadeDuration),a("select, object, embed").css({visibility:"visible"})},b}();a(function(){{var a=new b;new c(a)}})}).call(this);
13
-
14
-
15
-
16
- $('#sb_instagram.sbi').each(function(){
17
-
18
- var $self = $(this),
19
- $target = $self.find('#sbi_images'),
20
- $loadBtn = $self.find("#sbi_load"),
21
- imgRes = 'standard_resolution',
22
- //Convert styles JSON string to an object
23
- feedOptions = JSON.parse( this.getAttribute('data-options') ),
24
- getType = 'user';
25
-
26
- switch( this.getAttribute('data-res') ) {
27
- case 'thumb':
28
- imgRes = 'thumbnail';
29
- break;
30
- case 'medium':
31
- imgRes = 'low_resolution';
32
- break;
33
- default:
34
- imgRes = 'standard_resolution';
35
- }
36
-
37
- var userFeed = new instagramfeed({
38
- target: $target,
39
- get: getType,
40
- sortBy: feedOptions.sortby,
41
- resolution: imgRes,
42
- limit: parseInt( this.getAttribute('data-num') ),
43
- template: '<div class="sbi_item"><div class="sbi_photo_wrap"><a class="sbi_photo" href="{{link}}" target="_blank"><img src="{{image}}" alt="{{image}}" /></a></div></div>',
44
- userId: parseInt( this.getAttribute('data-id') ),
45
- accessToken: sb_instagram_js_options.sb_instagram_at,
46
- after: function() {
47
- if (this.hasNext()) {
48
- $loadBtn.show();
49
- } else {
50
- $loadBtn.hide();
51
- $self.css('padding-bottom', 0);
52
- }
53
- },
54
- success: function(){
55
-
56
- //Run 10ms after the feed is returned
57
- var sbiFeedLoaded = setInterval(function () {
58
-
59
- //Run custom JS
60
- if (typeof sbi_custom_js == 'function') sbi_custom_js();
61
-
62
- clearInterval(sbiFeedLoaded);
63
- }, 10);
64
65
}
66
- });
67
68
- $loadBtn.find('a').on("click", function() {
69
- userFeed.next();
70
});
71
72
- userFeed.run();
73
-
74
-
75
- });
76
-
77
-
78
79
80
8
//IE8 also doesn't offer the .bind() method triggered by the 'sortBy' property. Copy and paste the polyfill offered here:
9
if(!Function.prototype.bind){Function.prototype.bind=function(e){if(typeof this!=="function"){throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable")}var t=Array.prototype.slice.call(arguments,1),n=this,r=function(){},i=function(){return n.apply(this instanceof r&&e?this:e,t.concat(Array.prototype.slice.call(arguments)))};r.prototype=this.prototype;i.prototype=new r;return i}}
10
11
12
+ function sbi_init(){
13
+
14
+ $('#sb_instagram.sbi').each(function(){
15
+
16
+ var $self = $(this),
17
+ $target = $self.find('#sbi_images'),
18
+ $loadBtn = $self.find("#sbi_load"),
19
+ imgRes = 'standard_resolution',
20
+ //Convert styles JSON string to an object
21
+ feedOptions = JSON.parse( this.getAttribute('data-options') ),
22
+ getType = 'user',
23
+ sortby = 'none';
24
+
25
+ if( feedOptions.sortby !== '' ) sortby = feedOptions.sortby;
26
+
27
+ switch( this.getAttribute('data-res') ) {
28
+ case 'thumb':
29
+ imgRes = 'thumbnail';
30
+ break;
31
+ case 'medium':
32
+ imgRes = 'low_resolution';
33
+ break;
34
+ default:
35
+ imgRes = 'standard_resolution';
36
}
37
38
+ var userFeed = new instagramfeed({
39
+ target: $target,
40
+ get: getType,
41
+ sortBy: sortby,
42
+ resolution: imgRes,
43
+ limit: parseInt( this.getAttribute('data-num') ),
44
+ template: '<div class="sbi_item"><div class="sbi_photo_wrap"><a class="sbi_photo" href="{{link}}" target="_blank"><img src="{{image}}" alt="{{image}}" /></a></div></div>',
45
+ userId: parseInt( this.getAttribute('data-id') ),
46
+ accessToken: sb_instagram_js_options.sb_instagram_at,
47
+ after: function() {
48
+ if (this.hasNext()) {
49
+ $loadBtn.show();
50
+ } else {
51
+ $loadBtn.hide();
52
+ $self.css('padding-bottom', 0);
53
+ }
54
+ },
55
+ success: function(){
56
+
57
+ //Run 10ms after the feed is returned
58
+ var sbiFeedLoaded = setInterval(function () {
59
+
60
+ //Run custom JS
61
+ if (typeof sbi_custom_js == 'function') sbi_custom_js();
62
+
63
+ clearInterval(sbiFeedLoaded);
64
+ }, 10);
65
+
66
+ }
67
+ });
68
+
69
+ $loadBtn.find('a').click(function() {
70
+ userFeed.next();
71
+ });
72
+
73
+ userFeed.run();
74
+
75
+
76
});
77
78
+ }
79
+ sbi_init();
80
81
82