Instagram Feed - Version 2.0.1

Version Description

  • Tweak: Force cache of major caching plugins to clear when updating plugin to avoid issues with previous CSS/JavaScript files being cached
  • Tweak: Added version number to the end of JavaScript and CSS files to clear browser caches that are causing errors
  • Fix: Added back filter to allow using shortcode in a custom HTML widget
  • Fix: Added back settings to display bio information in header and change header size which were mistakenly removed in the last update
  • Fix: Fixed a PHP notice which might display under certain circumstances
Download this release

Release Info

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

Code changes from version 2.0 to 2.0.1

README.txt CHANGED
@@ -3,7 +3,7 @@ Contributors: smashballoon, craig-at-smash-balloon
3
Tags: Instagram, Instagram feed, Instagram photos, Instagram widget, Instagram gallery
4
Requires at least: 3.4
5
Tested up to: 5.2
6
- Stable tag: 2.0
7
License: GPLv2 or later
8
License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
@@ -324,6 +324,13 @@ We understand that sometimes you need help, have issues or just have questions.
324
* Plus more customization options added all the time!
325
326
== Changelog ==
327
= 2.0 =
328
* **MAJOR UDPATE**
329
* New: We've rebuilt the plugin from the ground up with a focus on performance and reliability. Your feeds are now loaded from the server using PHP removing the reliance on AJAX.
3
Tags: Instagram, Instagram feed, Instagram photos, Instagram widget, Instagram gallery
4
Requires at least: 3.4
5
Tested up to: 5.2
6
+ Stable tag: 2.0.1
7
License: GPLv2 or later
8
License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
324
* Plus more customization options added all the time!
325
326
== Changelog ==
327
+ = 2.0.1 =
328
+ * Tweak: Force cache of major caching plugins to clear when updating plugin to avoid issues with previous CSS/JavaScript files being cached
329
+ * Tweak: Added version number to the end of JavaScript and CSS files to clear browser caches that are causing errors
330
+ * Fix: Added back filter to allow using shortcode in a custom HTML widget
331
+ * Fix: Added back settings to display bio information in header and change header size which were mistakenly removed in the last update
332
+ * Fix: Fixed a PHP notice which might display under certain circumstances
333
+
334
= 2.0 =
335
* **MAJOR UDPATE**
336
* New: We've rebuilt the plugin from the ground up with a focus on performance and reliability. Your feeds are now loaded from the server using PHP removing the reliance on AJAX.
css/sb-instagram-2-0-1.css ADDED
@@ -0,0 +1,728 @@
1
+ /**************/
2
+ /*** LAYOUT ***/
3
+ /**************/
4
+
5
+ /* Feed container */
6
+ #sb_instagram {
7
+ width: 100%;
8
+ margin: 0 auto;
9
+ padding: 0;
10
+ -webkit-box-sizing: border-box;
11
+ -moz-box-sizing: border-box;
12
+ box-sizing: border-box;
13
+ }
14
+ #sb_instagram:after{
15
+ content: "";
16
+ display: table;
17
+ clear: both;
18
+ }
19
+
20
+ /*********************/
21
+ /*** STYLE OPTIONS ***/
22
+ /*********************/
23
+ #sb_instagram.sbi_fixed_height{
24
+ overflow: hidden;
25
+ overflow-y: auto;
26
+ -webkit-box-sizing: border-box;
27
+ -moz-box-sizing: border-box;
28
+ box-sizing: border-box;
29
+ }
30
+ #sb_instagram #sbi_images{
31
+ width: 100%;
32
+ float: left;
33
+ line-height: 0;
34
+
35
+ -webkit-box-sizing: border-box;
36
+ -moz-box-sizing: border-box;
37
+ box-sizing: border-box;
38
+ }
39
+
40
+ /* Items */
41
+ #sb_instagram #sbi_images .sbi_item{
42
+ display: -moz-inline-stack;
43
+ display: inline-block;
44
+ vertical-align: top;
45
+ zoom: 1;
46
+ *display: inline;
47
+
48
+ max-height: 1000px;
49
+ padding: inherit !important;
50
+ margin: 0 !important;
51
+ text-decoration: none;
52
+ opacity: 1;
53
+ overflow: hidden;
54
+
55
+ -webkit-box-sizing: border-box;
56
+ -moz-box-sizing: border-box;
57
+ box-sizing: border-box;
58
+
59
+ -webkit-transition: all 0.5s ease;
60
+ -moz-transition: all 0.5s ease;
61
+ -o-transition: all 0.5s ease;
62
+ -ms-transition: all 0.5s ease;
63
+ transition: all 0.5s ease;
64
+ }
65
+ /* Transition items in */
66
+ #sb_instagram #sbi_images .sbi_item.sbi_transition{
67
+ opacity: 0;
68
+ max-height: 0;
69
+ }
70
+
71
+ /* Cols */
72
+ #sb_instagram.sbi_col_1 #sbi_images .sbi_item{ width: 100%; }
73
+ #sb_instagram.sbi_col_2 #sbi_images .sbi_item{ width: 50%; }
74
+ #sb_instagram.sbi_col_3 #sbi_images .sbi_item{ width: 33.33%; }
75
+ #sb_instagram.sbi_col_4 #sbi_images .sbi_item{ width: 25%; }
76
+ #sb_instagram.sbi_col_5 #sbi_images .sbi_item{ width: 20%; }
77
+ #sb_instagram.sbi_col_6 #sbi_images .sbi_item{ width: 16.66%; }
78
+ #sb_instagram.sbi_col_7 #sbi_images .sbi_item{ width: 14.28%; }
79
+ #sb_instagram.sbi_col_8 #sbi_images .sbi_item{ width: 12.5%; }
80
+ #sb_instagram.sbi_col_9 #sbi_images .sbi_item{ width: 11.11%; }
81
+ #sb_instagram.sbi_col_10 #sbi_images .sbi_item{ width: 10%; }
82
+
83
+ /* Disable mobile layout */
84
+ #sb_instagram.sbi_col_1.sbi_disable_mobile #sbi_images .sbi_item{ width: 100%; }
85
+ #sb_instagram.sbi_col_2.sbi_disable_mobile #sbi_images .sbi_item{ width: 50%; }
86
+ #sb_instagram.sbi_col_3.sbi_disable_mobile #sbi_images .sbi_item{ width: 33.33%; }
87
+ #sb_instagram.sbi_col_4.sbi_disable_mobile #sbi_images .sbi_item{ width: 25%; }
88
+ #sb_instagram.sbi_col_5.sbi_disable_mobile #sbi_images .sbi_item{ width: 20%; }
89
+ #sb_instagram.sbi_col_6.sbi_disable_mobile #sbi_images .sbi_item{ width: 16.66%; }
90
+ #sb_instagram.sbi_col_7.sbi_disable_mobile #sbi_images .sbi_item{ width: 14.28%; }
91
+ #sb_instagram.sbi_col_8.sbi_disable_mobile #sbi_images .sbi_item{ width: 12.5%; }
92
+ #sb_instagram.sbi_col_9.sbi_disable_mobile #sbi_images .sbi_item{ width: 11.11%; }
93
+ #sb_instagram.sbi_col_10.sbi_disable_mobile #sbi_images .sbi_item{ width: 10%; }
94
+
95
+ /* Photos */
96
+ #sb_instagram .sbi_photo_wrap{
97
+ position: relative;
98
+ }
99
+ #sb_instagram .sbi_photo{
100
+ display: block;
101
+ text-decoration: none;
102
+ }
103
+ #sb_instagram .sbi_photo img{
104
+ width: 100%;
105
+ height: auto;
106
+ }
107
+ #sb_instagram .sbi_no_js img{
108
+ display: none;
109
+ }
110
+ #sb_instagram a,
111
+ #sb_instagram a:hover,
112
+ #sb_instagram a:focus,
113
+ #sb_instagram a:active{
114
+ outline: none;
115
+ }
116
+ #sb_instagram img{
117
+ display: block;
118
+ padding: 0 !important;
119
+ margin: 0 !important;
120
+ max-width: 100% !important;
121
+ opacity: 1 !important;
122
+ }
123
+ #sb_instagram .sbi_link{
124
+ display: none;
125
+ position: absolute;
126
+ bottom: 0;
127
+ right: 0;
128
+
129
+ width: 100%;
130
+ padding: 10px 0;
131
+ background: rgba(0,0,0,0.5);
132
+ text-align: center;
133
+ color: #fff;
134
+ font-size: 12px;
135
+ line-height: 1.1;
136
+ }
137
+ #sb_instagram .sbi_link a{
138
+ padding: 0 6px;
139
+ text-decoration: none;
140
+ color: #fff;
141
+ font-size: 12px;
142
+ line-height: 1.1;
143
+
144
+ display: -moz-inline-stack;
145
+ display: inline-block;
146
+ vertical-align: top;
147
+ zoom: 1;
148
+ *display: inline;
149
+ }
150
+ #sb_instagram .sbi_link .sbi_lightbox_link{
151
+ padding-bottom: 5px;
152
+ }
153
+ #sb_instagram .sbi_link a:hover,
154
+ #sb_instagram .sbi_link a:focus{
155
+ text-decoration: underline;
156
+ }
157
+ #sb_instagram .sbi_photo_wrap:hover .sbi_link,
158
+ #sb_instagram .sbi_photo_wrap:focus .sbi_link{
159
+ display: block;
160
+ }
161
+
162
+ /* Videos */
163
+ #sb_instagram svg:not(:root).svg-inline--fa {
164
+ height: 1em;
165
+ }
166
+
167
+ #sb_instagram .sbi_type_video .sbi_playbtn,
168
+ #sb_instagram .sbi_type_carousel .sbi_playbtn,
169
+ .sbi_type_carousel .fa-clone,
170
+ #sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play,
171
+ #sb_instagram .sbi_type_video .svg-inline--fa.fa-play{
172
+ display: block !important;
173
+ position: absolute;
174
+ z-index: 1;
175
+
176
+ color: #fff;
177
+ color: rgba(255,255,255,0.9);
178
+ font-style: normal !important;
179
+ text-shadow: 0 0 8px rgba(0,0,0,0.8);
180
+ }
181
+ #sb_instagram .sbi_type_video .sbi_playbtn,
182
+ #sb_instagram .sbi_type_carousel .sbi_playbtn {
183
+ z-index: 2;
184
+ top: 50%;
185
+ left: 50%;
186
+ margin-top: -24px;
187
+ margin-left: -19px;
188
+ padding: 0;
189
+ font-size: 48px;
190
+ }
191
+ #sb_instagram .sbi_type_carousel .fa-clone{
192
+ right: 12px;
193
+ top: 12px;
194
+ font-size: 24px;
195
+ text-shadow: 0 0 8px rgba(0,0,0,0.3);
196
+ }
197
+ .sbi_type_carousel svg.fa-clone,
198
+ #sb_instagram .sbi_type_video .svg-inline--fa.fa-play,
199
+ #sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play{
200
+ -webkit-filter: drop-shadow( 0px 0px 2px rgba(0,0,0,.4) );
201
+ filter: drop-shadow( 0px 0px 2px rgba(0,0,0,.4) );
202
+ }
203
+
204
+ /* Loader */
205
+ #sb_instagram .sbi_loader{
206
+ width: 20px;
207
+ height: 20px;
208
+
209
+ position: relative;
210
+ top: 50%;
211
+ left: 50%;
212
+ margin: -10px 0 0 -10px;
213
+ background-color: #000;
214
+ background-color: rgba(0,0,0,0.5);
215
+
216
+ border-radius: 100%;
217
+ -webkit-animation: sbi-sk-scaleout 1.0s infinite ease-in-out;
218
+ animation: sbi-sk-scaleout 1.0s infinite ease-in-out;
219
+ }
220
+ /* Loader in button */
221
+ #sb_instagram #sbi_load .sbi_loader{
222
+ position: absolute;
223
+ margin-top: -11px;
224
+ background-color: #fff;
225
+ opacity: 1;
226
+ }
227
+ @-webkit-keyframes sbi-sk-scaleout {
228
+ 0% { -webkit-transform: scale(0) }
229
+ 100% {
230
+ -webkit-transform: scale(1.0);
231
+ opacity: 0;
232
+ }
233
+ }
234
+ @keyframes sbi-sk-scaleout {
235
+ 0% {
236
+ -webkit-transform: scale(0);
237
+ -ms-transform: scale(0);
238
+ transform: scale(0);
239
+ } 100% {
240
+ -webkit-transform: scale(1.0);
241
+ -ms-transform: scale(1.0);
242
+ transform: scale(1.0);
243
+ opacity: 0;
244
+ }
245
+ }
246
+
247
+ #sb_instagram .fa-spin,
248
+ #sbi_lightbox .fa-spin{
249
+ -webkit-animation: fa-spin 2s infinite linear;
250
+ animation: fa-spin 2s infinite linear
251
+ }
252
+
253
+ #sb_instagram .fa-pulse,
254
+ #sbi_lightbox .fa-pulse{
255
+ -webkit-animation: fa-spin 1s infinite steps(8);
256
+ animation: fa-spin 1s infinite steps(8)
257
+ }
258
+
259
+ @-webkit-keyframes fa-spin {
260
+ 0% {
261
+ -webkit-transform: rotate(0deg);
262
+ transform: rotate(0deg)
263
+ }
264
+ 100% {
265
+ -webkit-transform: rotate(359deg);
266
+ transform: rotate(359deg)
267
+ }
268
+ }
269
+
270
+ @keyframes fa-spin {
271
+ 0% {
272
+ -webkit-transform: rotate(0deg);
273
+ transform: rotate(0deg)
274
+ }
275
+ 100% {
276
+ -webkit-transform: rotate(359deg);
277
+ transform: rotate(359deg)
278
+ }
279
+ }
280
+ /* Screen reader */
281
+ .sbi-screenreader{text-indent: -9999px !important;display: block !important;width: 0 !important;height: 0 !important;line-height: 0 !important;}
282
+
283
+ /* HEADER */
284
+ #sb_instagram .sb_instagram_header{
285
+ float: left;
286
+ clear: both;
287
+ margin: 0 0 15px 0;
288
+ padding: 0;
289
+ line-height: 1.2;
290
+ width: 100%;
291
+ }
292
+ #sb_instagram .sb_instagram_header a{
293
+ float: left;
294
+ display: block;
295
+ /*width: 100%;*/
296
+ min-width: 100%\9;
297
+ text-decoration: none;
298
+ transition: color 0.5s ease;
299
+ }
300
+ /** Medium Header */
301
+ /* Only use medium & large headers on devices above 480px */
302
+ @media all and (min-width: 480px){
303
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_img {
304
+ width: 80px;
305
+ height: 80px;
306
+ border-radius: 40px;
307
+ }
308
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_img img {
309
+ width: 80px;
310
+ height: 80px;
311
+ border-radius: 40px;
312
+ }
313
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3 {
314
+ font-size: 20px;
315
+ }
316
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info,
317
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio{
318
+ font-size: 14px;
319
+ }
320
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3,
321
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info,
322
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio{
323
+ margin-left: 95px !important;
324
+ line-height: 1.4
325
+ }
326
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3{
327
+ margin-right: -85px !important;
328
+ }
329
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info{
330
+ margin-top: 4px !important;
331
+ }
332
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text.sbi_no_bio h3{
333
+ padding-top: 20px !important;
334
+ }
335
+ /** Large Header */
336
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_img {
337
+ width: 120px;
338
+ height: 120px;
339
+ border-radius: 60px;
340
+ }
341
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_img img {
342
+ width: 120px;
343
+ height: 120px;
344
+ border-radius: 60px;
345
+ }
346
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3 {
347
+ font-size: 28px;
348
+ }
349
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info,
350
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio{
351
+ font-size: 16px;
352
+ }
353
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3,
354
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info,
355
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio{
356
+ margin-left: 140px !important;
357
+ line-height: 1.5;
358
+ }
359
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3{
360
+ margin-right: -120px !important;
361
+ }
362
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info{
363
+ margin-top: 12px !important;
364
+ }
365
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text.sbi_no_bio h3{
366
+ padding-top: 32px !important;
367
+ }
368
+ }
369
+
370
+ /* Header profile pic */
371
+ #sb_instagram .sb_instagram_header .sbi_header_img{
372
+ float: left;
373
+ position: relative;
374
+ width: 50px;
375
+ margin: 0 0 0 -100% !important;
376
+ overflow: hidden;
377
+
378
+ -moz-border-radius: 40px;
379
+ -webkit-border-radius: 40px;
380
+ border-radius: 40px;
381
+ }
382
+ #sb_instagram .sb_instagram_header .sbi_header_img img{
383
+ float: left;
384
+ margin: 0 !important;
385
+ padding: 0 !important;
386
+ border: none !important;
387
+
388
+ -moz-border-radius: 40px;
389
+ -webkit-border-radius: 40px;
390
+ border-radius: 40px;
391
+ }
392
+ /* Profile pic hover */
393
+ /* Profile pic hover */
394
+ #sb_instagram .sb_instagram_header .sbi_header_img_hover{
395
+ opacity: 0;
396
+ position: absolute;
397
+ width: 100%;
398
+ top: 0;
399
+ bottom: 0;
400
+ left: 0;
401
+ text-align: center;
402
+ color: #fff;
403
+ background: rgba(0,0,0,0.75);
404
+ }
405
+
406
+ #sb_instagram .sb_instagram_header .sbi_header_img_hover .sbi_new_logo{
407
+ position: absolute;
408
+ top: 50%;
409
+ left: 50%;
410
+ margin-top: -12px;
411
+ margin-left: -12px;
412
+ width: 24px;
413
+ height: 24px;
414
+ font-size: 24px;
415
+ }
416
+ #sb_instagram .sb_instagram_header .sbi_header_img_hover i {
417
+ overflow: hidden;
418
+ background: url('../img/small-logo.png') no-repeat 0 0;
419
+ }
420
+ #sb_instagram .sb_instagram_header .sbi_header_img_hover{
421
+ z-index: 2;
422
+ transition: opacity 0.4s ease-in-out;
423
+ }
424
+ #sb_instagram .sb_instagram_header .sbi_fade_in{
425
+ opacity: 1;
426
+ transition: opacity 0.2s ease-in-out;
427
+ }
428
+ #sb_instagram .sb_instagram_header .sbi_header_img_hover{
429
+ position: absolute;
430
+ width: 100%;
431
+ top: 0;
432
+ bottom: 0;
433
+ left: 0;
434
+ text-align: center;
435
+ color: #fff;
436
+ background: rgba(0,0,0,0.75);
437
+
438
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
439
+ filter: alpha(opacity=0);
440
+ -moz-opacity: 0;
441
+ -khtml-opacity: 0;
442
+ opacity: 0;
443
+ border-radius: 40px;
444
+ transition: opacity 0.2s;
445
+ }
446
+ /* Fade the Instagram icon in when hovering on the header */
447
+ #sb_instagram .sb_instagram_header a:hover .sbi_header_img_hover,
448
+ #sb_instagram .sb_instagram_header a:focus .sbi_header_img_hover{
449
+ opacity: 1;
450
+ }
451
+ /* Header text */
452
+ #sb_instagram .sb_instagram_header .sbi_header_text{
453
+ float: left;
454
+ width: 100%;
455
+ padding-top: 5px;
456
+ }
457
+ #sb_instagram .sb_instagram_header a{
458
+ text-decoration: none;
459
+ }
460
+ #sb_instagram .sb_instagram_header .sbi_header_text .sbi_bio,
461
+ #sb_instagram .sb_instagram_header .sbi_header_text h3{
462
+ float: left;
463
+ clear: both;
464
+ width: auto;
465
+ margin: 0 0 0 60px !important;
466
+ padding: 0 !important;
467
+ }
468
+ #sb_instagram .sb_instagram_header h3{
469
+ font-size: 16px;
470
+ line-height: 1.3;
471
+ }
472
+ #sb_instagram .sb_instagram_header p{
473
+ font-size: 13px;
474
+ line-height: 1.3;
475
+ }
476
+ #sb_instagram .sb_instagram_header .sbi_header_text img.emoji{
477
+ margin-right: 3px !important;
478
+ }
479
+
480
+ /* No bio */
481
+ #sb_instagram .sb_instagram_header .sbi_header_text.sbi_no_bio h3{
482
+ padding-top: 9px !important;
483
+ }
484
+ #sb_instagram .sb_instagram_header .sbi_header_text.sbi_no_bio .sbi_bio_info{
485
+ clear: both;
486
+ }
487
+
488
+
489
+ /* Buttons */
490
+ #sb_instagram #sbi_load{
491
+ float: left;
492
+ clear: both;
493
+ width: 100%;
494
+ text-align: center;
495
+ }
496
+ #sb_instagram #sbi_load .fa-spinner{
497
+ display: none;
498
+ position: absolute;
499
+ top: 50%;
500
+ left: 50%;
501
+ margin: -8px 0 0 -7px;
502
+ font-size: 15px;
503
+ }
504
+ #sb_instagram #sbi_load{
505
+ opacity: 1;
506
+ transition: all 0.5s ease-in;
507
+ }
508
+ #sb_instagram .sbi_load_btn .sbi_btn_text, #sb_instagram .sbi_load_btn .sbi_loader{
509
+ opacity: 1;
510
+ transition: all 0.1s ease-in;
511
+ }
512
+ #sb_instagram .sbi_hidden{
513
+ opacity: 0 !important;
514
+ }
515
+ #sb_instagram #sbi_load .sbi_load_btn,
516
+ #sb_instagram .sbi_follow_btn a{
517
+ display: -moz-inline-stack;
518
+ display: inline-block;
519
+ vertical-align: top;
520
+ zoom: 1;
521
+ *display: inline;
522
+
523
+ padding: 7px 14px;
524
+ margin: 5px auto 0 auto;
525
+ background: #333;
526
+ color: #eee;
527
+ border: none;
528
+ color: #fff;
529
+ text-decoration: none;
530
+ font-size: 13px;
531
+ line-height: 1.5;
532
+
533
+ -moz-border-radius: 4px;
534
+ -webkit-border-radius: 4px;
535
+ border-radius: 4px;
536
+
537
+ -webkit-box-sizing: border-box;
538
+ -moz-box-sizing: border-box;
539
+ box-sizing: border-box;
540
+ }
541
+ #sb_instagram #sbi_load .sbi_load_btn {
542
+ position: relative;
543
+ }
544
+ /* Follow button */
545
+ #sb_instagram .sbi_follow_btn{
546
+ display: -moz-inline-stack;
547
+ display: inline-block;
548
+ vertical-align: top;
549
+ zoom: 1;
550
+ *display: inline;
551
+ text-align: center;
552
+ }
553
+ #sb_instagram .sbi_follow_btn.sbi_top{
554
+ display: block;
555
+ margin-bottom: 5px;
556
+ }
557
+ #sb_instagram .sbi_follow_btn a{
558
+ background: #408bd1;
559
+ color: #fff;
560
+ }
561
+ #sb_instagram .sbi_follow_btn a,
562
+ #sb_instagram .sbi_follow_btn a,
563
+ #sb_instagram #sbi_load .sbi_load_btn{
564
+ transition: all 0.1s ease-in;
565
+ }
566
+ /* Hover state for default colors */
567
+ #sb_instagram #sbi_load .sbi_load_btn:hover{
568
+ outline: none;
569
+ box-shadow: inset 0 0 20px 20px rgba(255,255,255,0.25);
570
+ }
571
+ #sb_instagram .sbi_follow_btn a:hover,
572
+ #sb_instagram .sbi_follow_btn a:focus{
573
+ outline: none;
574
+ box-shadow: inset 0 0 10px 20px #359dff;
575
+ }
576
+ /* If a custom color is applied then just use opacity for the hover effect */
577
+ #sb_instagram .sbi_follow_btn.sbi_custom a:hover,
578
+ #sb_instagram .sbi_follow_btn.sbi_custom a:focus,
579
+ #sb_instagram #sbi_load .sbi_load_btn.sbi_custom:hover{
580
+ box-shadow: inset 0 0 20px 20px rgba(255,255,255,0.15);
581
+ }
582
+ /* Active state */
583
+ #sb_instagram .sbi_follow_btn a:active,
584
+ #sb_instagram #sbi_load .sbi_load_btn:active{
585
+ box-shadow: inset 0 0 10px 20px rgba(0,0,0,0.3);
586
+ }
587
+
588
+ #sb_instagram .sbi_follow_btn .fa,
589
+ #sb_instagram .sbi_follow_btn svg{
590
+ margin-bottom: -1px;
591
+ margin-right: 7px;
592
+ font-size: 15px;
593
+ }
594
+ #sb_instagram .sbi_follow_btn svg{
595
+ vertical-align: -.125em;
596
+ }
597
+ #sb_instagram #sbi_load .sbi_follow_btn{
598
+ margin-left: 5px;
599
+ }
600
+
601
+ /* Error messages */
602
+ #sb_instagram .sb_instagram_error{
603
+ width: 100%;
604
+ text-align: center;
605
+ line-height: 1.4;
606
+ }
607
+
608
+ /* Mod only error msgs */
609
+ #sbi_mod_error{
610
+ display: none;
611
+ border: 1px solid #ddd;
612
+ background: #eee;
613
+ color: #333;
614
+ margin: 10px 0 0;
615
+ padding: 10px 15px;
616
+ font-size: 13px;
617
+ text-align: center;
618
+ clear: both;
619
+
620
+ -moz-border-radius: 4px;
621
+ -webkit-border-radius: 4px;
622
+ border-radius: 4px;
623
+ }
624
+ #sbi_mod_error p{
625
+ padding: 5px 0 !important;
626
+ margin: 0 !important;
627
+ line-height: 1.3 !important;
628
+ }
629
+ #sbi_mod_error ol,
630
+ #sbi_mod_error ul{
631
+ padding: 5px 0 5px 20px !important;
632
+ margin: 0 !important;
633
+ }
634
+ #sbi_mod_error li{
635
+ padding: 1px 0 !important;
636
+ margin: 0 !important;
637
+ }
638
+ #sbi_mod_error span{
639
+ font-size: 12px;
640
+ }
641
+
642
+ /* Medium */
643
+ #sb_instagram.sbi_medium .sbi_playbtn,
644
+ #sb_instagram.sbi_medium .sbi_photo_wrap .svg-inline--fa.fa-play{
645
+ margin-top: -12px;
646
+ margin-left: -9px;
647
+ font-size: 23px;
648
+ }
649
+ #sb_instagram.sbi_medium .sbi_type_carousel .sbi_photo_wrap .fa-clone{
650
+ right: 8px;
651
+ top: 8px;
652
+ font-size: 18px;
653
+ }
654
+ /* Small */
655
+ #sb_instagram.sbi_small .sbi_playbtn,
656
+ #sb_instagram.sbi_small .sbi_photo_wrap .svg-inline--fa.fa-play{
657
+ margin-top: -9px;
658
+ margin-left: -7px;
659
+ font-size: 18px;
660
+ }
661
+ #sb_instagram.sbi_small .sbi_type_carousel .sbi_photo_wrap .fa-clone{
662
+ right: 5px;
663
+ top: 5px;
664
+ font-size: 12px;
665
+ }
666
+
667
+ /* Media queries */
668
+ @media all and (max-width: 640px){
669
+ /* Make 3-6 cols into 2 col */
670
+ #sb_instagram.sbi_col_3 #sbi_images .sbi_item,
671
+ #sb_instagram.sbi_col_4 #sbi_images .sbi_item,
672
+ #sb_instagram.sbi_col_5 #sbi_images .sbi_item,
673
+ #sb_instagram.sbi_col_6 #sbi_images .sbi_item{
674
+ width: 50%;
675
+ }
676
+ /* Make 7-10 cols into 4 col */
677
+ #sb_instagram.sbi_col_7 #sbi_images .sbi_item,
678
+ #sb_instagram.sbi_col_8 #sbi_images .sbi_item,
679
+ #sb_instagram.sbi_col_9 #sbi_images .sbi_item,
680
+ #sb_instagram.sbi_col_10 #sbi_images .sbi_item{
681
+ width: 25%;
682
+ }
683
+ /* On mobile make the min-width 100% */
684
+ #sb_instagram.sbi_width_resp{
685
+ width: 100% !important;
686
+ }
687
+ }
688
+ @media all and (max-width: 480px){
689
+ /* Make all cols into 1 col */
690
+ #sb_instagram.sbi_col_3 #sbi_images .sbi_item,
691
+ #sb_instagram.sbi_col_4 #sbi_images .sbi_item,
692
+ #sb_instagram.sbi_col_5 #sbi_images .sbi_item,
693
+ #sb_instagram.sbi_col_6 #sbi_images .sbi_item,
694
+ #sb_instagram.sbi_col_7 #sbi_images .sbi_item,
695
+ #sb_instagram.sbi_col_8 #sbi_images .sbi_item,
696
+ #sb_instagram.sbi_col_9 #sbi_images .sbi_item,
697
+ #sb_instagram.sbi_col_10 #sbi_images .sbi_item{
698
+ width: 100%;
699
+ }
700
+ }
701
+
702
+ /* NO JS */
703
+ #sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo_wrap{
704
+ box-sizing: border-box;
705
+ position: relative;
706
+ overflow: hidden;
707
+ }
708
+ #sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo_wrap:before {
709
+ content: "";
710
+ display: block;
711
+ padding-top: 100%;
712
+ z-index: -300;
713
+ }
714
+ #sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo {
715
+ position: absolute;
716
+ top: 0;
717
+ left: 0;
718
+ bottom: 0;
719
+ right: 0;
720
+ }
721
+ #sb_instagram.sbi_no_js #sbi_images .sbi_item.sbi_transition {
722
+ opacity: 1;
723
+ max-height: 640px;
724
+ }
725
+ #sb_instagram.sbi_no_js .sbi_photo img,
726
+ #sb_instagram.sbi_no_js .sbi_load_btn{
727
+ display: none;
728
+ }
css/sb-instagram-2-0-1.min.css ADDED
@@ -0,0 +1 @@
1
+ #sb_instagram{width:100%;margin:0 auto;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#sb_instagram:after{content:"";display:table;clear:both}#sb_instagram.sbi_fixed_height{overflow:hidden;overflow-y:auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#sb_instagram #sbi_images{width:100%;float:left;line-height:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#sb_instagram #sbi_images .sbi_item{display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1;max-height:1000px;padding:inherit!important;margin:0!important;text-decoration:none;opacity:1;overflow:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;-ms-transition:all .5s ease;transition:all .5s ease}#sb_instagram #sbi_images .sbi_item.sbi_transition{opacity:0;max-height:0}#sb_instagram.sbi_col_1 #sbi_images .sbi_item{width:100%}#sb_instagram.sbi_col_2 #sbi_images .sbi_item{width:50%}#sb_instagram.sbi_col_3 #sbi_images .sbi_item{width:33.33%}#sb_instagram.sbi_col_4 #sbi_images .sbi_item{width:25%}#sb_instagram.sbi_col_5 #sbi_images .sbi_item{width:20%}#sb_instagram.sbi_col_6 #sbi_images .sbi_item{width:16.66%}#sb_instagram.sbi_col_7 #sbi_images .sbi_item{width:14.28%}#sb_instagram.sbi_col_8 #sbi_images .sbi_item{width:12.5%}#sb_instagram.sbi_col_9 #sbi_images .sbi_item{width:11.11%}#sb_instagram.sbi_col_10 #sbi_images .sbi_item{width:10%}#sb_instagram.sbi_col_1.sbi_disable_mobile #sbi_images .sbi_item{width:100%}#sb_instagram.sbi_col_2.sbi_disable_mobile #sbi_images .sbi_item{width:50%}#sb_instagram.sbi_col_3.sbi_disable_mobile #sbi_images .sbi_item{width:33.33%}#sb_instagram.sbi_col_4.sbi_disable_mobile #sbi_images .sbi_item{width:25%}#sb_instagram.sbi_col_5.sbi_disable_mobile #sbi_images .sbi_item{width:20%}#sb_instagram.sbi_col_6.sbi_disable_mobile #sbi_images .sbi_item{width:16.66%}#sb_instagram.sbi_col_7.sbi_disable_mobile #sbi_images .sbi_item{width:14.28%}#sb_instagram.sbi_col_8.sbi_disable_mobile #sbi_images .sbi_item{width:12.5%}#sb_instagram.sbi_col_9.sbi_disable_mobile #sbi_images .sbi_item{width:11.11%}#sb_instagram.sbi_col_10.sbi_disable_mobile #sbi_images .sbi_item{width:10%}#sb_instagram .sbi_photo_wrap{position:relative}#sb_instagram .sbi_photo{display:block;text-decoration:none}#sb_instagram .sbi_photo img{width:100%;height:auto}#sb_instagram .sbi_no_js img{display:none}#sb_instagram a,#sb_instagram a:active,#sb_instagram a:focus,#sb_instagram a:hover{outline:0}#sb_instagram img{display:block;padding:0!important;margin:0!important;max-width:100%!important;opacity:1!important}#sb_instagram .sbi_link{display:none;position:absolute;bottom:0;right:0;width:100%;padding:10px 0;background:rgba(0,0,0,.5);text-align:center;color:#fff;font-size:12px;line-height:1.1}#sb_instagram .sbi_link a{padding:0 6px;text-decoration:none;color:#fff;font-size:12px;line-height:1.1;display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1}#sb_instagram .sbi_link .sbi_lightbox_link{padding-bottom:5px}#sb_instagram .sbi_link a:focus,#sb_instagram .sbi_link a:hover{text-decoration:underline}#sb_instagram .sbi_photo_wrap:focus .sbi_link,#sb_instagram .sbi_photo_wrap:hover .sbi_link{display:block}#sb_instagram svg:not(:root).svg-inline--fa{height:1em}#sb_instagram .sbi_type_carousel .sbi_playbtn,#sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play,#sb_instagram .sbi_type_video .sbi_playbtn,#sb_instagram .sbi_type_video .svg-inline--fa.fa-play,.sbi_type_carousel .fa-clone{display:block!important;position:absolute;z-index:1;color:#fff;color:rgba(255,255,255,.9);font-style:normal!important;text-shadow:0 0 8px rgba(0,0,0,.8)}#sb_instagram .sbi_type_carousel .sbi_playbtn,#sb_instagram .sbi_type_video .sbi_playbtn{z-index:2;top:50%;left:50%;margin-top:-24px;margin-left:-19px;padding:0;font-size:48px}#sb_instagram .sbi_type_carousel .fa-clone{right:12px;top:12px;font-size:24px;text-shadow:0 0 8px rgba(0,0,0,.3)}#sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play,#sb_instagram .sbi_type_video .svg-inline--fa.fa-play,.sbi_type_carousel svg.fa-clone{-webkit-filter:drop-shadow( 0 0 2px rgba(0,0,0,.4) );filter:drop-shadow( 0 0 2px rgba(0,0,0,.4) )}#sb_instagram .sbi_loader{width:20px;height:20px;position:relative;top:50%;left:50%;margin:-10px 0 0 -10px;background-color:#000;background-color:rgba(0,0,0,.5);border-radius:100%;-webkit-animation:sbi-sk-scaleout 1s infinite ease-in-out;animation:sbi-sk-scaleout 1s infinite ease-in-out}#sb_instagram #sbi_load .sbi_loader{position:absolute;margin-top:-11px;background-color:#fff;opacity:1}@-webkit-keyframes sbi-sk-scaleout{0%{-webkit-transform:scale(0)}100%{-webkit-transform:scale(1);opacity:0}}@keyframes sbi-sk-scaleout{0%{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:0}}#sb_instagram .fa-spin,#sbi_lightbox .fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}#sb_instagram .fa-pulse,#sbi_lightbox .fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.sbi-screenreader{text-indent:-9999px!important;display:block!important;width:0!important;height:0!important;line-height:0!important}#sb_instagram .sb_instagram_header{float:left;clear:both;margin:0 0 15px 0;padding:0;line-height:1.2;width:100%}#sb_instagram .sb_instagram_header a{float:left;display:block;text-decoration:none;transition:color .5s ease}@media all and (min-width:480px){#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_img{width:80px;height:80px;border-radius:40px}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_img img{width:80px;height:80px;border-radius:40px}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3{font-size:20px}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio,#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info{font-size:14px}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio,#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info,#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3{margin-left:95px!important;line-height:1.4}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3{margin-right:-85px!important}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info{margin-top:4px!important}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text.sbi_no_bio h3{padding-top:20px!important}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_img{width:120px;height:120px;border-radius:60px}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_img img{width:120px;height:120px;border-radius:60px}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3{font-size:28px}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio,#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info{font-size:16px}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio,#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info,#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3{margin-left:140px!important;line-height:1.5}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3{margin-right:-120px!important}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info{margin-top:12px!important}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text.sbi_no_bio h3{padding-top:32px!important}}#sb_instagram .sb_instagram_header .sbi_header_img{float:left;position:relative;width:50px;margin:0 0 0 -100%!important;overflow:hidden;-moz-border-radius:40px;-webkit-border-radius:40px;border-radius:40px}#sb_instagram .sb_instagram_header .sbi_header_img img{float:left;margin:0!important;padding:0!important;border:none!important;-moz-border-radius:40px;-webkit-border-radius:40px;border-radius:40px}#sb_instagram .sb_instagram_header .sbi_header_img_hover{opacity:0;position:absolute;width:100%;top:0;bottom:0;left:0;text-align:center;color:#fff;background:rgba(0,0,0,.75)}#sb_instagram .sb_instagram_header .sbi_header_img_hover .sbi_new_logo{position:absolute;top:50%;left:50%;margin-top:-12px;margin-left:-12px;width:24px;height:24px;font-size:24px}#sb_instagram .sb_instagram_header .sbi_header_img_hover i{overflow:hidden;background:url(../img/small-logo.png) no-repeat 0 0}#sb_instagram .sb_instagram_header .sbi_header_img_hover{z-index:2;transition:opacity .4s ease-in-out}#sb_instagram .sb_instagram_header .sbi_fade_in{opacity:1;transition:opacity .2s ease-in-out}#sb_instagram .sb_instagram_header .sbi_header_img_hover{position:absolute;width:100%;top:0;bottom:0;left:0;text-align:center;color:#fff;background:rgba(0,0,0,.75);-moz-opacity:0;-khtml-opacity:0;opacity:0;border-radius:40px;transition:opacity .2s}#sb_instagram .sb_instagram_header a:focus .sbi_header_img_hover,#sb_instagram .sb_instagram_header a:hover .sbi_header_img_hover{opacity:1}#sb_instagram .sb_instagram_header .sbi_header_text{float:left;width:100%;padding-top:5px}#sb_instagram .sb_instagram_header a{text-decoration:none}#sb_instagram .sb_instagram_header .sbi_header_text .sbi_bio,#sb_instagram .sb_instagram_header .sbi_header_text h3{float:left;clear:both;width:auto;margin:0 0 0 60px!important;padding:0!important}#sb_instagram .sb_instagram_header h3{font-size:16px;line-height:1.3}#sb_instagram .sb_instagram_header p{font-size:13px;line-height:1.3}#sb_instagram .sb_instagram_header .sbi_header_text img.emoji{margin-right:3px!important}#sb_instagram .sb_instagram_header .sbi_header_text.sbi_no_bio h3{padding-top:9px!important}#sb_instagram .sb_instagram_header .sbi_header_text.sbi_no_bio .sbi_bio_info{clear:both}#sb_instagram #sbi_load{float:left;clear:both;width:100%;text-align:center}#sb_instagram #sbi_load .fa-spinner{display:none;position:absolute;top:50%;left:50%;margin:-8px 0 0 -7px;font-size:15px}#sb_instagram #sbi_load{opacity:1;transition:all .5s ease-in}#sb_instagram .sbi_load_btn .sbi_btn_text,#sb_instagram .sbi_load_btn .sbi_loader{opacity:1;transition:all .1s ease-in}#sb_instagram .sbi_hidden{opacity:0!important}#sb_instagram #sbi_load .sbi_load_btn,#sb_instagram .sbi_follow_btn a{display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1;padding:7px 14px;margin:5px auto 0 auto;background:#333;color:#eee;border:none;color:#fff;text-decoration:none;font-size:13px;line-height:1.5;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#sb_instagram #sbi_load .sbi_load_btn{position:relative}#sb_instagram .sbi_follow_btn{display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1;text-align:center}#sb_instagram .sbi_follow_btn.sbi_top{display:block;margin-bottom:5px}#sb_instagram .sbi_follow_btn a{background:#408bd1;color:#fff}#sb_instagram #sbi_load .sbi_load_btn,#sb_instagram .sbi_follow_btn a{transition:all .1s ease-in}#sb_instagram #sbi_load .sbi_load_btn:hover{outline:0;box-shadow:inset 0 0 20px 20px rgba(255,255,255,.25)}#sb_instagram .sbi_follow_btn a:focus,#sb_instagram .sbi_follow_btn a:hover{outline:0;box-shadow:inset 0 0 10px 20px #359dff}#sb_instagram #sbi_load .sbi_load_btn.sbi_custom:hover,#sb_instagram .sbi_follow_btn.sbi_custom a:focus,#sb_instagram .sbi_follow_btn.sbi_custom a:hover{box-shadow:inset 0 0 20px 20px rgba(255,255,255,.15)}#sb_instagram #sbi_load .sbi_load_btn:active,#sb_instagram .sbi_follow_btn a:active{box-shadow:inset 0 0 10px 20px rgba(0,0,0,.3)}#sb_instagram .sbi_follow_btn .fa,#sb_instagram .sbi_follow_btn svg{margin-bottom:-1px;margin-right:7px;font-size:15px}#sb_instagram .sbi_follow_btn svg{vertical-align:-.125em}#sb_instagram #sbi_load .sbi_follow_btn{margin-left:5px}#sb_instagram .sb_instagram_error{width:100%;text-align:center;line-height:1.4}#sbi_mod_error{display:none;border:1px solid #ddd;background:#eee;color:#333;margin:10px 0 0;padding:10px 15px;font-size:13px;text-align:center;clear:both;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px}#sbi_mod_error p{padding:5px 0!important;margin:0!important;line-height:1.3!important}#sbi_mod_error ol,#sbi_mod_error ul{padding:5px 0 5px 20px!important;margin:0!important}#sbi_mod_error li{padding:1px 0!important;margin:0!important}#sbi_mod_error span{font-size:12px}#sb_instagram.sbi_medium .sbi_photo_wrap .svg-inline--fa.fa-play,#sb_instagram.sbi_medium .sbi_playbtn{margin-top:-12px;margin-left:-9px;font-size:23px}#sb_instagram.sbi_medium .sbi_type_carousel .sbi_photo_wrap .fa-clone{right:8px;top:8px;font-size:18px}#sb_instagram.sbi_small .sbi_photo_wrap .svg-inline--fa.fa-play,#sb_instagram.sbi_small .sbi_playbtn{margin-top:-9px;margin-left:-7px;font-size:18px}#sb_instagram.sbi_small .sbi_type_carousel .sbi_photo_wrap .fa-clone{right:5px;top:5px;font-size:12px}@media all and (max-width:640px){#sb_instagram.sbi_col_3 #sbi_images .sbi_item,#sb_instagram.sbi_col_4 #sbi_images .sbi_item,#sb_instagram.sbi_col_5 #sbi_images .sbi_item,#sb_instagram.sbi_col_6 #sbi_images .sbi_item{width:50%}#sb_instagram.sbi_col_10 #sbi_images .sbi_item,#sb_instagram.sbi_col_7 #sbi_images .sbi_item,#sb_instagram.sbi_col_8 #sbi_images .sbi_item,#sb_instagram.sbi_col_9 #sbi_images .sbi_item{width:25%}#sb_instagram.sbi_width_resp{width:100%!important}}@media all and (max-width:480px){#sb_instagram.sbi_col_10 #sbi_images .sbi_item,#sb_instagram.sbi_col_3 #sbi_images .sbi_item,#sb_instagram.sbi_col_4 #sbi_images .sbi_item,#sb_instagram.sbi_col_5 #sbi_images .sbi_item,#sb_instagram.sbi_col_6 #sbi_images .sbi_item,#sb_instagram.sbi_col_7 #sbi_images .sbi_item,#sb_instagram.sbi_col_8 #sbi_images .sbi_item,#sb_instagram.sbi_col_9 #sbi_images .sbi_item{width:100%}}#sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo_wrap{box-sizing:border-box;position:relative;overflow:hidden}#sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo_wrap:before{content:"";display:block;padding-top:100%;z-index:-300}#sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo{position:absolute;top:0;left:0;bottom:0;right:0}#sb_instagram.sbi_no_js #sbi_images .sbi_item.sbi_transition{opacity:1;max-height:640px}#sb_instagram.sbi_no_js .sbi_load_btn,#sb_instagram.sbi_no_js .sbi_photo img{display:none}
css/sb-instagram.css CHANGED
@@ -323,13 +323,13 @@
323
margin-left: 95px !important;
324
line-height: 1.4
325
}
326
- #sb_instagram .sbi_medium .sbi_header_text h3{
327
margin-right: -85px !important;
328
}
329
#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info{
330
margin-top: 4px !important;
331
}
332
- #sb_instagram .sbi_medium .sbi_header_text.sbi_no_info h3{
333
padding-top: 20px !important;
334
}
335
/** Large Header */
@@ -356,19 +356,19 @@
356
margin-left: 140px !important;
357
line-height: 1.5;
358
}
359
- #sb_instagram .sbi_large .sbi_header_text h3{
360
margin-right: -120px !important;
361
}
362
#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info{
363
margin-top: 12px !important;
364
}
365
- #sb_instagram .sbi_large .sbi_header_text.sbi_no_info h3{
366
padding-top: 32px !important;
367
}
368
}
369
370
/* Header profile pic */
371
- #sb_instagram .sbi_header_img{
372
float: left;
373
position: relative;
374
width: 50px;
@@ -379,7 +379,7 @@
379
-webkit-border-radius: 40px;
380
border-radius: 40px;
381
}
382
- #sb_instagram .sbi_header_img img{
383
float: left;
384
margin: 0 !important;
385
padding: 0 !important;
@@ -391,7 +391,7 @@
391
}
392
/* Profile pic hover */
393
/* Profile pic hover */
394
- #sb_instagram .sbi_header_img_hover{
395
opacity: 0;
396
position: absolute;
397
width: 100%;
@@ -403,7 +403,7 @@
403
background: rgba(0,0,0,0.75);
404
}
405
406
- #sb_instagram .sbi_header_img_hover .sbi_new_logo{
407
position: absolute;
408
top: 50%;
409
left: 50%;
@@ -413,11 +413,11 @@
413
height: 24px;
414
font-size: 24px;
415
}
416
- #sb_instagram .sbi_header_img_hover i {
417
overflow: hidden;
418
background: url('../img/small-logo.png') no-repeat 0 0;
419
}
420
- #sb_instagram .sbi_header_img_hover{
421
z-index: 2;
422
transition: opacity 0.4s ease-in-out;
423
}
@@ -425,7 +425,7 @@
425
opacity: 1;
426
transition: opacity 0.2s ease-in-out;
427
}
428
- #sb_instagram .sbi_header_img_hover{
429
position: absolute;
430
width: 100%;
431
top: 0;
@@ -449,7 +449,7 @@
449
opacity: 1;
450
}
451
/* Header text */
452
- #sb_instagram .sbi_header_text{
453
float: left;
454
width: 100%;
455
padding-top: 5px;
@@ -457,8 +457,8 @@
457
#sb_instagram .sb_instagram_header a{
458
text-decoration: none;
459
}
460
- #sb_instagram .sbi_header_text .sbi_bio,
461
- #sb_instagram .sbi_header_text h3{
462
float: left;
463
clear: both;
464
width: auto;
@@ -473,11 +473,16 @@
473
font-size: 13px;
474
line-height: 1.3;
475
}
476
- #sb_instagram .sb_instagram_header h3.sbi_no_bio{
477
padding-top: 9px !important;
478
}
479
- #sb_instagram .sbi_header_text img.emoji{
480
- margin-right: 3px !important;
481
}
482
483
323
margin-left: 95px !important;
324
line-height: 1.4
325
}
326
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3{
327
margin-right: -85px !important;
328
}
329
#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info{
330
margin-top: 4px !important;
331
}
332
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text.sbi_no_bio h3{
333
padding-top: 20px !important;
334
}
335
/** Large Header */
356
margin-left: 140px !important;
357
line-height: 1.5;
358
}
359
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3{
360
margin-right: -120px !important;
361
}
362
#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info{
363
margin-top: 12px !important;
364
}
365
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text.sbi_no_bio h3{
366
padding-top: 32px !important;
367
}
368
}
369
370
/* Header profile pic */
371
+ #sb_instagram .sb_instagram_header .sbi_header_img{
372
float: left;
373
position: relative;
374
width: 50px;
379
-webkit-border-radius: 40px;
380
border-radius: 40px;
381
}
382
+ #sb_instagram .sb_instagram_header .sbi_header_img img{
383
float: left;
384
margin: 0 !important;
385
padding: 0 !important;
391
}
392
/* Profile pic hover */
393
/* Profile pic hover */
394
+ #sb_instagram .sb_instagram_header .sbi_header_img_hover{
395
opacity: 0;
396
position: absolute;
397
width: 100%;
403
background: rgba(0,0,0,0.75);
404
}
405
406
+ #sb_instagram .sb_instagram_header .sbi_header_img_hover .sbi_new_logo{
407
position: absolute;
408
top: 50%;
409
left: 50%;
413
height: 24px;
414
font-size: 24px;
415
}
416
+ #sb_instagram .sb_instagram_header .sbi_header_img_hover i {
417
overflow: hidden;
418
background: url('../img/small-logo.png') no-repeat 0 0;
419
}
420
+ #sb_instagram .sb_instagram_header .sbi_header_img_hover{
421
z-index: 2;
422
transition: opacity 0.4s ease-in-out;
423
}
425
opacity: 1;
426
transition: opacity 0.2s ease-in-out;
427
}
428
+ #sb_instagram .sb_instagram_header .sbi_header_img_hover{
429
position: absolute;
430
width: 100%;
431
top: 0;
449
opacity: 1;
450
}
451
/* Header text */
452
+ #sb_instagram .sb_instagram_header .sbi_header_text{
453
float: left;
454
width: 100%;
455
padding-top: 5px;
457
#sb_instagram .sb_instagram_header a{
458
text-decoration: none;
459
}
460
+ #sb_instagram .sb_instagram_header .sbi_header_text .sbi_bio,
461
+ #sb_instagram .sb_instagram_header .sbi_header_text h3{
462
float: left;
463
clear: both;
464
width: auto;
473
font-size: 13px;
474
line-height: 1.3;
475
}
476
+ #sb_instagram .sb_instagram_header .sbi_header_text img.emoji{
477
+ margin-right: 3px !important;
478
+ }
479
+
480
+ /* No bio */
481
+ #sb_instagram .sb_instagram_header .sbi_header_text.sbi_no_bio h3{
482
padding-top: 9px !important;
483
}
484
+ #sb_instagram .sb_instagram_header .sbi_header_text.sbi_no_bio .sbi_bio_info{
485
+ clear: both;
486
}
487
488
css/sb-instagram.min.css CHANGED
@@ -1 +1 @@
1
- #sb_instagram{width:100%;margin:0 auto;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#sb_instagram:after{content:"";display:table;clear:both}#sb_instagram.sbi_fixed_height{overflow:hidden;overflow-y:auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#sb_instagram #sbi_images{width:100%;float:left;line-height:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#sb_instagram #sbi_images .sbi_item{display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1;max-height:1000px;padding:inherit!important;margin:0!important;text-decoration:none;opacity:1;overflow:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;-ms-transition:all .5s ease;transition:all .5s ease}#sb_instagram #sbi_images .sbi_item.sbi_transition{opacity:0;max-height:0}#sb_instagram.sbi_col_1 #sbi_images .sbi_item{width:100%}#sb_instagram.sbi_col_2 #sbi_images .sbi_item{width:50%}#sb_instagram.sbi_col_3 #sbi_images .sbi_item{width:33.33%}#sb_instagram.sbi_col_4 #sbi_images .sbi_item{width:25%}#sb_instagram.sbi_col_5 #sbi_images .sbi_item{width:20%}#sb_instagram.sbi_col_6 #sbi_images .sbi_item{width:16.66%}#sb_instagram.sbi_col_7 #sbi_images .sbi_item{width:14.28%}#sb_instagram.sbi_col_8 #sbi_images .sbi_item{width:12.5%}#sb_instagram.sbi_col_9 #sbi_images .sbi_item{width:11.11%}#sb_instagram.sbi_col_10 #sbi_images .sbi_item{width:10%}#sb_instagram.sbi_col_1.sbi_disable_mobile #sbi_images .sbi_item{width:100%}#sb_instagram.sbi_col_2.sbi_disable_mobile #sbi_images .sbi_item{width:50%}#sb_instagram.sbi_col_3.sbi_disable_mobile #sbi_images .sbi_item{width:33.33%}#sb_instagram.sbi_col_4.sbi_disable_mobile #sbi_images .sbi_item{width:25%}#sb_instagram.sbi_col_5.sbi_disable_mobile #sbi_images .sbi_item{width:20%}#sb_instagram.sbi_col_6.sbi_disable_mobile #sbi_images .sbi_item{width:16.66%}#sb_instagram.sbi_col_7.sbi_disable_mobile #sbi_images .sbi_item{width:14.28%}#sb_instagram.sbi_col_8.sbi_disable_mobile #sbi_images .sbi_item{width:12.5%}#sb_instagram.sbi_col_9.sbi_disable_mobile #sbi_images .sbi_item{width:11.11%}#sb_instagram.sbi_col_10.sbi_disable_mobile #sbi_images .sbi_item{width:10%}#sb_instagram .sbi_photo_wrap{position:relative}#sb_instagram .sbi_photo{display:block;text-decoration:none}#sb_instagram .sbi_photo img{width:100%;height:auto}#sb_instagram .sbi_no_js img{display:none}#sb_instagram a,#sb_instagram a:active,#sb_instagram a:focus,#sb_instagram a:hover{outline:0}#sb_instagram img{display:block;padding:0!important;margin:0!important;max-width:100%!important;opacity:1!important}#sb_instagram .sbi_link{display:none;position:absolute;bottom:0;right:0;width:100%;padding:10px 0;background:rgba(0,0,0,.5);text-align:center;color:#fff;font-size:12px;line-height:1.1}#sb_instagram .sbi_link a{padding:0 6px;text-decoration:none;color:#fff;font-size:12px;line-height:1.1;display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1}#sb_instagram .sbi_link .sbi_lightbox_link{padding-bottom:5px}#sb_instagram .sbi_link a:focus,#sb_instagram .sbi_link a:hover{text-decoration:underline}#sb_instagram .sbi_photo_wrap:focus .sbi_link,#sb_instagram .sbi_photo_wrap:hover .sbi_link{display:block}#sb_instagram svg:not(:root).svg-inline--fa{height:1em}#sb_instagram .sbi_type_carousel .sbi_playbtn,#sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play,#sb_instagram .sbi_type_video .sbi_playbtn,#sb_instagram .sbi_type_video .svg-inline--fa.fa-play,.sbi_type_carousel .fa-clone{display:block!important;position:absolute;z-index:1;color:#fff;color:rgba(255,255,255,.9);font-style:normal!important;text-shadow:0 0 8px rgba(0,0,0,.8)}#sb_instagram .sbi_type_carousel .sbi_playbtn,#sb_instagram .sbi_type_video .sbi_playbtn{z-index:2;top:50%;left:50%;margin-top:-24px;margin-left:-19px;padding:0;font-size:48px}#sb_instagram .sbi_type_carousel .fa-clone{right:12px;top:12px;font-size:24px;text-shadow:0 0 8px rgba(0,0,0,.3)}#sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play,#sb_instagram .sbi_type_video .svg-inline--fa.fa-play,.sbi_type_carousel svg.fa-clone{-webkit-filter:drop-shadow( 0 0 2px rgba(0,0,0,.4) );filter:drop-shadow( 0 0 2px rgba(0,0,0,.4) )}#sb_instagram .sbi_loader{width:20px;height:20px;position:relative;top:50%;left:50%;margin:-10px 0 0 -10px;background-color:#000;background-color:rgba(0,0,0,.5);border-radius:100%;-webkit-animation:sbi-sk-scaleout 1s infinite ease-in-out;animation:sbi-sk-scaleout 1s infinite ease-in-out}#sb_instagram #sbi_load .sbi_loader{position:absolute;margin-top:-11px;background-color:#fff;opacity:1}@-webkit-keyframes sbi-sk-scaleout{0%{-webkit-transform:scale(0)}100%{-webkit-transform:scale(1);opacity:0}}@keyframes sbi-sk-scaleout{0%{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:0}}#sb_instagram .fa-spin,#sbi_lightbox .fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}#sb_instagram .fa-pulse,#sbi_lightbox .fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.sbi-screenreader{text-indent:-9999px!important;display:block!important;width:0!important;height:0!important;line-height:0!important}#sb_instagram .sb_instagram_header{float:left;clear:both;margin:0 0 15px 0;padding:0;line-height:1.2;width:100%}#sb_instagram .sb_instagram_header a{float:left;display:block;text-decoration:none;transition:color .5s ease}@media all and (min-width:480px){#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_img{width:80px;height:80px;border-radius:40px}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_img img{width:80px;height:80px;border-radius:40px}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3{font-size:20px}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio,#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info{font-size:14px}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio,#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info,#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3{margin-left:95px!important;line-height:1.4}#sb_instagram .sbi_medium .sbi_header_text h3{margin-right:-85px!important}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info{margin-top:4px!important}#sb_instagram .sbi_medium .sbi_header_text.sbi_no_info h3{padding-top:20px!important}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_img{width:120px;height:120px;border-radius:60px}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_img img{width:120px;height:120px;border-radius:60px}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3{font-size:28px}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio,#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info{font-size:16px}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio,#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info,#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3{margin-left:140px!important;line-height:1.5}#sb_instagram .sbi_large .sbi_header_text h3{margin-right:-120px!important}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info{margin-top:12px!important}#sb_instagram .sbi_large .sbi_header_text.sbi_no_info h3{padding-top:32px!important}}#sb_instagram .sbi_header_img{float:left;position:relative;width:50px;margin:0 0 0 -100%!important;overflow:hidden;-moz-border-radius:40px;-webkit-border-radius:40px;border-radius:40px}#sb_instagram .sbi_header_img img{float:left;margin:0!important;padding:0!important;border:none!important;-moz-border-radius:40px;-webkit-border-radius:40px;border-radius:40px}#sb_instagram .sbi_header_img_hover{opacity:0;position:absolute;width:100%;top:0;bottom:0;left:0;text-align:center;color:#fff;background:rgba(0,0,0,.75)}#sb_instagram .sbi_header_img_hover .sbi_new_logo{position:absolute;top:50%;left:50%;margin-top:-12px;margin-left:-12px;width:24px;height:24px;font-size:24px}#sb_instagram .sbi_header_img_hover i{overflow:hidden;background:url(../img/small-logo.png) no-repeat 0 0}#sb_instagram .sbi_header_img_hover{z-index:2;transition:opacity .4s ease-in-out}#sb_instagram .sb_instagram_header .sbi_fade_in{opacity:1;transition:opacity .2s ease-in-out}#sb_instagram .sbi_header_img_hover{position:absolute;width:100%;top:0;bottom:0;left:0;text-align:center;color:#fff;background:rgba(0,0,0,.75);-moz-opacity:0;-khtml-opacity:0;opacity:0;border-radius:40px;transition:opacity .2s}#sb_instagram .sb_instagram_header a:focus .sbi_header_img_hover,#sb_instagram .sb_instagram_header a:hover .sbi_header_img_hover{opacity:1}#sb_instagram .sbi_header_text{float:left;width:100%;padding-top:5px}#sb_instagram .sb_instagram_header a{text-decoration:none}#sb_instagram .sbi_header_text .sbi_bio,#sb_instagram .sbi_header_text h3{float:left;clear:both;width:auto;margin:0 0 0 60px!important;padding:0!important}#sb_instagram .sb_instagram_header h3{font-size:16px;line-height:1.3}#sb_instagram .sb_instagram_header p{font-size:13px;line-height:1.3}#sb_instagram .sb_instagram_header h3.sbi_no_bio{padding-top:9px!important}#sb_instagram .sbi_header_text img.emoji{margin-right:3px!important}#sb_instagram #sbi_load{float:left;clear:both;width:100%;text-align:center}#sb_instagram #sbi_load .fa-spinner{display:none;position:absolute;top:50%;left:50%;margin:-8px 0 0 -7px;font-size:15px}#sb_instagram #sbi_load{opacity:1;transition:all .5s ease-in}#sb_instagram .sbi_load_btn .sbi_btn_text,#sb_instagram .sbi_load_btn .sbi_loader{opacity:1;transition:all .1s ease-in}#sb_instagram .sbi_hidden{opacity:0!important}#sb_instagram #sbi_load .sbi_load_btn,#sb_instagram .sbi_follow_btn a{display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1;padding:7px 14px;margin:5px auto 0 auto;background:#333;color:#eee;border:none;color:#fff;text-decoration:none;font-size:13px;line-height:1.5;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#sb_instagram #sbi_load .sbi_load_btn{position:relative}#sb_instagram .sbi_follow_btn{display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1;text-align:center}#sb_instagram .sbi_follow_btn.sbi_top{display:block;margin-bottom:5px}#sb_instagram .sbi_follow_btn a{background:#408bd1;color:#fff}#sb_instagram #sbi_load .sbi_load_btn,#sb_instagram .sbi_follow_btn a{transition:all .1s ease-in}#sb_instagram #sbi_load .sbi_load_btn:hover{outline:0;box-shadow:inset 0 0 20px 20px rgba(255,255,255,.25)}#sb_instagram .sbi_follow_btn a:focus,#sb_instagram .sbi_follow_btn a:hover{outline:0;box-shadow:inset 0 0 10px 20px #359dff}#sb_instagram #sbi_load .sbi_load_btn.sbi_custom:hover,#sb_instagram .sbi_follow_btn.sbi_custom a:focus,#sb_instagram .sbi_follow_btn.sbi_custom a:hover{box-shadow:inset 0 0 20px 20px rgba(255,255,255,.15)}#sb_instagram #sbi_load .sbi_load_btn:active,#sb_instagram .sbi_follow_btn a:active{box-shadow:inset 0 0 10px 20px rgba(0,0,0,.3)}#sb_instagram .sbi_follow_btn .fa,#sb_instagram .sbi_follow_btn svg{margin-bottom:-1px;margin-right:7px;font-size:15px}#sb_instagram .sbi_follow_btn svg{vertical-align:-.125em}#sb_instagram #sbi_load .sbi_follow_btn{margin-left:5px}#sb_instagram .sb_instagram_error{width:100%;text-align:center;line-height:1.4}#sbi_mod_error{display:none;border:1px solid #ddd;background:#eee;color:#333;margin:10px 0 0;padding:10px 15px;font-size:13px;text-align:center;clear:both;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px}#sbi_mod_error p{padding:5px 0!important;margin:0!important;line-height:1.3!important}#sbi_mod_error ol,#sbi_mod_error ul{padding:5px 0 5px 20px!important;margin:0!important}#sbi_mod_error li{padding:1px 0!important;margin:0!important}#sbi_mod_error span{font-size:12px}#sb_instagram.sbi_medium .sbi_photo_wrap .svg-inline--fa.fa-play,#sb_instagram.sbi_medium .sbi_playbtn{margin-top:-12px;margin-left:-9px;font-size:23px}#sb_instagram.sbi_medium .sbi_type_carousel .sbi_photo_wrap .fa-clone{right:8px;top:8px;font-size:18px}#sb_instagram.sbi_small .sbi_photo_wrap .svg-inline--fa.fa-play,#sb_instagram.sbi_small .sbi_playbtn{margin-top:-9px;margin-left:-7px;font-size:18px}#sb_instagram.sbi_small .sbi_type_carousel .sbi_photo_wrap .fa-clone{right:5px;top:5px;font-size:12px}@media all and (max-width:640px){#sb_instagram.sbi_col_3 #sbi_images .sbi_item,#sb_instagram.sbi_col_4 #sbi_images .sbi_item,#sb_instagram.sbi_col_5 #sbi_images .sbi_item,#sb_instagram.sbi_col_6 #sbi_images .sbi_item{width:50%}#sb_instagram.sbi_col_10 #sbi_images .sbi_item,#sb_instagram.sbi_col_7 #sbi_images .sbi_item,#sb_instagram.sbi_col_8 #sbi_images .sbi_item,#sb_instagram.sbi_col_9 #sbi_images .sbi_item{width:25%}#sb_instagram.sbi_width_resp{width:100%!important}}@media all and (max-width:480px){#sb_instagram.sbi_col_10 #sbi_images .sbi_item,#sb_instagram.sbi_col_3 #sbi_images .sbi_item,#sb_instagram.sbi_col_4 #sbi_images .sbi_item,#sb_instagram.sbi_col_5 #sbi_images .sbi_item,#sb_instagram.sbi_col_6 #sbi_images .sbi_item,#sb_instagram.sbi_col_7 #sbi_images .sbi_item,#sb_instagram.sbi_col_8 #sbi_images .sbi_item,#sb_instagram.sbi_col_9 #sbi_images .sbi_item{width:100%}}#sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo_wrap{box-sizing:border-box;position:relative;overflow:hidden}#sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo_wrap:before{content:"";display:block;padding-top:100%;z-index:-300}#sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo{position:absolute;top:0;left:0;bottom:0;right:0}#sb_instagram.sbi_no_js #sbi_images .sbi_item.sbi_transition{opacity:1;max-height:640px}#sb_instagram.sbi_no_js .sbi_load_btn,#sb_instagram.sbi_no_js .sbi_photo img{display:none}
1
+ #sb_instagram{width:100%;margin:0 auto;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#sb_instagram:after{content:"";display:table;clear:both}#sb_instagram.sbi_fixed_height{overflow:hidden;overflow-y:auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#sb_instagram #sbi_images{width:100%;float:left;line-height:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#sb_instagram #sbi_images .sbi_item{display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1;max-height:1000px;padding:inherit!important;margin:0!important;text-decoration:none;opacity:1;overflow:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;-ms-transition:all .5s ease;transition:all .5s ease}#sb_instagram #sbi_images .sbi_item.sbi_transition{opacity:0;max-height:0}#sb_instagram.sbi_col_1 #sbi_images .sbi_item{width:100%}#sb_instagram.sbi_col_2 #sbi_images .sbi_item{width:50%}#sb_instagram.sbi_col_3 #sbi_images .sbi_item{width:33.33%}#sb_instagram.sbi_col_4 #sbi_images .sbi_item{width:25%}#sb_instagram.sbi_col_5 #sbi_images .sbi_item{width:20%}#sb_instagram.sbi_col_6 #sbi_images .sbi_item{width:16.66%}#sb_instagram.sbi_col_7 #sbi_images .sbi_item{width:14.28%}#sb_instagram.sbi_col_8 #sbi_images .sbi_item{width:12.5%}#sb_instagram.sbi_col_9 #sbi_images .sbi_item{width:11.11%}#sb_instagram.sbi_col_10 #sbi_images .sbi_item{width:10%}#sb_instagram.sbi_col_1.sbi_disable_mobile #sbi_images .sbi_item{width:100%}#sb_instagram.sbi_col_2.sbi_disable_mobile #sbi_images .sbi_item{width:50%}#sb_instagram.sbi_col_3.sbi_disable_mobile #sbi_images .sbi_item{width:33.33%}#sb_instagram.sbi_col_4.sbi_disable_mobile #sbi_images .sbi_item{width:25%}#sb_instagram.sbi_col_5.sbi_disable_mobile #sbi_images .sbi_item{width:20%}#sb_instagram.sbi_col_6.sbi_disable_mobile #sbi_images .sbi_item{width:16.66%}#sb_instagram.sbi_col_7.sbi_disable_mobile #sbi_images .sbi_item{width:14.28%}#sb_instagram.sbi_col_8.sbi_disable_mobile #sbi_images .sbi_item{width:12.5%}#sb_instagram.sbi_col_9.sbi_disable_mobile #sbi_images .sbi_item{width:11.11%}#sb_instagram.sbi_col_10.sbi_disable_mobile #sbi_images .sbi_item{width:10%}#sb_instagram .sbi_photo_wrap{position:relative}#sb_instagram .sbi_photo{display:block;text-decoration:none}#sb_instagram .sbi_photo img{width:100%;height:auto}#sb_instagram .sbi_no_js img{display:none}#sb_instagram a,#sb_instagram a:active,#sb_instagram a:focus,#sb_instagram a:hover{outline:0}#sb_instagram img{display:block;padding:0!important;margin:0!important;max-width:100%!important;opacity:1!important}#sb_instagram .sbi_link{display:none;position:absolute;bottom:0;right:0;width:100%;padding:10px 0;background:rgba(0,0,0,.5);text-align:center;color:#fff;font-size:12px;line-height:1.1}#sb_instagram .sbi_link a{padding:0 6px;text-decoration:none;color:#fff;font-size:12px;line-height:1.1;display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1}#sb_instagram .sbi_link .sbi_lightbox_link{padding-bottom:5px}#sb_instagram .sbi_link a:focus,#sb_instagram .sbi_link a:hover{text-decoration:underline}#sb_instagram .sbi_photo_wrap:focus .sbi_link,#sb_instagram .sbi_photo_wrap:hover .sbi_link{display:block}#sb_instagram svg:not(:root).svg-inline--fa{height:1em}#sb_instagram .sbi_type_carousel .sbi_playbtn,#sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play,#sb_instagram .sbi_type_video .sbi_playbtn,#sb_instagram .sbi_type_video .svg-inline--fa.fa-play,.sbi_type_carousel .fa-clone{display:block!important;position:absolute;z-index:1;color:#fff;color:rgba(255,255,255,.9);font-style:normal!important;text-shadow:0 0 8px rgba(0,0,0,.8)}#sb_instagram .sbi_type_carousel .sbi_playbtn,#sb_instagram .sbi_type_video .sbi_playbtn{z-index:2;top:50%;left:50%;margin-top:-24px;margin-left:-19px;padding:0;font-size:48px}#sb_instagram .sbi_type_carousel .fa-clone{right:12px;top:12px;font-size:24px;text-shadow:0 0 8px rgba(0,0,0,.3)}#sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play,#sb_instagram .sbi_type_video .svg-inline--fa.fa-play,.sbi_type_carousel svg.fa-clone{-webkit-filter:drop-shadow( 0 0 2px rgba(0,0,0,.4) );filter:drop-shadow( 0 0 2px rgba(0,0,0,.4) )}#sb_instagram .sbi_loader{width:20px;height:20px;position:relative;top:50%;left:50%;margin:-10px 0 0 -10px;background-color:#000;background-color:rgba(0,0,0,.5);border-radius:100%;-webkit-animation:sbi-sk-scaleout 1s infinite ease-in-out;animation:sbi-sk-scaleout 1s infinite ease-in-out}#sb_instagram #sbi_load .sbi_loader{position:absolute;margin-top:-11px;background-color:#fff;opacity:1}@-webkit-keyframes sbi-sk-scaleout{0%{-webkit-transform:scale(0)}100%{-webkit-transform:scale(1);opacity:0}}@keyframes sbi-sk-scaleout{0%{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:0}}#sb_instagram .fa-spin,#sbi_lightbox .fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}#sb_instagram .fa-pulse,#sbi_lightbox .fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.sbi-screenreader{text-indent:-9999px!important;display:block!important;width:0!important;height:0!important;line-height:0!important}#sb_instagram .sb_instagram_header{float:left;clear:both;margin:0 0 15px 0;padding:0;line-height:1.2;width:100%}#sb_instagram .sb_instagram_header a{float:left;display:block;text-decoration:none;transition:color .5s ease}@media all and (min-width:480px){#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_img{width:80px;height:80px;border-radius:40px}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_img img{width:80px;height:80px;border-radius:40px}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3{font-size:20px}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio,#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info{font-size:14px}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio,#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info,#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3{margin-left:95px!important;line-height:1.4}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3{margin-right:-85px!important}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info{margin-top:4px!important}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text.sbi_no_bio h3{padding-top:20px!important}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_img{width:120px;height:120px;border-radius:60px}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_img img{width:120px;height:120px;border-radius:60px}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3{font-size:28px}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio,#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info{font-size:16px}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio,#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info,#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3{margin-left:140px!important;line-height:1.5}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3{margin-right:-120px!important}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info{margin-top:12px!important}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text.sbi_no_bio h3{padding-top:32px!important}}#sb_instagram .sb_instagram_header .sbi_header_img{float:left;position:relative;width:50px;margin:0 0 0 -100%!important;overflow:hidden;-moz-border-radius:40px;-webkit-border-radius:40px;border-radius:40px}#sb_instagram .sb_instagram_header .sbi_header_img img{float:left;margin:0!important;padding:0!important;border:none!important;-moz-border-radius:40px;-webkit-border-radius:40px;border-radius:40px}#sb_instagram .sb_instagram_header .sbi_header_img_hover{opacity:0;position:absolute;width:100%;top:0;bottom:0;left:0;text-align:center;color:#fff;background:rgba(0,0,0,.75)}#sb_instagram .sb_instagram_header .sbi_header_img_hover .sbi_new_logo{position:absolute;top:50%;left:50%;margin-top:-12px;margin-left:-12px;width:24px;height:24px;font-size:24px}#sb_instagram .sb_instagram_header .sbi_header_img_hover i{overflow:hidden;background:url(../img/small-logo.png) no-repeat 0 0}#sb_instagram .sb_instagram_header .sbi_header_img_hover{z-index:2;transition:opacity .4s ease-in-out}#sb_instagram .sb_instagram_header .sbi_fade_in{opacity:1;transition:opacity .2s ease-in-out}#sb_instagram .sb_instagram_header .sbi_header_img_hover{position:absolute;width:100%;top:0;bottom:0;left:0;text-align:center;color:#fff;background:rgba(0,0,0,.75);-moz-opacity:0;-khtml-opacity:0;opacity:0;border-radius:40px;transition:opacity .2s}#sb_instagram .sb_instagram_header a:focus .sbi_header_img_hover,#sb_instagram .sb_instagram_header a:hover .sbi_header_img_hover{opacity:1}#sb_instagram .sb_instagram_header .sbi_header_text{float:left;width:100%;padding-top:5px}#sb_instagram .sb_instagram_header a{text-decoration:none}#sb_instagram .sb_instagram_header .sbi_header_text .sbi_bio,#sb_instagram .sb_instagram_header .sbi_header_text h3{float:left;clear:both;width:auto;margin:0 0 0 60px!important;padding:0!important}#sb_instagram .sb_instagram_header h3{font-size:16px;line-height:1.3}#sb_instagram .sb_instagram_header p{font-size:13px;line-height:1.3}#sb_instagram .sb_instagram_header .sbi_header_text img.emoji{margin-right:3px!important}#sb_instagram .sb_instagram_header .sbi_header_text.sbi_no_bio h3{padding-top:9px!important}#sb_instagram .sb_instagram_header .sbi_header_text.sbi_no_bio .sbi_bio_info{clear:both}#sb_instagram #sbi_load{float:left;clear:both;width:100%;text-align:center}#sb_instagram #sbi_load .fa-spinner{display:none;position:absolute;top:50%;left:50%;margin:-8px 0 0 -7px;font-size:15px}#sb_instagram #sbi_load{opacity:1;transition:all .5s ease-in}#sb_instagram .sbi_load_btn .sbi_btn_text,#sb_instagram .sbi_load_btn .sbi_loader{opacity:1;transition:all .1s ease-in}#sb_instagram .sbi_hidden{opacity:0!important}#sb_instagram #sbi_load .sbi_load_btn,#sb_instagram .sbi_follow_btn a{display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1;padding:7px 14px;margin:5px auto 0 auto;background:#333;color:#eee;border:none;color:#fff;text-decoration:none;font-size:13px;line-height:1.5;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#sb_instagram #sbi_load .sbi_load_btn{position:relative}#sb_instagram .sbi_follow_btn{display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1;text-align:center}#sb_instagram .sbi_follow_btn.sbi_top{display:block;margin-bottom:5px}#sb_instagram .sbi_follow_btn a{background:#408bd1;color:#fff}#sb_instagram #sbi_load .sbi_load_btn,#sb_instagram .sbi_follow_btn a{transition:all .1s ease-in}#sb_instagram #sbi_load .sbi_load_btn:hover{outline:0;box-shadow:inset 0 0 20px 20px rgba(255,255,255,.25)}#sb_instagram .sbi_follow_btn a:focus,#sb_instagram .sbi_follow_btn a:hover{outline:0;box-shadow:inset 0 0 10px 20px #359dff}#sb_instagram #sbi_load .sbi_load_btn.sbi_custom:hover,#sb_instagram .sbi_follow_btn.sbi_custom a:focus,#sb_instagram .sbi_follow_btn.sbi_custom a:hover{box-shadow:inset 0 0 20px 20px rgba(255,255,255,.15)}#sb_instagram #sbi_load .sbi_load_btn:active,#sb_instagram .sbi_follow_btn a:active{box-shadow:inset 0 0 10px 20px rgba(0,0,0,.3)}#sb_instagram .sbi_follow_btn .fa,#sb_instagram .sbi_follow_btn svg{margin-bottom:-1px;margin-right:7px;font-size:15px}#sb_instagram .sbi_follow_btn svg{vertical-align:-.125em}#sb_instagram #sbi_load .sbi_follow_btn{margin-left:5px}#sb_instagram .sb_instagram_error{width:100%;text-align:center;line-height:1.4}#sbi_mod_error{display:none;border:1px solid #ddd;background:#eee;color:#333;margin:10px 0 0;padding:10px 15px;font-size:13px;text-align:center;clear:both;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px}#sbi_mod_error p{padding:5px 0!important;margin:0!important;line-height:1.3!important}#sbi_mod_error ol,#sbi_mod_error ul{padding:5px 0 5px 20px!important;margin:0!important}#sbi_mod_error li{padding:1px 0!important;margin:0!important}#sbi_mod_error span{font-size:12px}#sb_instagram.sbi_medium .sbi_photo_wrap .svg-inline--fa.fa-play,#sb_instagram.sbi_medium .sbi_playbtn{margin-top:-12px;margin-left:-9px;font-size:23px}#sb_instagram.sbi_medium .sbi_type_carousel .sbi_photo_wrap .fa-clone{right:8px;top:8px;font-size:18px}#sb_instagram.sbi_small .sbi_photo_wrap .svg-inline--fa.fa-play,#sb_instagram.sbi_small .sbi_playbtn{margin-top:-9px;margin-left:-7px;font-size:18px}#sb_instagram.sbi_small .sbi_type_carousel .sbi_photo_wrap .fa-clone{right:5px;top:5px;font-size:12px}@media all and (max-width:640px){#sb_instagram.sbi_col_3 #sbi_images .sbi_item,#sb_instagram.sbi_col_4 #sbi_images .sbi_item,#sb_instagram.sbi_col_5 #sbi_images .sbi_item,#sb_instagram.sbi_col_6 #sbi_images .sbi_item{width:50%}#sb_instagram.sbi_col_10 #sbi_images .sbi_item,#sb_instagram.sbi_col_7 #sbi_images .sbi_item,#sb_instagram.sbi_col_8 #sbi_images .sbi_item,#sb_instagram.sbi_col_9 #sbi_images .sbi_item{width:25%}#sb_instagram.sbi_width_resp{width:100%!important}}@media all and (max-width:480px){#sb_instagram.sbi_col_10 #sbi_images .sbi_item,#sb_instagram.sbi_col_3 #sbi_images .sbi_item,#sb_instagram.sbi_col_4 #sbi_images .sbi_item,#sb_instagram.sbi_col_5 #sbi_images .sbi_item,#sb_instagram.sbi_col_6 #sbi_images .sbi_item,#sb_instagram.sbi_col_7 #sbi_images .sbi_item,#sb_instagram.sbi_col_8 #sbi_images .sbi_item,#sb_instagram.sbi_col_9 #sbi_images .sbi_item{width:100%}}#sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo_wrap{box-sizing:border-box;position:relative;overflow:hidden}#sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo_wrap:before{content:"";display:block;padding-top:100%;z-index:-300}#sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo{position:absolute;top:0;left:0;bottom:0;right:0}#sb_instagram.sbi_no_js #sbi_images .sbi_item.sbi_transition{opacity:1;max-height:640px}#sb_instagram.sbi_no_js .sbi_load_btn,#sb_instagram.sbi_no_js .sbi_photo img{display:none}
inc/admin/main.php CHANGED
@@ -1276,6 +1276,26 @@ function sb_instagram_settings_page() {
1276
<input type="checkbox" name="sb_instagram_show_header" id="sb_instagram_show_header" <?php if($sb_instagram_show_header == true) echo 'checked="checked"' ?> />
1277
</td>
1278
</tr>
1279
<tr valign="top">
1280
<th scope="row"><label><?php _e('Header Text Color', 'instagram-feed'); ?></label><code class="sbi_shortcode"> headercolor
1281
Eg: headercolor=fff</code></th>
@@ -1304,26 +1324,6 @@ function sb_instagram_settings_page() {
1304
</select>
1305
</td>
1306
</tr>
1307
- <tr valign="top" class="sbi_pro">
1308
- <th scope="row"><label><?php _e('Header Size', 'instagram-feed'); ?></label><code class="sbi_shortcode"> headersize
1309
- Eg: headersize=medium</code></th>
1310
- <td>
1311
- <select name="sb_instagram_header_size" id="sb_instagram_header_size" style="float: left;">
1312
- <option value="small" <?php if($sb_instagram_header_size == "small") echo 'selected="selected"' ?> ><?php _e('Small', 'instagram-feed'); ?></option>
1313
- <option value="medium" <?php if($sb_instagram_header_size == "medium") echo 'selected="selected"' ?> ><?php _e('Medium', 'instagram-feed'); ?></option>
1314
- <option value="large" <?php if($sb_instagram_header_size == "large") echo 'selected="selected"' ?> ><?php _e('Large', 'instagram-feed'); ?></option>
1315
- </select>
1316
- </td>
1317
- </tr>
1318
- <tr valign="top" class="sbi_pro">
1319
- <th scope="row"><label><?php _e("Show Bio Text", 'instagram-feed'); ?></label><code class="sbi_shortcode"> showbio
1320
- Eg: showbio=false</code></th>
1321
- <td>
1322
- <?php $sb_instagram_show_bio = isset( $sb_instagram_show_bio ) ? $sb_instagram_show_bio : true; ?>
1323
- <input type="checkbox" name="sb_instagram_show_bio" id="sb_instagram_show_bio" <?php if($sb_instagram_show_bio == true) echo 'checked="checked"' ?> />
1324
- <span class="sbi_note"><?php _e("Only applies for Instagram accounts with bios", 'instagram-feed'); ?></span>
1325
- </td>
1326
- </tr>
1327
<tr valign="top" class="sbi_pro">
1328
<th scope="row"><label><?php _e("Show Number of Followers",'instagram-feed'); ?></label></th>
1329
<td>
@@ -2034,12 +2034,12 @@ function sb_instagram_settings_page() {
2034
<td><?php _e("Whether to show the feed Header. Options:", 'instagram-feed'); ?> 'true' or 'false'.</td>
2035
<td><code>[instagram-feed showheader=false]</code></td>
2036
</tr>
2037
- <tr class="sbi_pro">
2038
<td>showbio</td>
2039
<td><?php _e("Display the bio in the header. Options:", 'instagram-feed'); ?> 'true' or 'false'</td>
2040
<td><code>[instagram-feed showbio=true]</code></td>
2041
</tr>
2042
- <tr class="sbi_pro">
2043
<td>headersize</td>
2044
<td><?php _e("Size of the header including small, medium and large. Options:", 'instagram-feed'); ?> small, medium, or large.</td>
2045
<td><code>[instagram-feed headersize=medium]</code></td>
1276
<input type="checkbox" name="sb_instagram_show_header" id="sb_instagram_show_header" <?php if($sb_instagram_show_header == true) echo 'checked="checked"' ?> />
1277
</td>
1278
</tr>
1279
+ <tr valign="top">
1280
+ <th scope="row"><label><?php _e('Header Size', 'instagram-feed'); ?></label><code class="sbi_shortcode"> headersize
1281
+ Eg: headersize=medium</code></th>
1282
+ <td>
1283
+ <select name="sb_instagram_header_size" id="sb_instagram_header_size" style="float: left;">
1284
+ <option value="small" <?php if($sb_instagram_header_size == "small") echo 'selected="selected"' ?> ><?php _e('Small', 'instagram-feed'); ?></option>
1285
+ <option value="medium" <?php if($sb_instagram_header_size == "medium") echo 'selected="selected"' ?> ><?php _e('Medium', 'instagram-feed'); ?></option>
1286
+ <option value="large" <?php if($sb_instagram_header_size == "large") echo 'selected="selected"' ?> ><?php _e('Large', 'instagram-feed'); ?></option>
1287
+ </select>
1288
+ </td>
1289
+ </tr>
1290
+ <tr valign="top">
1291
+ <th scope="row"><label><?php _e("Show Bio Text", 'instagram-feed'); ?></label><code class="sbi_shortcode"> showbio
1292
+ Eg: showbio=false</code></th>
1293
+ <td>
1294
+ <?php $sb_instagram_show_bio = isset( $sb_instagram_show_bio ) ? $sb_instagram_show_bio : true; ?>
1295
+ <input type="checkbox" name="sb_instagram_show_bio" id="sb_instagram_show_bio" <?php if($sb_instagram_show_bio == true) echo 'checked="checked"' ?> />
1296
+ <span class="sbi_note"><?php _e("Only applies for Instagram accounts with bios", 'instagram-feed'); ?></span>
1297
+ </td>
1298
+ </tr>
1299
<tr valign="top">
1300
<th scope="row"><label><?php _e('Header Text Color', 'instagram-feed'); ?></label><code class="sbi_shortcode"> headercolor
1301
Eg: headercolor=fff</code></th>
1324
</select>
1325
</td>
1326
</tr>
1327
<tr valign="top" class="sbi_pro">
1328
<th scope="row"><label><?php _e("Show Number of Followers",'instagram-feed'); ?></label></th>
1329
<td>
2034
<td><?php _e("Whether to show the feed Header. Options:", 'instagram-feed'); ?> 'true' or 'false'.</td>
2035
<td><code>[instagram-feed showheader=false]</code></td>
2036
</tr>
2037
+ <tr>
2038
<td>showbio</td>
2039
<td><?php _e("Display the bio in the header. Options:", 'instagram-feed'); ?> 'true' or 'false'</td>
2040
<td><code>[instagram-feed showbio=true]</code></td>
2041
</tr>
2042
+ <tr>
2043
<td>headersize</td>
2044
<td><?php _e("Size of the header including small, medium and large. Options:", 'instagram-feed'); ?> small, medium, or large.</td>
2045
<td><code>[instagram-feed headersize=medium]</code></td>
inc/class-sb-instagram-display-elements.php CHANGED
@@ -216,6 +216,20 @@ class SB_Instagram_Display_Elements
216
return '';
217
}
218
219
/**
220
* Creates a style attribute for the follow button. Can be in
221
* the feed footer or in a boxed header.
216
return '';
217
}
218
219
+ /**
220
+ * Header icon and text size is styled using the class added here.
221
+ *
222
+ * @param $settings
223
+ *
224
+ * @return string
225
+ *
226
+ * @since 2.0.1/5.0
227
+ */
228
+ public static function get_header_size_class( $settings ) {
229
+ $header_size_class = in_array( strtolower( $settings['headersize'] ), array( 'medium', 'large' ) ) ? ' sbi_'.strtolower( $settings['headersize'] ) : '';
230
+ return $header_size_class;
231
+ }
232
+
233
/**
234
* Creates a style attribute for the follow button. Can be in
235
* the feed footer or in a boxed header.
inc/class-sb-instagram-feed.php CHANGED
@@ -1018,7 +1018,7 @@ class SB_Instagram_Feed
1018
$encoded_options = wp_json_encode( $js_options );
1019
1020
$js_option_html = '<script type="text/javascript">var sb_instagram_js_options = ' . $encoded_options . ';</script>';
1021
- $js_option_html .= "<script type='text/javascript' src='" . trailingslashit( SBI_PLUGIN_URL ) . 'js/sb-instagram.min.js?ver=' . SBIVER . "'></script>";
1022
1023
return $js_option_html;
1024
}
1018
$encoded_options = wp_json_encode( $js_options );
1019
1020
$js_option_html = '<script type="text/javascript">var sb_instagram_js_options = ' . $encoded_options . ';</script>';
1021
+ $js_option_html .= "<script type='text/javascript' src='" . trailingslashit( SBI_PLUGIN_URL ) . 'js/sb-instagram-2-0-1.min.js?ver=' . SBIVER . "'></script>";
1022
1023
return $js_option_html;
1024
}
inc/class-sb-instagram-parse.php CHANGED
@@ -258,6 +258,26 @@ class SB_Instagram_Parse
258
return '';
259
}
260
261
/**
262
* There seems to be occasional bugs with the Instagram API
263
* and permalinks. This corrects it.
258
return '';
259
}
260
261
+ /**
262
+ * Account bio/description used in header
263
+ *
264
+ * @param $header_data
265
+ *
266
+ * @return string
267
+ *
268
+ * @since 2.0.1/5.0
269
+ */
270
+ public static function get_bio( $header_data ) {
271
+ if ( isset( $header_data['data']['bio'] ) ) {
272
+ return $header_data['data']['bio'];
273
+ } elseif ( isset( $header_data['bio'] ) ){
274
+ return $header_data['bio'];
275
+ } elseif ( isset( $header_data['biography'] ) ){
276
+ return $header_data['biography'];
277
+ }
278
+ return '';
279
+ }
280
+
281
/**
282
* There seems to be occasional bugs with the Instagram API
283
* and permalinks. This corrects it.
inc/class-sb-instagram-settings.php CHANGED
@@ -106,6 +106,10 @@ class SB_Instagram_Settings {
106
), $atts );
107
108
$this->settings['minnum'] = max( (int)$this->settings['num'], (int)$this->settings['nummobile'] );
109
$this->settings['disable_resize'] = isset( $db['sb_instagram_disable_resize'] ) && ($db['sb_instagram_disable_resize'] === 'on');
110
$this->settings['favor_local'] = isset( $db['sb_instagram_favor_local'] ) && ($db['sb_instagram_favor_local'] === 'on');
111
$this->settings['backup_cache_enabled'] = ! isset( $db['sb_instagram_backup'] ) || ($db['sb_instagram_backup'] === 'on');
106
), $atts );
107
108
$this->settings['minnum'] = max( (int)$this->settings['num'], (int)$this->settings['nummobile'] );
109
+ $this->settings['showbio'] = $this->settings['showbio'] === 'true' || $this->settings['showbio'] === 'on' || $this->settings['showbio'] === true;
110
+ if ( isset( $atts['showbio'] ) && $atts['showbio'] === 'false' ) {
111
+ $this->settings['showbio'] = false;
112
+ }
113
$this->settings['disable_resize'] = isset( $db['sb_instagram_disable_resize'] ) && ($db['sb_instagram_disable_resize'] === 'on');
114
$this->settings['favor_local'] = isset( $db['sb_instagram_favor_local'] ) && ($db['sb_instagram_favor_local'] === 'on');
115
$this->settings['backup_cache_enabled'] = ! isset( $db['sb_instagram_backup'] ) || ($db['sb_instagram_backup'] === 'on');
inc/if-functions.php CHANGED
@@ -15,6 +15,8 @@
15
*/
16
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
17
18
/**
19
* The main function the creates the feed from a shortcode.
20
* Can be safely added directly to templates using
@@ -760,7 +762,7 @@ function sb_instagram_scripts_enqueue() {
760
//Options to pass to JS file
761
$sb_instagram_settings = get_option( 'sb_instagram_settings' );
762
763
- $js_file = 'js/sb-instagram.min.js';
764
if ( isset( $_GET['sbi_debug'] ) ) {
765
$js_file = 'js/sb-instagram.js';
766
}
@@ -772,9 +774,9 @@ function sb_instagram_scripts_enqueue() {
772
}
773
774
if ( isset( $sb_instagram_settings['enqueue_css_in_shortcode'] ) && $sb_instagram_settings['enqueue_css_in_shortcode'] ) {
775
- wp_register_style( 'sb_instagram_styles', trailingslashit( SBI_PLUGIN_URL ) . 'css/sb-instagram.min.css', array(), SBIVER );
776
} else {
777
- wp_enqueue_style( 'sb_instagram_styles', trailingslashit( SBI_PLUGIN_URL ) . 'css/sb-instagram.min.css', array(), SBIVER );
778
}
779
780
$font_method = isset( $sb_instagram_settings['sbi_font_method'] ) ? $sb_instagram_settings['sbi_font_method'] : 'svg';
15
*/
16
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
17
18
+ add_filter( 'widget_text', 'do_shortcode' );
19
+
20
/**
21
* The main function the creates the feed from a shortcode.
22
* Can be safely added directly to templates using
762
//Options to pass to JS file
763
$sb_instagram_settings = get_option( 'sb_instagram_settings' );
764
765
+ $js_file = 'js/sb-instagram-2-0-1.min.js';
766
if ( isset( $_GET['sbi_debug'] ) ) {
767
$js_file = 'js/sb-instagram.js';
768
}
774
}
775
776
if ( isset( $sb_instagram_settings['enqueue_css_in_shortcode'] ) && $sb_instagram_settings['enqueue_css_in_shortcode'] ) {
777
+ wp_register_style( 'sb_instagram_styles', trailingslashit( SBI_PLUGIN_URL ) . 'css/sb-instagram-2-0-1.min.css', array(), SBIVER );
778
} else {
779
+ wp_enqueue_style( 'sb_instagram_styles', trailingslashit( SBI_PLUGIN_URL ) . 'css/sb-instagram-2-0-1.min.css', array(), SBIVER );
780
}
781
782
$font_method = isset( $sb_instagram_settings['sbi_font_method'] ) ? $sb_instagram_settings['sbi_font_method'] : 'svg';
instagram-feed.php CHANGED
@@ -3,7 +3,7 @@
3
Plugin Name: Smash Balloon Instagram Feed
4
Plugin URI: https://smashballoon.com/instagram-feed
5
Description: Display beautifully clean, customizable, and responsive Instagram feeds.
6
- Version: 2.0
7
Author: Smash Balloon
8
Author URI: https://smashballoon.com/
9
License: GPLv2 or later
@@ -23,7 +23,7 @@ along with this program; if not, write to the Free Software
23
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
24
*/
25
if ( ! defined( 'SBIVER' ) ) {
26
- define( 'SBIVER', '2.0' );
27
}
28
// Db version.
29
if ( ! defined( 'SBI_DBVERSION' ) ) {
@@ -420,6 +420,10 @@ if ( function_exists( 'sb_instagram_feed_init' ) ) {
420
421
update_option( 'sbi_statuses', $sbi_statuses_option, false );
422
423
}
424
425
update_option( 'sbi_db_version', SBI_DBVERSION );
3
Plugin Name: Smash Balloon Instagram Feed
4
Plugin URI: https://smashballoon.com/instagram-feed
5
Description: Display beautifully clean, customizable, and responsive Instagram feeds.
6
+ Version: 2.0.1
7
Author: Smash Balloon
8
Author URI: https://smashballoon.com/
9
License: GPLv2 or later
23
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
24
*/
25
if ( ! defined( 'SBIVER' ) ) {
26
+ define( 'SBIVER', '2.0.1' );
27
}
28
// Db version.
29
if ( ! defined( 'SBI_DBVERSION' ) ) {
420
421
update_option( 'sbi_statuses', $sbi_statuses_option, false );
422
423
+ if ( is_callable( 'sb_instagram_clear_page_caches' ) ) {
424
+ sb_instagram_clear_page_caches();
425
+ }
426
+
427
}
428
429
update_option( 'sbi_db_version', SBI_DBVERSION );
js/sb-instagram-2-0-1.js ADDED
@@ -0,0 +1,840 @@
1
+ var sbi_js_exists = (typeof sbi_js_exists !== 'undefined') ? true : false;
2
+ if(!sbi_js_exists) {
3
+ (function($){
4
+
5
+ function sbiAddImgLiquid() {
6
+ /*! imgLiquid v0.9.944 / 03-05-2013 https://github.com/karacas/imgLiquid */
7
+ var sbi_imgLiquid = sbi_imgLiquid || {VER: "0.9.944"};
8
+ sbi_imgLiquid.bgs_Available = !1, sbi_imgLiquid.bgs_CheckRunned = !1, function (i) {
9
+ function t() {
10
+ if (!sbi_imgLiquid.bgs_CheckRunned) {
11
+ sbi_imgLiquid.bgs_CheckRunned = !0;
12
+ var t = i('<span style="background-size:cover" />');
13
+ i("body").append(t), !function () {
14
+ var i = t[0];
15
+ if (i && window.getComputedStyle) {
16
+ var e = window.getComputedStyle(i, null);
17
+ e && e.backgroundSize && (sbi_imgLiquid.bgs_Available = "cover" === e.backgroundSize)
18
+ }
19
+ }(), t.remove()
20
+ }
21
+ }
22
+
23
+ i.fn.extend({
24
+ sbi_imgLiquid: function (e) {
25
+ this.defaults = {
26
+ fill: !0,
27
+ verticalAlign: "center",
28
+ horizontalAlign: "center",
29
+ useBackgroundSize: !0,
30
+ useDataHtmlAttr: !0,
31
+ responsive: !0,
32
+ delay: 0,
33
+ fadeInTime: 0,
34
+ removeBoxBackground: !0,
35
+ hardPixels: !0,
36
+ responsiveCheckTime: 500,
37
+ timecheckvisibility: 500,
38
+ onStart: null,
39
+ onFinish: null,
40
+ onItemStart: null,
41
+ onItemFinish: null,
42
+ onItemError: null
43
+ }, t();
44
+ var a = this;
45
+ return this.options = e, this.settings = i.extend({}, this.defaults, this.options), this.settings.onStart && this.settings.onStart(), this.each(function (t) {
46
+ function e() {
47
+ -1 === u.css("background-image").indexOf(encodeURI(c.attr("src"))) && u.css({"background-image": 'url("' + encodeURI(c.attr("src")) + '")'}), u.css({
48
+ "background-size": g.fill ? "cover" : "contain",
49
+ "background-position": (g.horizontalAlign + " " + g.verticalAlign).toLowerCase(),
50
+ "background-repeat": "no-repeat"
51
+ }), i("a:first", u).css({
52
+ display: "block",
53
+ width: "100%",
54
+ height: "100%"
55
+ }), i("img", u).css({display: "none"}), g.onItemFinish && g.onItemFinish(t, u, c), u.addClass("sbi_imgLiquid_bgSize"), u.addClass("sbi_imgLiquid_ready"), l()
56
+ }
57
+
58
+ function o() {
59
+ function e() {
60
+ c.data("sbi_imgLiquid_error") || c.data("sbi_imgLiquid_loaded") || c.data("sbi_imgLiquid_oldProcessed") || (u.is(":visible") && c[0].complete && c[0].width > 0 && c[0].height > 0 ? (c.data("sbi_imgLiquid_loaded", !0), setTimeout(r, t * g.delay)) : setTimeout(e, g.timecheckvisibility))
61
+ }
62
+
63
+ if (c.data("oldSrc") && c.data("oldSrc") !== c.attr("src")) {
64
+ var a = c.clone().removeAttr("style");
65
+ return a.data("sbi_imgLiquid_settings", c.data("sbi_imgLiquid_settings")), c.parent().prepend(a), c.remove(), c = a, c[0].width = 0, void setTimeout(o, 10)
66
+ }
67
+ return c.data("sbi_imgLiquid_oldProcessed") ? void r() : (c.data("sbi_imgLiquid_oldProcessed", !1), c.data("oldSrc", c.attr("src")), i("img:not(:first)", u).css("display", "none"), u.css({overflow: "hidden"}), c.fadeTo(0, 0).removeAttr("width").removeAttr("height").css({
68
+ visibility: "visible",
69
+ "max-width": "none",
70
+ "max-height": "none",
71
+ width: "auto",
72
+ height: "auto",
73
+ display: "block"
74
+ }), c.on("error", n), c[0].onerror = n, e(), void d())
75
+ }
76
+
77
+ function d() {
78
+ (g.responsive || c.data("sbi_imgLiquid_oldProcessed")) && c.data("sbi_imgLiquid_settings") && (g = c.data("sbi_imgLiquid_settings"), u.actualSize = u.get(0).offsetWidth + u.get(0).offsetHeight / 1e4, u.sizeOld && u.actualSize !== u.sizeOld && r(), u.sizeOld = u.actualSize, setTimeout(d, g.responsiveCheckTime))
79
+ }
80
+
81
+ function n() {
82
+ c.data("sbi_imgLiquid_error", !0), u.addClass("sbi_imgLiquid_error"), g.onItemError && g.onItemError(t, u, c), l()
83
+ }
84
+
85
+ function s() {
86
+ var i = {};
87
+ if (a.settings.useDataHtmlAttr) {
88
+ var t = u.attr("data-sbi_imgLiquid-fill"),
89
+ e = u.attr("data-sbi_imgLiquid-horizontalAlign"),
90
+ o = u.attr("data-sbi_imgLiquid-verticalAlign");
91
+ ("true" === t || "false" === t) && (i.fill = Boolean("true" === t)), void 0 === e || "left" !== e && "center" !== e && "right" !== e && -1 === e.indexOf("%") || (i.horizontalAlign = e), void 0 === o || "top" !== o && "bottom" !== o && "center" !== o && -1 === o.indexOf("%") || (i.verticalAlign = o)
92
+ }
93
+ return sbi_imgLiquid.isIE && a.settings.ieFadeInDisabled && (i.fadeInTime = 0), i
94
+ }
95
+
96
+ function r() {
97
+ var i, e, a, o, d, n, s, r, m = 0, h = 0, f = u.width(), v = u.height();
98
+ void 0 === c.data("owidth") && c.data("owidth", c[0].width), void 0 === c.data("oheight") && c.data("oheight", c[0].height), g.fill === f / v >= c.data("owidth") / c.data("oheight") ? (i = "100%", e = "auto", a = Math.floor(f), o = Math.floor(f * (c.data("oheight") / c.data("owidth")))) : (i = "auto", e = "100%", a = Math.floor(v * (c.data("owidth") / c.data("oheight"))), o = Math.floor(v)), d = g.horizontalAlign.toLowerCase(), s = f - a, "left" === d && (h = 0), "center" === d && (h = .5 * s), "right" === d && (h = s), -1 !== d.indexOf("%") && (d = parseInt(d.replace("%", ""), 10), d > 0 && (h = s * d * .01)), n = g.verticalAlign.toLowerCase(), r = v - o, "left" === n && (m = 0), "center" === n && (m = .5 * r), "bottom" === n && (m = r), -1 !== n.indexOf("%") && (n = parseInt(n.replace("%", ""), 10), n > 0 && (m = r * n * .01)), g.hardPixels && (i = a, e = o), c.css({
99
+ width: i,
100
+ height: e,
101
+ "margin-left": Math.floor(h),
102
+ "margin-top": Math.floor(m)
103
+ }), c.data("sbi_imgLiquid_oldProcessed") || (c.fadeTo(g.fadeInTime, 1), c.data("sbi_imgLiquid_oldProcessed", !0), g.removeBoxBackground && u.css("background-image", "none"), u.addClass("sbi_imgLiquid_nobgSize"), u.addClass("sbi_imgLiquid_ready")), g.onItemFinish && g.onItemFinish(t, u, c), l()
104
+ }
105
+
106
+ function l() {
107
+ t === a.length - 1 && a.settings.onFinish && a.settings.onFinish()
108
+ }
109
+
110
+ var g = a.settings, u = i(this), c = i("img:first", u);
111
+ return c.length ? (c.data("sbi_imgLiquid_settings") ? (u.removeClass("sbi_imgLiquid_error").removeClass("sbi_imgLiquid_ready"), g = i.extend({}, c.data("sbi_imgLiquid_settings"), a.options)) : g = i.extend({}, a.settings, s()), c.data("sbi_imgLiquid_settings", g), g.onItemStart && g.onItemStart(t, u, c), void (sbi_imgLiquid.bgs_Available && g.useBackgroundSize ? e() : o())) : void n()
112
+ })
113
+ }
114
+ })
115
+ }(jQuery);
116
+
117
+ // Use imagefill to set the images as backgrounds so they can be square
118
+ !function () {
119
+ var css = sbi_imgLiquid.injectCss,
120
+ head = document.getElementsByTagName('head')[0],
121
+ style = document.createElement('style');
122
+ style.type = 'text/css';
123
+ if (style.styleSheet) {
124
+ style.styleSheet.cssText = css;
125
+ } else {
126
+ style.appendChild(document.createTextNode(css));
127
+ }
128
+ head.appendChild(style);
129
+ }();
130
+ }
131
+
132
+ function sbiAddVisibilityListener() {
133
+ /* Detect when element becomes visible. Used for when the feed is initially hidden, in a tab for example. https://github.com/shaunbowe/jquery.visibilityChanged */
134
+ !function (i) {
135
+ var n = {
136
+ callback: function () {
137
+ }, runOnLoad: !0, frequency: 100, sbiPreviousVisibility: null
138
+ }, c = {};
139
+ c.sbiCheckVisibility = function (i, n) {
140
+ if (jQuery.contains(document, i[0])) {
141
+ var e = n.sbiPreviousVisibility, t = i.is(":visible");
142
+ n.sbiPreviousVisibility = t, null == e ? n.runOnLoad && n.callback(i, t) : e !== t && n.callback(i, t), setTimeout(function () {
143
+ c.sbiCheckVisibility(i, n)
144
+ }, n.frequency)
145
+ }
146
+ }, i.fn.sbiVisibilityChanged = function (e) {
147
+ var t = i.extend({}, n, e);
148
+ return this.each(function () {
149
+ c.sbiCheckVisibility(i(this), t)
150
+ })
151
+ }
152
+ }(jQuery);
153
+ }
154
+
155
+ function Sbi() {
156
+ this.feeds = {};
157
+ this.options = sb_instagram_js_options;
158
+ }
159
+
160
+ Sbi.prototype = {
161
+ createPage: function (createFeeds, createFeedsArgs) {
162
+ if (typeof window.sbiajaxurl === 'undefined' || window.sbiajaxurl.indexOf(window.location.hostname) === -1) {
163
+ window.sbiajaxurl = window.location.hostname + '/wp-admin/admin-ajax.php';
164
+ }
165
+
166
+ $('.sbi_no_js_error_message').remove();
167
+ $('.sbi_no_js').removeClass('sbi_no_js');
168
+ createFeeds(createFeedsArgs);
169
+ },
170
+ createFeeds: function (args) {
171
+ args.whenFeedsCreated(
172
+ $('.sbi').each(function (index) {
173
+ $(this).attr('data-sbi-index', index + 1);
174
+ var $self = $(this),
175
+ flags = typeof $self.attr('data-sbi-flags') !== 'undefined' ? $self.attr('data-sbi-flags').split(',') : [],
176
+ general = typeof $self.attr('data-options') !== 'undefined' ? JSON.parse($self.attr('data-options')) : {};
177
+ if (flags.indexOf('testAjax') > -1) {
178
+ window.sbi.triggeredTest = true;
179
+ var submitData = {
180
+ 'action' : 'sbi_on_ajax_test_trigger'
181
+ },
182
+ onSuccess = function(data) {
183
+ console.log('did test');
184
+ };
185
+ sbiAjax(submitData,onSuccess)
186
+ }
187
+ var feedOptions = {
188
+ cols : $self.attr('data-cols'),
189
+ colsmobile : $self.attr('data-colsmobile') !== 'same' ? $self.attr('data-colsmobile') : $self.attr('data-cols'),
190
+ num : $self.attr('data-num'),
191
+ imgRes : $self.attr('data-res'),
192
+ feedID : $self.attr('data-feedid'),
193
+ shortCodeAtts : $self.attr('data-shortcode-atts'),
194
+ resizingEnabled : (flags.indexOf('resizeDisable') === -1),
195
+ imageLoadEnabled : (flags.indexOf('imageLoadDisable') === -1),
196
+ debugEnabled : (flags.indexOf('debug') > -1),
197
+ favorLocal : (flags.indexOf('favorLocal') > -1),
198
+ ajaxPostLoad : (flags.indexOf('ajaxPostLoad') > -1),
199
+ autoMinRes : 1,
200
+ general : general
201
+ };
202
+
203
+ window.sbi.feeds[index] = sbiGetNewFeed(this, index, feedOptions);
204
+ window.sbi.feeds[index].setResizedImages();
205
+ window.sbi.feeds[index].init();
206
+
207
+ var evt = jQuery.Event('sbiafterfeedcreate');
208
+ evt.feed = window.sbi.feeds[index];
209
+ jQuery(window).trigger(evt);
210
+
211
+ })
212
+ );
213
+ },
214
+ afterFeedsCreated: function () {
215
+ // enable header hover action
216
+ $('.sb_instagram_header').each(function () {
217
+ var $thisHeader = $(this);
218
+ $thisHeader.find('.sbi_header_link').hover(function () {
219
+ $thisHeader.find('.sbi_header_img_hover').addClass('sbi_fade_in');
220
+ }, function () {
221
+ $thisHeader.find('.sbi_header_img_hover').removeClass('sbi_fade_in');
222
+ });
223
+ });
224
+
225
+ },
226
+ encodeHTML: function(raw) {
227
+ // make sure passed variable is defined
228
+ if (typeof raw === 'undefined') {
229
+ return '';
230
+ }
231
+ // replace greater than and less than symbols with html entity to disallow html in comments
232
+ var encoded = raw.replace(/(>)/g,'&gt;'),
233
+ encoded = encoded.replace(/(<)/g,'&lt;');
234
+ encoded = encoded.replace(/(&lt;br\/&gt;)/g,'<br>');
235
+ encoded = encoded.replace(/(&lt;br&gt;)/g,'<br>');
236
+
237
+ return encoded;
238
+ },
239
+ urlDetect: function(text) {
240
+ var urlRegex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g;
241
+ return text.match(urlRegex);
242
+ }
243
+ };
244
+
245
+ function SbiFeed(el, index, settings) {
246
+ this.el = el;
247
+ this.index = index;
248
+ this.settings = settings;
249
+ this.minImageWidth = 0;
250
+ this.imageResolution = 150;
251
+ this.resizedImages = {};
252
+ this.needsResizing = [];
253
+ this.outOfPages = false;
254
+ this.isInitialized = false;
255
+ }
256
+
257
+ SbiFeed.prototype = {
258
+ init: function() {
259
+ var feed = this;
260
+ if (this.settings.ajaxPostLoad) {
261
+ this.getNewPostSet();
262
+ } else {
263
+ this.afterInitialImagesLoaded();
264
+ //Only check the width once the resize event is over
265
+ var sbi_delay = (function () {
266
+ var sbi_timer = 0;
267
+ return function (sbi_callback, sbi_ms) {
268
+ clearTimeout(sbi_timer);
269
+ sbi_timer = setTimeout(sbi_callback, sbi_ms);
270
+ };
271
+ })();
272
+ jQuery(window).resize(function () {
273
+ sbi_delay(function () {
274
+ feed.afterResize();
275
+ }, 500);
276
+ });
277
+ }
278
+
279
+ },
280
+ initLayout: function() {
281
+
282
+ },
283
+ afterInitialImagesLoaded: function() {
284
+ this.initLayout();
285
+ this.loadMoreButtonInit();
286
+ this.hideExtraImagesForWidth();
287
+ this.beforeNewImagesRevealed();
288
+ this.revealNewImages();
289
+ this.afterNewImagesRevealed();
290
+ },
291
+ afterResize: function() {
292
+ this.setImageHeight();
293
+ this.setImageResolution();
294
+ this.maybeRaiseImageResolution();
295
+ this.setImageSizeClass();
296
+ },
297
+ afterLoadMoreClicked: function($button) {
298
+ $button.find('.sbi_loader').removeClass('sbi_hidden');
299
+ $button.find('.sbi_btn_text').addClass('sbi_hidden');
300
+ $button.closest('.sbi').find('.sbi_num_diff_hide').addClass('sbi_transition').removeClass('sbi_num_diff_hide');
301
+ },
302
+ afterNewImagesLoaded: function() {
303
+ var $self = $(this.el),
304
+ feed = this;
305
+ this.beforeNewImagesRevealed();
306
+ this.revealNewImages();
307
+ this.afterNewImagesRevealed();
308
+ setTimeout(function () {
309
+ //Hide the loader in the load more button
310
+ $self.find('.sbi_loader').addClass('sbi_hidden');
311
+ $self.find('.sbi_btn_text').removeClass('sbi_hidden');
312
+ }, 500);
313
+ },
314
+ beforeNewImagesRevealed: function() {
315
+ this.setImageHeight();
316
+ this.maybeRaiseImageResolution(true);
317
+ this.setImageSizeClass();
318
+ },
319
+ revealNewImages: function() {
320
+ var $self = $(this.el),
321
+ feed = this;
322
+
323
+ // Call Custom JS if it exists
324
+ if (typeof sbi_custom_js == 'function') setTimeout(function(){ sbi_custom_js(); }, 100);
325
+
326
+ this.applyImageLiquid();
327
+ $self.find('.sbi_item').each(function (index) {
328
+ var $self = jQuery(this);
329
+
330
+ //Photo links
331
+ //If lightbox is disabled
332
+ $self.find('.sbi_photo').hover(function () {
333
+ jQuery(this).fadeTo(200, 0.85);
334
+ }, function () {
335
+ jQuery(this).stop().fadeTo(500, 1);
336
+ });
337
+
338
+ }); //End .sbi_item each
339
+
340
+ //Remove the new class after 500ms, once the sorting is done
341
+ setTimeout(function () {
342
+ jQuery('#sbi_images .sbi_item.sbi_new').removeClass('sbi_new');
343
+ //Loop through items and remove class to reveal them
344
+ var time = 10;
345
+ $self.find('.sbi_transition').each(function() {
346
+ var $sbi_item_transition_el = jQuery(this);
347
+
348
+ setTimeout( function(){
349
+ $sbi_item_transition_el.removeClass('sbi_transition');
350
+ }, time);
351
+ time += 10;
352
+ });
353
+ }, 500);
354
+ },
355
+ afterNewImagesRevealed: function() {
356
+ this.listenForVisibilityChange();
357
+ this.sendNeedsResizingToServer();
358
+
359
+ var evt = $.Event('sbiafterimagesloaded');
360
+ evt.el = $(this.el);
361
+ $(window).trigger(evt);
362
+ },
363
+ setResizedImages: function () {
364
+ if ($(this.el).find('.sbi_resized_image_data').length
365
+ && typeof $(this.el).find('.sbi_resized_image_data').attr('data-resized') !== 'undefined'
366
+ && $(this.el).find('.sbi_resized_image_data').attr('data-resized').indexOf('{"') === 0) {
367
+ this.resizedImages = JSON.parse($(this.el).find('.sbi_resized_image_data').attr('data-resized'));
368
+ $(this.el).find('.sbi_resized_image_data').remove();
369
+ }
370
+ },
371
+ sendNeedsResizingToServer: function() {
372
+ var feed = this;
373
+ if (feed.needsResizing.length > 0 && feed.settings.resizingEnabled) {
374
+ var itemOffset = $(this.el).find('.sbi_item').length;
375
+
376
+ var submitData = {
377
+ action: 'sbi_resized_images_submit',
378
+ needs_resizing: feed.needsResizing,
379
+ offset: itemOffset,
380
+ feed_id: feed.settings.feedID,
381
+ atts: feed.settings.shortCodeAtts,
382
+ };
383
+ var onSuccess = function(data) {
384
+ if (data.trim().indexOf('{') === 0) {
385
+ var response = JSON.parse(data);
386
+ if (feed.settings.debugEnabled) {
387
+ console.log(response);
388
+ }
389
+ }
390
+ };
391
+ sbiAjax(submitData,onSuccess);
392
+ }
393
+ },
394
+ loadMoreButtonInit: function () {
395
+ var $self = $(this.el),
396
+ feed = this;
397
+ $self.find('#sbi_load .sbi_load_btn').off().on('click', function () {
398
+
399
+ feed.afterLoadMoreClicked(jQuery(this));
400
+ feed.getNewPostSet();
401
+
402
+ }); //End click event
403
+ },
404
+ getNewPostSet: function () {
405
+ var $self = $(this.el),
406
+ feed = this;
407
+ var itemOffset = $self.find('.sbi_item').length,
408
+ submitData = {
409
+ action: 'sbi_load_more_clicked',
410
+ offset: itemOffset,
411
+ feed_id: feed.settings.feedID,
412
+ atts: feed.settings.shortCodeAtts,
413
+ current_resolution: feed.imageResolution
414
+ };
415
+ var onSuccess = function (data) {
416
+ if (data.trim().indexOf('{') === 0) {
417
+ var response = JSON.parse(data);
418
+ if (feed.settings.debugEnabled) {
419
+ console.log(response);
420
+ }
421
+ feed.appendNewPosts(response.html);
422
+ feed.addResizedImages(response.resizedImages);
423
+ if (feed.settings.ajaxPostLoad) {
424
+ feed.settings.ajaxPostLoad = false;
425
+ feed.afterInitialImagesLoaded();
426
+ } else {
427
+ feed.afterNewImagesLoaded();
428
+ }
429
+
430
+ if (!response.feedStatus.shouldPaginate) {
431
+ feed.outOfPages = true;
432
+ $self.find('.sbi_load_btn').hide();
433
+ } else {
434
+ feed.outOfPages = false;
435
+ }
436
+ }
437
+
438
+ };
439
+ sbiAjax(submitData, onSuccess);
440
+ },
441
+ appendNewPosts: function (newPostsHtml) {
442
+ var $self = $(this.el),
443
+ feed = this;
444
+ if ($self.find('#sbi_images .sbi_item').length) {
445
+ $self.find('#sbi_images .sbi_item').last().after(newPostsHtml);
446
+ } else {
447
+ $self.find('#sbi_images').append(newPostsHtml);
448
+ }
449
+ },
450
+ addResizedImages: function (resizedImagesToAdd) {
451
+ for (var imageID in resizedImagesToAdd) {
452
+ this.resizedImages[imageID] = resizedImagesToAdd[imageID];
453
+ }
454
+ },
455
+ setImageHeight: function() {
456
+ var $self = $(this.el);
457
+
458
+ var sbi_photo_width = $self.find('.sbi_photo').eq(0).innerWidth();
459
+
460
+ //Figure out number of columns for either desktop or mobile
461
+ var sbi_num_cols = this.getColumnCount();
462
+
463
+ //Figure out what the width should be using the number of cols
464
+ //Figure out what the width should be using the number of cols
465
+ var imagesPadding = $self.find('#sbi_images').innerWidth() - $self.find('#sbi_images').width(),
466
+ imagepadding = imagesPadding / 2;
467
+ sbi_photo_width_manual = ( $self.find('#sbi_images').width() / sbi_num_cols ) - imagesPadding;
468
+ //If the width is less than it should be then set it manually
469
+ //if( sbi_photo_width <= (sbi_photo_width_manual) ) sbi_photo_width = sbi_photo_width_manual;
470
+
471
+ $self.find('.sbi_photo').css('height', sbi_photo_width);
472
+
473
+ //Set the position of the carousel arrows
474
+ if ($self.find('.sbi-owl-nav').length) {
475
+ setTimeout(function(){
476
+ //If there's 2 rows then adjust position
477
+ var sbi_ratio = 2;
478
+ if( $self.find('.sbi_owl2row-item').length ) sbi_ratio = 1;
479
+
480
+ var sbi_arrows_top = ($self.find('.sbi_photo').eq(0).innerWidth()/sbi_ratio);
481
+ sbi_arrows_top += parseInt(imagepadding)*(2+(2-sbi_ratio));
482
+ $self.find('.sbi-owl-nav div').css('top', sbi_arrows_top);
483
+ }, 100);
484
+ }
485
+
486
+ },
487
+ maybeRaiseSingleImageResolution: function ($item, index, forceChange) {
488
+ var feed = this,
489
+ imgSrcSet = feed.getImageUrls($item),
490
+ currentUrl = $item.find('.sbi_photo img').attr('src'),
491
+ currentRes = 150,
492
+ imagEl = $item.find('img').get(0),
493
+ aspectRatio = currentUrl === window.sbi.options.placeholder ? 1 : imagEl.naturalWidth/imagEl.naturalHeight,
494
+ forceChange = typeof forceChange !== 'undefined' ? forceChange : false;
495
+
496
+ $.each(imgSrcSet, function (index, value) {
497
+ if (value === currentUrl) {
498
+ currentRes = parseInt(index);
499
+ // If the image has already been changed to an existing real source, don't force the change
500
+ forceChange = false;
501
+ }
502
+ });
503
+
504
+ //Image res
505
+ var newRes = 640;
506
+ switch (feed.settings.imgRes) {
507
+ case 'thumb':
508
+ newRes = 150;
509
+ break;
510
+ case 'medium':
511
+ newRes = 320;
512
+ break;
513
+ case 'full':
514
+ newRes = 640;
515
+ break;
516
+ default:
517
+ var minImageWidth = Math.max(feed.settings.autoMinRes,$item.find('.sbi_photo').innerWidth()),
518
+ thisImageReplace = feed.getBestResolutionForAuto(minImageWidth, aspectRatio, $item);
519
+ switch (thisImageReplace) {
520
+ case 320:
521
+ newRes = 320;
522
+ break;
523
+ case 150:
524
+ newRes = 150;
525
+ break;
526
+ }
527
+ break;
528
+ }
529
+
530
+ if (newRes > currentRes || currentUrl === window.sbi.options.placeholder || forceChange) {
531
+ if (feed.settings.debugEnabled) {
532
+ var reason = currentUrl === window.sbi.options.placeholder ? 'was placeholder' : 'too small';
533
+ console.log('rais res for ' + currentUrl, reason);
534
+ }
535
+ var newUrl = imgSrcSet[newRes].split("?ig_cache_key")[0];
536
+ $item.find('.sbi_photo img').attr('src', newUrl);
537
+ $item.find('.sbi_photo').css('background-image', 'url("' + newUrl + '")');
538
+
539
+ var checked = false;
540
+ $item.find('.sbi_photo img').on('load', function () {
541
+
542
+ var $this_image = $(this);
543
+ var newAspectRatio = ($this_image.get(0).naturalWidth / $this_image.get(0).naturalHeight);
544
+
545
+ if ($this_image.get(0).naturalWidth !== 1000 && newAspectRatio > aspectRatio && !checked) {
546
+ if (feed.settings.debugEnabled) {
547
+ console.log('rais res again for aspect ratio change ' + currentUrl);
548
+ }
549
+ checked = true;
550
+ minImageWidth = $item.find('.sbi_photo').innerWidth();
551
+ thisImageReplace = feed.getBestResolutionForAuto(minImageWidth, newAspectRatio, $item);
552
+ newRes = 640;
553
+ switch (thisImageReplace) {
554
+ case 320:
555
+ newRes = 320;
556
+ break;
557
+ case 150:
558
+ newRes = 150;
559
+ break;
560
+ }
561
+
562
+ if (newRes > currentRes) {
563
+ newUrl = imgSrcSet[newRes].split("?ig_cache_key")[0];
564
+ $this_image.attr('src', newUrl);
565
+ $this_image.closest('.sbi_photo').css('background-image', 'url("' + newUrl + '")');
566
+ }
567
+ if (feed.layout === 'masonry' || feed.layout === 'highlight') {
568
+ $(feed.el).find('#sbi_images').smashotope(feed.isotopeArgs);
569
+ setTimeout(function() {
570
+ $(feed.el).find('#sbi_images').smashotope(feed.isotopeArgs);
571
+ },500)
572
+ }
573
+ } else {
574
+ if (feed.settings.debugEnabled) {
575
+ var reason = checked ? 'already checked' : 'no aspect ratio change';
576
+ console.log('not raising res for replacement ' + currentUrl, reason);
577
+ }
578
+ }
579
+ });
580
+
581
+ }
582
+
583
+ $item.find('img').on('error', function () {
584
+ if (!$(this).hasClass('sbi_img_error')) {
585
+ $(this).addClass('sbi_img_error');
586
+ var sourceFromAPI = ($(this).attr('src').indexOf('media?size=') > -1 || $(this).attr('src').indexOf('cdninstagram') > -1 || $(this).attr('src').indexOf('fbcdn') > -1)
587
+
588
+ if (!sourceFromAPI) {
589
+ if (typeof $(this).closest('.sbi_photo').attr('data-full-res') !== 'undefined') {
590
+ $(this).attr('src', $(this).closest('.sbi_photo').attr('data-full-res'));
591
+ $(this).closest('.sbi_photo').css('background-image', 'url(' + $(this).closest('.sbi_photo').attr('data-full-res') + ')');
592
+ } else if ($(this).closest('.sbi_photo').attr('href') !== 'undefined') {
593
+ $(this).attr('src', $(this).closest('.sbi_photo').attr('href') + 'media?size=l');
594
+ $(this).closest('.sbi_photo').css('background-image', 'url(' + $(this).closest('.sbi_photo').attr('href') + 'media?size=l)');
595
+ }
596
+ } else {
597
+ feed.settings.favorLocal = true;
598
+ var srcSet = feed.getImageUrls($(this).closest('.sbi_item'));
599
+ if (typeof srcSet[640] !== 'undefined') {
600
+ $(this).attr('src', srcSet[640]);
601
+ $(this).closest('.sbi_photo').css('background-image', 'url(' + srcSet[640] + ')');
602
+ }
603
+ }
604
+ setTimeout(function() {
605
+ feed.afterResize();
606
+ }, 1500)
607
+ } else {
608
+ console.log('unfixed error ' + $(this).attr('src'));
609
+ }
610
+ });
611
+ },
612
+ maybeRaiseImageResolution: function (justNew) {
613
+ var feed = this,
614
+ itemsSelector = typeof justNew !== 'undefined' && justNew === true ? '.sbi_item.sbi_new' : '.sbi_item',
615
+ forceChange = !feed.isInitialized ? true : false;
616
+ $(feed.el).find(itemsSelector).each(function (index) {
617
+ if (!$(this).hasClass('sbi_num_diff_hide')
618
+ && $(this).find('.sbi_photo').length
619
+ && typeof $(this).find('.sbi_photo').attr('data-img-src-set') !== 'undefined') {
620
+ feed.maybeRaiseSingleImageResolution($(this),index,forceChange);
621
+ }
622
+ }); //End .sbi_item each
623
+ feed.isInitialized = true;
624
+ },
625
+ getBestResolutionForAuto: function(colWidth, aspectRatio, $item) {
626
+ if (isNaN(aspectRatio) || aspectRatio < 1) {
627
+ aspectRatio = 1;
628
+ }
629
+ var bestWidth = colWidth * aspectRatio,
630
+ bestWidthRounded = Math.ceil(bestWidth / 10) * 10,
631
+ customSizes = [150, 320, 640];
632
+
633
+ if ($item.hasClass('sbi_highlighted')) {
634
+ bestWidthRounded = bestWidthRounded *2;
635
+ }
636
+
637
+ if (customSizes.indexOf(parseInt(bestWidthRounded)) === -1) {
638
+ var done = false;
639
+ $.each(customSizes, function (index, item) {
640
+ if (item > parseInt(bestWidthRounded) && !done) {
641
+ bestWidthRounded = item;
642
+
643
+ done = true;
644
+ }
645
+ });
646
+ }
647
+
648
+ return bestWidthRounded;
649
+ },
650
+ hideExtraImagesForWidth: function() {
651
+ if (this.layout === 'carousel') {
652
+ return;
653
+ }
654
+ var $self = $(this.el),
655
+ num = typeof $self.attr('data-num') !== 'undefined' && $self.attr('data-num') !== '' ? parseInt($self.attr('data-num')) : 1,
656
+ nummobile = typeof $self.attr('data-nummobile') !== 'undefined' && $self.attr('data-nummobile') !== '' ? parseInt($self.attr('data-nummobile')) : num;
657
+
658
+ if ($(window).width() < 480) {
659
+ if (nummobile < $self.find('.sbi_item').length) {
660
+ $self.find('.sbi_item').slice(nummobile - $self.find('.sbi_item').length).addClass('sbi_num_diff_hide');
661
+ }
662
+ } else {
663
+ if (num < $self.find('.sbi_item').length) {
664
+ $self.find('.sbi_item').slice(num - $self.find('.sbi_item').length).addClass('sbi_num_diff_hide');
665
+ }
666
+ }
667
+ },
668
+ setImageSizeClass: function () {
669
+ var $self = $(this.el);
670
+ $self.removeClass('sbi_small sbi_medium');
671
+ var feedWidth = $self.innerWidth(),
672
+ photoPadding = parseInt(($self.find('#sbi_images').outerWidth() - $self.find('#sbi_images').width())) / 2,
673
+ cols = this.getColumnCount(),
674
+ feedWidthSansPadding = feedWidth - (photoPadding * (cols+2)),
675
+ colWidth = (feedWidthSansPadding / cols);
676
+ if (colWidth > 120 && colWidth < 240) {
677
+ $self.addClass('sbi_medium');
678
+ } else if (colWidth <= 120) {
679
+ $self.addClass('sbi_small');
680
+ }
681
+ },
682
+ setMinImageWidth: function () {
683
+ if ($(this.el).find('.sbi_item .sbi_photo').first().length) {
684
+ this.minImageWidth = $(this.el).find('.sbi_item .sbi_photo').first().innerWidth();
685
+ } else {
686
+ this.minImageWidth = 150;
687
+ }
688
+ },
689
+