Instagram Slider Widget - Version 1.1.1

Version Description

  • The text and control for slider visible on mouse over
  • Reorganised Slider html format
  • Css Styling for slider
Download this release

Release Info

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

Code changes from version 1.1.0 to 1.1.1

Files changed (4) hide show
  1. assets/css/instag-slider.css +10 -6
  2. instaram_slider.php +7 -7
  3. readme.txt +6 -1
  4. views/slider.php +17 -5
assets/css/instag-slider.css CHANGED
@@ -13,21 +13,25 @@
13
  .pllexislider { margin: 0; position: relative; }
14
  .pllex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
15
  .loading .pllex-viewport { max-height: 300px; }
16
- .pllexislider .slides { zoom: 1; }
17
 
18
  /* Thumbnails Template */
19
  .instag ul.thumbnails > li { margin:0 auto; display: inline-block; *display:inline; float: none; width:24% !important; }
20
  .instag ul.thumbnails img { width: 100%; }
21
 
22
  /* Control Nav */
23
- .pllexislider .pllex-control-nav { z-index:2; position: absolute; top: 0.8em; right:0.8em; text-align: center; }
24
  .pllexislider .pllex-control-nav li { margin: 0 3px; display: inline-block; zoom: 1; *display: inline; }
25
- .pllexislider .pllex-control-paging li a { width: 13px; border: none; height: 13px; 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(119, 119, 119, 0.7); -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 .instadescription p { margin-top:5px; margin-bottom: 5px; display: block; }
32
- .pllexislider ul li .instatime { margin-top:5px; width: 40%; float:right; text-align: right; }
 
 
 
 
33
 
13
  .pllexislider { margin: 0; position: relative; }
14
  .pllex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
15
  .loading .pllex-viewport { max-height: 300px; }
16
+ .pllexislider .slides { zoom: 1; overflow: hidden; }
17
 
18
  /* Thumbnails Template */
19
  .instag ul.thumbnails > li { margin:0 auto; display: inline-block; *display:inline; float: none; width:24% !important; }
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
 
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.0
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/
@@ -275,12 +275,12 @@ class JR_InstagramSlider extends WP_Widget {
275
  $instaData = get_transient( $opt_name );
276
  $user_opt = get_option( $opt_name );
277
 
278
- if (
279
- false === $instaData
280
- || $user_opt['username'] != $username
281
- || $user_opt['cache_hours'] != $cache_hours
282
- || $user_opt['nr_images'] != $nr_images
283
- )
284
  {
285
  $instaData = array();
286
  $insta_url = 'http://instagram.com/';
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/
275
  $instaData = get_transient( $opt_name );
276
  $user_opt = get_option( $opt_name );
277
 
278
+ if (
279
+ false === $instaData
280
+ || $user_opt['username'] != $username
281
+ || $user_opt['cache_hours'] != $cache_hours
282
+ || $user_opt['nr_images'] != $nr_images
283
+ )
284
  {
285
  $instaData = array();
286
  $insta_url = 'http://instagram.com/';
readme.txt CHANGED
@@ -3,7 +3,7 @@ Contributors: jetonr
3
  Tags: instagram, slider, widget, images
4
  Donate link: http://goo.gl/RZiu34
5
  Requires at least: 3.5
6
- Tested up to: 3.8.1
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
@@ -39,6 +39,11 @@ Instagram Slider Widget is a responsive slider widget that shows 20 latest image
39
  3. Backend Configuration
40
 
41
  == Changelog ==
 
 
 
 
 
42
  = 1.1.0 =
43
  * Added Option to link images to a Custom URL
44
  * Added Option to link images to localy saved instagram images
3
  Tags: instagram, slider, widget, images
4
  Donate link: http://goo.gl/RZiu34
5
  Requires at least: 3.5
6
+ Tested up to: 3.9.1
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
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
45
+ * Css Styling for slider
46
+
47
  = 1.1.0 =
48
  * Added Option to link images to a Custom URL
49
  * Added Option to link images to localy saved instagram images
views/slider.php CHANGED
@@ -1,8 +1,18 @@
1
  <script type="text/javascript">
2
  jQuery(document).ready(function($) {
3
  $('.pllexislider').pllexislider({
4
- animation: "slide",
5
  directionNav: false,
 
 
 
 
 
 
 
 
 
 
6
  });
7
  });
8
  </script>
@@ -32,15 +42,17 @@ jQuery(document).ready(function($) {
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
  }
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>
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
  }