Instagram Slider Widget - Version 1.1.2

Version Description

  • minor bug fix
  • Added Optional Slider Caption Overlay template
Download this release

Release Info

Developer jetonr
Plugin Icon 128x128 Instagram Slider Widget
Version 1.1.2
Comparing to
See all releases

Code changes from version 1.1.1 to 1.1.2

Files changed (5) hide show
  1. assets/css/instag-slider.css +11 -8
  2. instaram_slider.php +4 -3
  3. readme.txt +4 -0
  4. views/slider-overlay.php +62 -0
  5. views/slider.php +6 -18
assets/css/instag-slider.css CHANGED
@@ -20,18 +20,21 @@
20
  .instag ul.thumbnails img { width: 100%; }
21
 
22
  /* Control Nav */
23
- .pllexislider .pllex-control-nav { display:none; z-index:2; position: absolute; top: 10px; right: 0px; padding: 0 15px; margin-right: auto; margin-left: auto }
 
24
  .pllexislider .pllex-control-nav li { margin: 0 3px; display: inline-block; zoom: 1; *display: inline; }
25
  .pllexislider .pllex-control-paging li a { width: 11px; border: none; height: 11px; display: block; background: #fff; background: rgba(255,255,255,255,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 2px rgba(0,0,0,0.3); -o-box-shadow: inset 0 0 2px rgba(0,0,0,0.3); box-shadow: inset 0 0 2px rgba(0,0,0,0.3); }
26
  .pllexislider .pllex-control-paging li a:hover,
27
  .pllexislider .pllex-control-paging li a.pllex-active { background: rgba(0,0,0,0.6); -webkit-box-shadow: 0px 0px 1px 2px rgba(255,255,255,1); -moz-box-shadow: 0px 0px 1px 2px rgba(255,255,255,0.7); box-shadow: 0px 0px 1px 2px rgba(255,255,255,1);}
28
  .pllexislider .pllex-control-paging li a.pllex-active { cursor: default; }
29
 
30
- /* Description and Time */
31
- .pllexislider ul li .jr-insta-wrap { position: relative; color: #FFF; line-height: normal; }
32
- .pllexislider ul li .jr-insta-wrap .jr-insta-datacontainer { position: absolute; display: none; left: 0; bottom: 0; width: 100%; text-shadow: 0 0 5px rgba(0,0,0,0.7); background: rgba(0,0,0,0.4); padding: 5px 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
33
- .pllexislider ul li .jr-insta-wrap .jr-insta-datacontainer .jr-insta-desc { line-height: normal; color: #FFF; margin-top: 5px; margin-bottom: 5px; display: block; }
34
- .pllexislider ul li .jr-insta-wrap .jr-insta-datacontainer .jr-insta-time { width: 40%; float:right; text-align: right; }
35
- .pllexislider ul li .jr-insta-wrap .jr-insta-datacontainer .jr-insta-username a { color: #FFF !important; text-decoration: none; font-weight: bold; }
36
-
37
 
 
 
 
 
 
 
20
  .instag ul.thumbnails img { width: 100%; }
21
 
22
  /* Control Nav */
23
+ .pllexislider .pllex-control-nav { z-index:2; position: absolute; top: 10px; right: 0px; padding: 0 15px; margin-right: auto; margin-left: auto }
24
+ .pllexislider.overlay .pllex-control-nav { display:none; }
25
  .pllexislider .pllex-control-nav li { margin: 0 3px; display: inline-block; zoom: 1; *display: inline; }
26
  .pllexislider .pllex-control-paging li a { width: 11px; border: none; height: 11px; display: block; background: #fff; background: rgba(255,255,255,255,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 2px rgba(0,0,0,0.3); -o-box-shadow: inset 0 0 2px rgba(0,0,0,0.3); box-shadow: inset 0 0 2px rgba(0,0,0,0.3); }
27
  .pllexislider .pllex-control-paging li a:hover,
28
  .pllexislider .pllex-control-paging li a.pllex-active { background: rgba(0,0,0,0.6); -webkit-box-shadow: 0px 0px 1px 2px rgba(255,255,255,1); -moz-box-shadow: 0px 0px 1px 2px rgba(255,255,255,0.7); box-shadow: 0px 0px 1px 2px rgba(255,255,255,1);}
29
  .pllexislider .pllex-control-paging li a.pllex-active { cursor: default; }
30
 
31
+ /* Slider Normal */
32
+ .pllexislider.normal ul li .instadescription p { margin-top:5px; margin-bottom: 5px; display: block; }
33
+ .pllexislider.normal ul li .instatime { margin-top:5px; width: 40%; float:right; text-align: right; }
 
 
 
 
34
 
35
+ /* Slider Overlay */
36
+ .pllexislider.overlay ul li .jr-insta-wrap { position: relative; color: #FFF; line-height: normal; }
37
+ .pllexislider.overlay ul li .jr-insta-wrap .jr-insta-datacontainer { position: absolute; display: none; left: 0; bottom: 0; width: 100%; text-shadow: 0 0 5px rgba(0,0,0,0.7); background: rgba(0,0,0,0.4); padding: 5px 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
38
+ .pllexislider.overlay ul li .jr-insta-wrap .jr-insta-datacontainer .jr-insta-desc { line-height: normal; color: #FFF; margin-top: 5px; margin-bottom: 5px; display: block; }
39
+ .pllexislider.overlay ul li .jr-insta-wrap .jr-insta-datacontainer .jr-insta-time { width: 40%; float:right; text-align: right; }
40
+ .pllexislider.overlay ul li .jr-insta-wrap .jr-insta-datacontainer .jr-insta-username a { color: #FFF !important; text-decoration: none; font-weight: bold; }
instaram_slider.php CHANGED
@@ -2,7 +2,7 @@
2
  /*
3
  Plugin Name: Instagram Slider Widget
4
  Plugin URI: http://jrwebstudio.com/instagram-slider/
5
- Version: 1.1.1
6
  Description: Instagram Slider Widget is a responsive slider widget that shows 20 latest images from a public instagram user.
7
  Author: jetonr
8
  Author URI: http://jrwebstudio.com/
@@ -203,8 +203,9 @@ class JR_InstagramSlider extends WP_Widget {
203
  <p>
204
  <label for="<?php echo $this->get_field_id( 'template' ); ?>"><?php _e( 'Images Layout', 'jrinstaslider' ); ?>
205
  <select class="widefat" name="<?php echo $this->get_field_name( 'template' ); ?>">
206
- <option value="slider" <?php echo ($instance['template'] == 'slider') ? ' selected="selected"' : ''; ?>><?php _e('Slider', 'jrinstaslider'); ?></option>
207
- <option value="thumbs" <?php echo ($instance['template'] == 'thumbs') ? ' selected="selected"' : ''; ?>><?php _e('Thumbnails', 'jrinstaslider'); ?></option>
 
208
  </select>
209
  </label>
210
  </p>
2
  /*
3
  Plugin Name: Instagram Slider Widget
4
  Plugin URI: http://jrwebstudio.com/instagram-slider/
5
+ Version: 1.1.2
6
  Description: Instagram Slider Widget is a responsive slider widget that shows 20 latest images from a public instagram user.
7
  Author: jetonr
8
  Author URI: http://jrwebstudio.com/
203
  <p>
204
  <label for="<?php echo $this->get_field_id( 'template' ); ?>"><?php _e( 'Images Layout', 'jrinstaslider' ); ?>
205
  <select class="widefat" name="<?php echo $this->get_field_name( 'template' ); ?>">
206
+ <option value="slider" <?php echo ($instance['template'] == 'slider') ? ' selected="selected"' : ''; ?>><?php _e( 'Slider - Normal', 'jrinstaslider' ); ?></option>
207
+ <option value="slider-overlay" <?php echo ($instance['template'] == 'slider-overlay') ? ' selected="selected"' : ''; ?>><?php _e( 'Slider - Overlay Text', 'jrinstaslider' ); ?></option>
208
+ <option value="thumbs" <?php echo ($instance['template'] == 'thumbs') ? ' selected="selected"' : ''; ?>><?php _e( 'Thumbnails', 'jrinstaslider' ); ?></option>
209
  </select>
210
  </label>
211
  </p>
readme.txt CHANGED
@@ -39,6 +39,10 @@ Instagram Slider Widget is a responsive slider widget that shows 20 latest image
39
  3. Backend Configuration
40
 
41
  == Changelog ==
 
 
 
 
42
  = 1.1.1 =
43
  * The text and control for slider visible on mouse over
44
  * Reorganised Slider html format
39
  3. Backend Configuration
40
 
41
  == Changelog ==
42
+ = 1.1.2 =
43
+ * minor bug fix
44
+ * Added Optional Slider Caption Overlay template
45
+
46
  = 1.1.1 =
47
  * The text and control for slider visible on mouse over
48
  * Reorganised Slider html format
views/slider-overlay.php ADDED
@@ -0,0 +1,62 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <script type="text/javascript">
2
+ jQuery(document).ready(function($) {
3
+ $('.pllexislider').pllexislider({
4
+ animation: "fade",
5
+ directionNav: false,
6
+ start: function(slider){
7
+ slider.hover(
8
+ function () {
9
+ slider.find('.jr-insta-datacontainer, .pllex-control-nav').stop(true,true).fadeIn();
10
+ },
11
+ function () {
12
+ slider.find('.jr-insta-datacontainer, .pllex-control-nav').stop(true,true).fadeOut();
13
+ }
14
+ );
15
+ }
16
+ });
17
+ });
18
+ </script>
19
+ <div class="pllexislider overlay">
20
+ <ul class="no-bullet slides">
21
+ <?php
22
+ if ( isset($data_arr) && is_array($data_arr) ) {
23
+ foreach ($data_arr as $data) {
24
+ foreach ( $data as $k => $v) {
25
+ $$k = $v;
26
+ }
27
+
28
+ /* Set link to User Instagram Profile */
29
+ if ( $link_to && ( 'user_url' == $link_to ) ) {
30
+ $link = $user_url;
31
+ }
32
+
33
+ /* Set link to Locally saved image */
34
+ if ( $link_to && 'local_image_url' == $link_to ) {
35
+ $link = $image;
36
+ }
37
+
38
+ /* Set link to Custom URL */
39
+ if ( ( $link_to && 'custom_url' == $link_to ) && ( isset( $custom_url ) && $custom_url != '' ) ) {
40
+ $link = $custom_url;
41
+ }
42
+
43
+ echo '<li>'. "\n";
44
+ echo '<a target="_blank" href="'.$link.'"><img src="'.$image.'" alt="'.$text.'"></a>' . "\n";
45
+ echo '<div class="jr-insta-wrap">' . "\n";
46
+ echo '<div class="jr-insta-datacontainer">' . "\n";
47
+ if ( $created_time ) {
48
+ echo '<span class="jr-insta-time">'. human_time_diff( $created_time ) . ' ago</span>' . "\n";
49
+ }
50
+ echo '<span class="jr-insta-username">by <a target="_blank" href="'. $user_url .'">'. $user_name .'</a></span>' . "\n";
51
+ if ($text) {
52
+ echo '<span class="jr-insta-desc">'.$text.'</span>' . "\n";
53
+ }
54
+ echo '</div>' . "\n";
55
+ echo '</div>' . "\n";
56
+ echo '</li>' . "\n";
57
+
58
+ }
59
+ }
60
+ ?>
61
+ </ul>
62
+ </div>
views/slider.php CHANGED
@@ -1,22 +1,12 @@
1
  <script type="text/javascript">
2
  jQuery(document).ready(function($) {
3
  $('.pllexislider').pllexislider({
4
- animation: "fade",
5
  directionNav: false,
6
- start: function(slider){
7
- slider.hover(
8
- function () {
9
- slider.find('.jr-insta-datacontainer, .pllex-control-nav').stop(true,true).fadeIn();
10
- },
11
- function () {
12
- slider.find('.jr-insta-datacontainer, .pllex-control-nav').stop(true,true).fadeOut();
13
- }
14
- );
15
- }
16
  });
17
  });
18
  </script>
19
- <div class="pllexislider">
20
  <ul class="no-bullet slides">
21
  <?php
22
  if ( isset($data_arr) && is_array($data_arr) ) {
@@ -42,17 +32,15 @@ jQuery(document).ready(function($) {
42
 
43
  echo '<li>'. "\n";
44
  echo '<a target="_blank" href="'.$link.'"><img src="'.$image.'" alt="'.$text.'"></a>' . "\n";
45
- echo '<div class="jr-insta-wrap">' . "\n";
46
- echo '<div class="jr-insta-datacontainer">' . "\n";
47
  if ( $created_time ) {
48
- echo '<span class="jr-insta-time">'. human_time_diff( $created_time ) . ' ago</span>' . "\n";
49
  }
50
- echo '<span class="jr-insta-username">by <a target="_blank" href="'. $user_url .'">'. $user_name .'</a></span>' . "\n";
 
51
  if ($text) {
52
- echo '<span class="jr-insta-desc">'.$text.'</span>' . "\n";
53
  }
54
  echo '</div>' . "\n";
55
- echo '</div>' . "\n";
56
  echo '</li>' . "\n";
57
 
58
  }
1
  <script type="text/javascript">
2
  jQuery(document).ready(function($) {
3
  $('.pllexislider').pllexislider({
4
+ animation: "slide",
5
  directionNav: false,
 
 
 
 
 
 
 
 
 
 
6
  });
7
  });
8
  </script>
9
+ <div class="pllexislider normal">
10
  <ul class="no-bullet slides">
11
  <?php
12
  if ( isset($data_arr) && is_array($data_arr) ) {
32
 
33
  echo '<li>'. "\n";
34
  echo '<a target="_blank" href="'.$link.'"><img src="'.$image.'" alt="'.$text.'"></a>' . "\n";
 
 
35
  if ( $created_time ) {
36
+ echo '<div class="instatime">'. human_time_diff( $created_time ) . ' ago</div>' . "\n";
37
  }
38
+ echo '<div class="instadescription">' . "\n";
39
+ echo '<p>by <a href="'. $user_url .'">'. $user_name .'</a></p>' . "\n";
40
  if ($text) {
41
+ echo '<p>'.$text.'</p>' . "\n";
42
  }
43
  echo '</div>' . "\n";
 
44
  echo '</li>' . "\n";
45
 
46
  }