Carousel Slider - Version 1.5.3

Version Description

Download this release

Release Info

Developer sayful
Plugin Icon Carousel Slider
Version 1.5.3
Comparing to
See all releases

Code changes from version 1.5.2 to 1.5.3

Files changed (17) hide show
  1. assets/css/style.css +48 -49
  2. assets/sass/_animate.scss +1 -1
  3. assets/sass/_core.scss +2 -2
  4. assets/sass/_lazyload.scss +7 -4
  5. assets/sass/_theme.scss +1 -1
  6. assets/sass/_variables.scss +2 -1
  7. assets/sass/_video.scss +1 -1
  8. carousel-slider.php +39 -2
  9. includes/Carousel_Slider_Admin.php +16 -16
  10. includes/Carousel_Slider_Meta_Box.php +6 -0
  11. readme.txt +7 -6
  12. screenshot-1.jpg +0 -0
  13. screenshot-7.jpg +0 -0
  14. shortcodes/Carousel_Slider_Shortcode.php +110 -60
  15. templates/carousel.php +41 -5
  16. templates/carousel_slide.php +76 -135
  17. templates/documentation.php +153 -114
assets/css/style.css CHANGED
@@ -1,60 +1,59 @@
1
- .owl-carousel { display: none; width: 100%; -webkit-tap-highlight-color: transparent; position: relative; z-index: 1; }
2
- .owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y; }
3
- .owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
4
- .owl-carousel .owl-stage-outer { position: relative; overflow: hidden; -webkit-transform: translate3d(0px, 0px, 0px); }
5
- .owl-carousel .owl-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
6
- .owl-carousel .owl-item img { display: block; width: 100%; -webkit-transform-style: preserve-3d; }
7
- .owl-carousel .owl-nav.disabled, .owl-carousel .owl-dots.disabled { display: none; }
8
- .owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-dot { cursor: pointer; cursor: hand; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
9
- .owl-carousel.owl-loaded { display: block; }
10
- .owl-carousel.owl-loading { opacity: 0; display: block; }
11
- .owl-carousel.owl-hidden { opacity: 0; }
12
- .owl-carousel.owl-refresh .owl-item { visibility: hidden; }
13
- .owl-carousel.owl-drag .owl-item { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
14
- .owl-carousel.owl-grab { cursor: move; cursor: grab; }
15
- .owl-carousel.owl-rtl { direction: rtl; }
16
- .owl-carousel.owl-rtl .owl-item { float: right; }
17
 
18
- .no-js #carousel-slider { display: block; }
19
 
20
- .owl-carousel .animated { animation-duration: 1000ms; animation-fill-mode: both; }
21
- .owl-carousel .owl-animated-in { z-index: 0; }
22
- .owl-carousel .owl-animated-out { z-index: 1; }
23
- .owl-carousel .fadeOut { animation-name: fadeOut; }
24
 
25
  @keyframes fadeOut { 0% { opacity: 1; }
26
  100% { opacity: 0; } }
27
  .owl-height { transition: height 500ms ease-in-out; }
28
 
29
- .owl-carousel .owl-item .owl-lazy { opacity: 0; transition: opacity 400ms ease; }
30
- .owl-carousel .owl-item img.owl-lazy { transform-style: preserve-3d; }
31
 
32
- .owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: #000; }
33
- .owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url("../img/play.svg") no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; transition: transform 100ms ease; }
34
- .owl-carousel .owl-video-play-icon:hover { transform: scale(1.3, 1.3); }
35
- .owl-carousel .owl-video-playing .owl-video-tn, .owl-carousel .owl-video-playing .owl-video-play-icon { display: none; }
36
- .owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; transition: opacity 400ms ease; }
37
- .owl-carousel .owl-video-frame { position: relative; z-index: 1; height: 100%; width: 100%; }
38
 
39
- #carousel-slider { position: relative; }
40
- #carousel-slider .owl-nav [class*='owl-'] { background-image: url("../img/arrows.png"); background-color: #f1f1f1; display: inline-block; text-indent: -1e+7px; height: 25px; width: 25px; border-radius: 25px; position: absolute; top: 50%; transform: translateY(-50%); opacity: 0; margin: 0; padding: 0; transition: all .3s ease-in-out; }
41
- #carousel-slider .owl-nav [class*='owl-']:hover { background-color: #4caf50; }
42
- #carousel-slider .owl-nav [class*='owl-']:first-child { background-position: 0 45px; margin-right: 3px; left: -30px; }
43
- #carousel-slider .owl-nav [class*='owl-']:last-child { background-position: 2px 2px; margin-left: 3px; right: -30px; }
44
- #carousel-slider .owl-nav [class*='owl-']:first-child:hover { background-position: 0 24px; }
45
- #carousel-slider .owl-nav [class*='owl-']:last-child:hover { background-position: 2px -20px; }
46
- #carousel-slider .owl-nav .disabled { opacity: 0.5; cursor: default; }
47
- #carousel-slider .owl-dots { text-align: center; -webkit-tap-highlight-color: transparent; margin-top: 10px; }
48
- #carousel-slider .owl-dots .owl-dot { display: inline-block; zoom: 1; *display: inline; }
49
- #carousel-slider .owl-dots .owl-dot span { width: 10px; height: 10px; margin: 4px 8px; background-color: #f1f1f1; display: block; -webkit-backface-visibility: visible; transition: opacity 200ms ease; border-radius: 30px; }
50
- #carousel-slider .owl-dots .owl-dot.active span, #carousel-slider .owl-dots .owl-dot:hover span { background-color: #4caf50; }
51
- #carousel-slider .carousel-slider__item { position: relative; }
52
- #carousel-slider .carousel-slider__item img { display: block; margin-left: auto; margin-right: auto; max-width: 100%; height: auto; }
53
- #carousel-slider .carousel-slider__caption { position: relative; }
54
- #carousel-slider .carousel-slider__caption .title { overflow: hidden; text-overflow: ellipsis; color: #474747; font-size: 16px; font-weight: 500; margin: 10px 0 0; text-align: center; }
55
- #carousel-slider .carousel-slider__caption .caption { font-size: 14px; font-weight: 300; margin: 10px 0 0; text-align: center; }
56
- #carousel-slider:hover .owl-nav [class*='owl-'] { opacity: 1; }
57
- @media (max-width: 767px) { #carousel-slider:hover .sp-theme .owl-nav { display: none; }
58
- #carousel-slider .sp-theme .owl-nav { display: none; } }
59
 
60
  /*# sourceMappingURL=style.css.map */
1
+ .carousel-slider { display: none; width: 100%; -webkit-tap-highlight-color: transparent; position: relative; z-index: 1; }
2
+ .carousel-slider .owl-stage { position: relative; -ms-touch-action: pan-Y; }
3
+ .carousel-slider .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
4
+ .carousel-slider .owl-stage-outer { position: relative; overflow: hidden; -webkit-transform: translate3d(0px, 0px, 0px); }
5
+ .carousel-slider .owl-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
6
+ .carousel-slider .owl-item img { display: block; width: 100%; -webkit-transform-style: preserve-3d; }
7
+ .carousel-slider .owl-nav.disabled, .carousel-slider .owl-dots.disabled { display: none; }
8
+ .carousel-slider .owl-nav .owl-prev, .carousel-slider .owl-nav .owl-next, .carousel-slider .owl-dot { cursor: pointer; cursor: hand; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
9
+ .carousel-slider.owl-loaded { display: block; }
10
+ .carousel-slider.owl-loading { opacity: 0; display: block; }
11
+ .carousel-slider.owl-hidden { opacity: 0; }
12
+ .carousel-slider.owl-refresh .owl-item { visibility: hidden; }
13
+ .carousel-slider.owl-drag .owl-item { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
14
+ .carousel-slider.owl-grab { cursor: move; cursor: grab; }
15
+ .carousel-slider.owl-rtl { direction: rtl; }
16
+ .carousel-slider.owl-rtl .owl-item { float: right; }
17
 
18
+ .no-js .carousel-slider { display: block; }
19
 
20
+ .carousel-slider .animated { animation-duration: 1000ms; animation-fill-mode: both; }
21
+ .carousel-slider .owl-animated-in { z-index: 0; }
22
+ .carousel-slider .owl-animated-out { z-index: 1; }
23
+ .carousel-slider .fadeOut { animation-name: fadeOut; }
24
 
25
  @keyframes fadeOut { 0% { opacity: 1; }
26
  100% { opacity: 0; } }
27
  .owl-height { transition: height 500ms ease-in-out; }
28
 
29
+ .carousel-slider .owl-item img.owl-lazy { background: url("../img/ajax-loader.gif") no-repeat center; min-width: 32px; min-height: 32px; }
 
30
 
31
+ .carousel-slider .owl-video-wrapper { position: relative; height: 100%; background: #000; }
32
+ .carousel-slider .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url("../img/play.svg") no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; transition: transform 100ms ease; }
33
+ .carousel-slider .owl-video-play-icon:hover { transform: scale(1.3, 1.3); }
34
+ .carousel-slider .owl-video-playing .owl-video-tn, .carousel-slider .owl-video-playing .owl-video-play-icon { display: none; }
35
+ .carousel-slider .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; transition: opacity 400ms ease; }
36
+ .carousel-slider .owl-video-frame { position: relative; z-index: 1; height: 100%; width: 100%; }
37
 
38
+ .carousel-slider { position: relative; }
39
+ .carousel-slider .owl-nav [class*='owl-'] { background-image: url("../img/arrows.png"); background-color: #f1f1f1; display: inline-block; text-indent: -1e+7px; height: 25px; width: 25px; border-radius: 25px; position: absolute; top: 50%; transform: translateY(-50%); opacity: 0; margin: 0; padding: 0; transition: all .3s ease-in-out; }
40
+ .carousel-slider .owl-nav [class*='owl-']:hover { background-color: #4caf50; }
41
+ .carousel-slider .owl-nav [class*='owl-']:first-child { background-position: 0 45px; margin-right: 3px; left: -30px; }
42
+ .carousel-slider .owl-nav [class*='owl-']:last-child { background-position: 2px 2px; margin-left: 3px; right: -30px; }
43
+ .carousel-slider .owl-nav [class*='owl-']:first-child:hover { background-position: 0 24px; }
44
+ .carousel-slider .owl-nav [class*='owl-']:last-child:hover { background-position: 2px -20px; }
45
+ .carousel-slider .owl-nav .disabled { opacity: 0.5; cursor: default; }
46
+ .carousel-slider .owl-dots { text-align: center; -webkit-tap-highlight-color: transparent; margin-top: 10px; }
47
+ .carousel-slider .owl-dots .owl-dot { display: inline-block; zoom: 1; *display: inline; }
48
+ .carousel-slider .owl-dots .owl-dot span { width: 10px; height: 10px; margin: 4px 8px; background-color: #f1f1f1; display: block; -webkit-backface-visibility: visible; transition: opacity 200ms ease; border-radius: 30px; }
49
+ .carousel-slider .owl-dots .owl-dot.active span, .carousel-slider .owl-dots .owl-dot:hover span { background-color: #4caf50; }
50
+ .carousel-slider .carousel-slider__item { position: relative; }
51
+ .carousel-slider .carousel-slider__item img { display: block; margin-left: auto; margin-right: auto; max-width: 100%; height: auto; }
52
+ .carousel-slider .carousel-slider__caption { position: relative; }
53
+ .carousel-slider .carousel-slider__caption .title { overflow: hidden; text-overflow: ellipsis; color: #474747; font-size: 16px; font-weight: 500; margin: 10px 0 0; text-align: center; }
54
+ .carousel-slider .carousel-slider__caption .caption { font-size: 14px; font-weight: 300; margin: 10px 0 0; text-align: center; }
55
+ .carousel-slider:hover .owl-nav [class*='owl-'] { opacity: 1; }
56
+ @media (max-width: 767px) { .carousel-slider:hover .sp-theme .owl-nav { display: none; }
57
+ .carousel-slider .sp-theme .owl-nav { display: none; } }
58
 
59
  /*# sourceMappingURL=style.css.map */
assets/sass/_animate.scss CHANGED
@@ -1,5 +1,5 @@
1
  // Owl Carousel - Animate Plugin
2
- .owl-carousel {
3
 
4
  .animated {
5
  animation-duration: 1000ms;
1
  // Owl Carousel - Animate Plugin
2
+ .carousel-slider {
3
 
4
  .animated {
5
  animation-duration: 1000ms;
assets/sass/_core.scss CHANGED
@@ -1,5 +1,5 @@
1
  // Owl Carousel - Core
2
- .owl-carousel {
3
  display: none;
4
  width: 100%;
5
  -webkit-tap-highlight-color: transparent;
@@ -96,6 +96,6 @@
96
  }
97
 
98
  // No Js
99
- .no-js #carousel-slider {
100
  display: block;
101
  }
1
  // Owl Carousel - Core
2
+ .carousel-slider {
3
  display: none;
4
  width: 100%;
5
  -webkit-tap-highlight-color: transparent;
96
  }
97
 
98
  // No Js
99
+ .no-js .carousel-slider {
100
  display: block;
101
  }
assets/sass/_lazyload.scss CHANGED
@@ -1,13 +1,16 @@
1
  // Owl Carousel - Lazy Load Plugin
2
- .owl-carousel {
3
  .owl-item {
4
  .owl-lazy {
5
- opacity: 0;
6
- transition: opacity 400ms ease;
7
  }
8
 
9
  img.owl-lazy {
10
- transform-style: preserve-3d;
 
 
 
11
  }
12
  }
13
  }
1
  // Owl Carousel - Lazy Load Plugin
2
+ .carousel-slider {
3
  .owl-item {
4
  .owl-lazy {
5
+ // opacity: 0;
6
+ // transition: opacity 400ms ease;
7
  }
8
 
9
  img.owl-lazy {
10
+ // transform-style: preserve-3d;
11
+ background: url($ajax-loader-url) no-repeat center;
12
+ min-width: 32px;
13
+ min-height: 32px;
14
  }
15
  }
16
  }
assets/sass/_theme.scss CHANGED
@@ -1,4 +1,4 @@
1
- #carousel-slider {
2
  position: relative;
3
 
4
  // Styling Next and Prev buttons
1
+ .carousel-slider {
2
  position: relative;
3
 
4
  // Styling Next and Prev buttons
assets/sass/_variables.scss CHANGED
@@ -2,4 +2,5 @@
2
  $background-color : #f1f1f1;
3
  $background-hover-color : #4caf50;
4
  $nav-arrows-url : "../img/arrows.png";
5
- $owl-video-play-icon : "../img/play.svg";
 
2
  $background-color : #f1f1f1;
3
  $background-hover-color : #4caf50;
4
  $nav-arrows-url : "../img/arrows.png";
5
+ $owl-video-play-icon : "../img/play.svg";
6
+ $ajax-loader-url : "../img/ajax-loader.gif";
assets/sass/_video.scss CHANGED
@@ -1,5 +1,5 @@
1
  // Owl Carousel - Video Plugin
2
- .owl-carousel {
3
 
4
  .owl-video-wrapper {
5
  position: relative;
1
  // Owl Carousel - Video Plugin
2
+ .carousel-slider {
3
 
4
  .owl-video-wrapper {
5
  position: relative;
carousel-slider.php CHANGED
@@ -3,7 +3,7 @@
3
  Plugin Name: Carousel Slider
4
  Plugin URI: http://wordpress.org/plugins/carousel-slider
5
  Description: Touch enabled WordPress plugin that lets you create beautiful responsive carousel slider.
6
- Version: 1.5.2
7
  Author: Sayful Islam
8
  Author URI: http://sayfulit.com
9
  Text Domain: carousel-slider
@@ -29,10 +29,11 @@ class Carousel_Slider
29
  public function __construct()
30
  {
31
  $this->plugin_name = 'carousel-slider';
32
- $this->plugin_version = '1.5.2';
33
 
34
  add_action('wp_enqueue_scripts', array( $this, 'frontend_scripts' ), 15 );
35
  add_action( 'admin_enqueue_scripts', array( $this, 'admin_scripts' ), 10 );
 
36
  add_action('init', array( $this, 'load_textdomain' ) );
37
  add_filter('widget_text', 'do_shortcode');
38
  $this->includes();
@@ -142,10 +143,46 @@ class Carousel_Slider
142
  }
143
  }
144
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
145
  private function has_shortcode( $shortcode )
146
  {
147
  global $post;
148
 
 
 
 
 
149
  if ( ! is_a( $post, 'WP_Post' ) ) {
150
  return false;
151
  }
3
  Plugin Name: Carousel Slider
4
  Plugin URI: http://wordpress.org/plugins/carousel-slider
5
  Description: Touch enabled WordPress plugin that lets you create beautiful responsive carousel slider.
6
+ Version: 1.5.3
7
  Author: Sayful Islam
8
  Author URI: http://sayfulit.com
9
  Text Domain: carousel-slider
29
  public function __construct()
30
  {
31
  $this->plugin_name = 'carousel-slider';
32
+ $this->plugin_version = '1.5.3';
33
 
34
  add_action('wp_enqueue_scripts', array( $this, 'frontend_scripts' ), 15 );
35
  add_action( 'admin_enqueue_scripts', array( $this, 'admin_scripts' ), 10 );
36
+ add_action('wp_footer', array( $this, 'inline_script'), 30);
37
  add_action('init', array( $this, 'load_textdomain' ) );
38
  add_filter('widget_text', 'do_shortcode');
39
  $this->includes();
143
  }
144
  }
145
 
146
+ public function inline_script()
147
+ {
148
+ if( $this->has_shortcode('carousel_slide') || $this->has_shortcode( 'carousel') ):
149
+ ?><script type="text/javascript">
150
+ jQuery( document ).ready(function( $ ){
151
+ $( 'body' ).find('.carousel-slider').each(function(){
152
+ var _this = $(this);
153
+ _this.owlCarousel({
154
+ nav: _this.data('nav'),
155
+ dots: _this.data('dots'),
156
+ margin: _this.data('margin'),
157
+ loop: _this.data('loop'),
158
+ autoplay: _this.data('autoplay'),
159
+ autoplayTimeout: _this.data('autoplay-timeout'),
160
+ autoplaySpeed: _this.data('autoplay-speed'),
161
+ autoplayHoverPause: _this.data('autoplay-hover-pause'),
162
+ slideBy: _this.data('slide-by'),
163
+ lazyLoad: _this.data('lazy-load'),
164
+ responsive: {
165
+ 320:{ items: _this.data('colums-mobile') },
166
+ 600:{ items: _this.data('colums-tablet') },
167
+ 768:{ items: _this.data('colums-small-desktop') },
168
+ 980:{ items: _this.data('colums-desktop') },
169
+ 1200:{items: _this.data('colums') }
170
+ }
171
+ });
172
+ });
173
+ });
174
+ </script><?php
175
+ endif;
176
+ }
177
+
178
  private function has_shortcode( $shortcode )
179
  {
180
  global $post;
181
 
182
+ if ( is_active_widget( false, false, 'widget_carousel_slider', true ) ) {
183
+ return true;
184
+ }
185
+
186
  if ( ! is_a( $post, 'WP_Post' ) ) {
187
  return false;
188
  }
includes/Carousel_Slider_Admin.php CHANGED
@@ -155,6 +155,22 @@ class Carousel_Slider_Admin
155
  'name' => __('Carousel Image Size', 'carousel-slider'),
156
  'desc' => sprintf(__( 'Select "full" for full size image or your desired image size for carousel image. You can change the default size for thumbnail, medium and large from %1$s Settings >> Media %2$s.', 'carousel-slider' ),'<a target="_blank" href="'.get_admin_url().'options-media.php">','</a>'),
157
  ),
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
158
  )
159
  );
160
 
@@ -195,22 +211,6 @@ class Carousel_Slider_Admin
195
  'desc' => __('Check to enable image lazy load.', 'carousel-slider'),
196
  'std' => 'off'
197
  ),
198
- array(
199
- 'id' => '_show_attachment_title',
200
- 'type' => 'checkbox',
201
- 'name' => __('Show Title', 'carousel-slider'),
202
- 'label' => __('Show Title', 'carousel-slider'),
203
- 'desc' => __('Check to show attachment title below image.', 'carousel-slider'),
204
- 'std' => 'off'
205
- ),
206
- array(
207
- 'id' => '_show_attachment_caption',
208
- 'type' => 'checkbox',
209
- 'name' => __('Show Caption', 'carousel-slider'),
210
- 'label' => __('Show Caption', 'carousel-slider'),
211
- 'desc' => __('Check to show attachment caption below image.', 'carousel-slider'),
212
- 'std' => 'off'
213
- ),
214
  )
215
  );
216
 
155
  'name' => __('Carousel Image Size', 'carousel-slider'),
156
  'desc' => sprintf(__( 'Select "full" for full size image or your desired image size for carousel image. You can change the default size for thumbnail, medium and large from %1$s Settings >> Media %2$s.', 'carousel-slider' ),'<a target="_blank" href="'.get_admin_url().'options-media.php">','</a>'),
157
  ),
158
+ array(
159
+ 'id' => '_show_attachment_title',
160
+ 'type' => 'checkbox',
161
+ 'name' => __('Show Title', 'carousel-slider'),
162
+ 'label' => __('Show Title', 'carousel-slider'),
163
+ 'desc' => __('Check to show attachment title below image.', 'carousel-slider'),
164
+ 'std' => 'off'
165
+ ),
166
+ array(
167
+ 'id' => '_show_attachment_caption',
168
+ 'type' => 'checkbox',
169
+ 'name' => __('Show Caption', 'carousel-slider'),
170
+ 'label' => __('Show Caption', 'carousel-slider'),
171
+ 'desc' => __('Check to show attachment caption below image.', 'carousel-slider'),
172
+ 'std' => 'off'
173
+ ),
174
  )
175
  );
176
 
211
  'desc' => __('Check to enable image lazy load.', 'carousel-slider'),
212
  'std' => 'off'
213
  ),
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
214
  )
215
  );
216
 
includes/Carousel_Slider_Meta_Box.php CHANGED
@@ -75,6 +75,9 @@ class Carousel_Slider_Meta_Box {
75
  break;
76
 
77
  case 'number':
 
 
 
78
  echo sprintf('<td><input type="number" name="%1$s" id="%2$s" value="%3$s" class="regular-text">',$meta_name, $meta_id, $value);
79
  break;
80
 
@@ -248,6 +251,9 @@ class Carousel_Slider_Meta_Box {
248
  }
249
 
250
  foreach( $_POST[$postName] as $key => $val ){
 
 
 
251
  update_post_meta( $post_id, $key, sanitize_text_field( $val ) );
252
  }
253
  }
75
  break;
76
 
77
  case 'number':
78
+ if ($value == 'zero') {
79
+ $value = 0;
80
+ }
81
  echo sprintf('<td><input type="number" name="%1$s" id="%2$s" value="%3$s" class="regular-text">',$meta_name, $meta_id, $value);
82
  break;
83
 
251
  }
252
 
253
  foreach( $_POST[$postName] as $key => $val ){
254
+ if ($key == '_margin_right' && $val == 0) {
255
+ $val = 'zero';
256
+ }
257
  update_post_meta( $post_id, $key, sanitize_text_field( $val ) );
258
  }
259
  }
readme.txt CHANGED
@@ -4,7 +4,7 @@ Tags: widget, shortcode, images, carousel, carousel slider, image carousel, slid
4
  Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=3LZWQTHEVYWCY
5
  Requires at least: 3.5
6
  Tested up to: 4.7
7
- Stable tag: 1.5.2
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
@@ -12,7 +12,7 @@ Touch enabled wordpress plugin that lets you create beautiful responsive carouse
12
 
13
  == Description ==
14
 
15
- Touch enabled WordPress plugin based on [OWL Carousel](http://www.owlgraphic.com/owlcarousel/) that lets you create beautiful responsive carousel slider.
16
 
17
  If you like this plugin, please give us ratings for future improvement.
18
 
@@ -132,8 +132,6 @@ Example 2 (with attribute):
132
  `[carousel id='myCustomId' items='3' items_desktop='3' margin_right='5' navigation='false'][item img_link='http://lorempixel.com/400/200/city/1/'][item img_link='http://lorempixel.com/400/200/city/2/'][item img_link='http://lorempixel.com/400/200/city/3/'][item img_link='http://lorempixel.com/400/200/city/4/'][item img_link='http://lorempixel.com/400/200/city/5/'][item img_link='http://lorempixel.com/400/200/city/6/'][item img_link='http://lorempixel.com/400/200/city/7/'][item img_link='http://lorempixel.com/400/200/city/8/'][item img_link='http://lorempixel.com/400/200/city/9/'][item img_link='http://lorempixel.com/400/200/city/10/'][/carousel]`
133
 
134
 
135
- If you like the plugin or earning using this plugin, make a small <a href="http://www.sayfulit.com/donate/">donation</a>.
136
-
137
  == Installation ==
138
 
139
  Installing the plugins is just like installing other WordPress plugins. If you don't know how to install plugins, please review the three options below:
@@ -163,16 +161,19 @@ Do you have questions or issues with Carousel Slider? [Ask for support here](htt
163
 
164
  == Screenshots ==
165
 
166
- 1. Screenshot of Carousel Front-end Example.
167
  2. Screenshot of Carousel All Carousel
168
  3. Screenshot of Carousel Image Settings
169
  4. Screenshot of Carousel General Settings
170
  5. Screenshot of Carousel Navigation Settings
171
  6. Screenshot of Carousel Autoplay Settings
172
- 7. Screenshot of Carousel Responsive Settings
173
 
174
  == Changelog ==
175
 
 
 
 
176
  = version 1.5.2 - 2016-12-03 =
177
  * Added - Added options to show title and caption on carousel item.
178
  * Added - Lazy Load of images.
4
  Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=3LZWQTHEVYWCY
5
  Requires at least: 3.5
6
  Tested up to: 4.7
7
+ Stable tag: 1.5.3
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
12
 
13
  == Description ==
14
 
15
+ Touch enabled WordPress plugin based on [Owl Carousel 2](http://www.owlcarousel.owlgraphic.com/) that lets you create beautiful responsive carousel slider.
16
 
17
  If you like this plugin, please give us ratings for future improvement.
18
 
132
  `[carousel id='myCustomId' items='3' items_desktop='3' margin_right='5' navigation='false'][item img_link='http://lorempixel.com/400/200/city/1/'][item img_link='http://lorempixel.com/400/200/city/2/'][item img_link='http://lorempixel.com/400/200/city/3/'][item img_link='http://lorempixel.com/400/200/city/4/'][item img_link='http://lorempixel.com/400/200/city/5/'][item img_link='http://lorempixel.com/400/200/city/6/'][item img_link='http://lorempixel.com/400/200/city/7/'][item img_link='http://lorempixel.com/400/200/city/8/'][item img_link='http://lorempixel.com/400/200/city/9/'][item img_link='http://lorempixel.com/400/200/city/10/'][/carousel]`
133
 
134
 
 
 
135
  == Installation ==
136
 
137
  Installing the plugins is just like installing other WordPress plugins. If you don't know how to install plugins, please review the three options below:
161
 
162
  == Screenshots ==
163
 
164
+ 1. Screenshot of Carousel Responsive Settings
165
  2. Screenshot of Carousel All Carousel
166
  3. Screenshot of Carousel Image Settings
167
  4. Screenshot of Carousel General Settings
168
  5. Screenshot of Carousel Navigation Settings
169
  6. Screenshot of Carousel Autoplay Settings
170
+ 7. Screenshot of Carousel Front-end Example.
171
 
172
  == Changelog ==
173
 
174
+ = version 1.5.3 - 2016-12-08 =
175
+ * Fixed - Issue for not saving zero value for margin.
176
+
177
  = version 1.5.2 - 2016-12-03 =
178
  * Added - Added options to show title and caption on carousel item.
179
  * Added - Lazy Load of images.
screenshot-1.jpg CHANGED
Binary file
screenshot-7.jpg CHANGED
Binary file
shortcodes/Carousel_Slider_Shortcode.php CHANGED
@@ -39,6 +39,9 @@ class Carousel_Slider_Shortcode
39
  );
40
  if ( ! $id ) return;
41
  $images_ids = array_filter( explode( ',', get_post_meta( $id, '_wpdh_image_ids', true ) ) );
 
 
 
42
 
43
  ob_start();
44
  require $this->plugin_path . '/templates/carousel_slide.php';
@@ -76,51 +79,14 @@ class Carousel_Slider_Shortcode
76
  'autoplay_timeout' => '5000',
77
  'autoplay_speed' => '500',
78
  'slide_by' => '1',
 
79
  ), $atts ) );
80
 
81
- $html = '';
82
- $html .= '<div id="carousel-slider" class="carousel-slider">';
83
- $html .= '<div id="id-'.$id.'" class="owl-carousel sp-theme">';
84
- $html .= do_shortcode($content);
85
- $html .= '</div>';
86
- $html .= '<style type="text/css">
87
- #id-'.$id.'.owl-theme .owl-dots .owl-dot span,
88
- #id-'.$id.'.owl-theme .owl-nav [class*="owl-"]:first-child,
89
- #id-'.$id.'.owl-theme .owl-nav [class*="owl-"]:last-child {
90
- background-color: '.$nav_color.';
91
- }
92
- #id-'.$id.'.owl-theme .owl-dots .owl-dot.active span,
93
- #id-'.$id.'.owl-theme .owl-dots .owl-dot:hover span,
94
- #id-'.$id.'.owl-theme .owl-nav [class*="owl-"]:first-child:hover,
95
- #id-'.$id.'.owl-theme .owl-nav [class*="owl-"]:last-child:hover {
96
- background-color: '.$nav_active_color.';
97
- }
98
- </style>';
99
-
100
- $html .='<script type="text/javascript">
101
- jQuery(document).ready(function($) {
102
- $(\'#id-'.$id.'\').owlCarousel({
103
- nav : '.$navigation.',
104
- dots: '.$pagination.',
105
- margin:'.$margin_right.',
106
- loop :'.$inifnity_loop.',
107
- autoplay: '.$auto_play.',
108
- autoplayTimeout: '.$autoplay_timeout.',
109
- autoplaySpeed: '.$autoplay_speed.',
110
- autoplayHoverPause: '.$stop_on_hover.',
111
- slideBy: '.$slide_by.',
112
- responsiveClass:true,
113
- responsive:{
114
- 320:{ items:'.$items_mobile.' },
115
- 600:{ items:'.$items_tablet.' },
116
- 768:{ items:'.$items_desktop_small.' },
117
- 980:{ items:'.$items_desktop.' },
118
- 1200:{ items:'.$items.' }
119
- }
120
- });
121
- });
122
- </script>';
123
- $html .='</div>';
124
  return $html;
125
  }
126
 
@@ -135,26 +101,110 @@ class Carousel_Slider_Shortcode
135
  public function item( $attributes, $content = null )
136
  {
137
  extract(shortcode_atts(array(
138
- 'img_link' =>'',
139
- 'href' =>'',
140
- 'target' =>'_self',
 
141
  ), $attributes ) );
142
 
143
- if ( filter_var( $href, FILTER_VALIDATE_URL ) ) {
144
- return sprintf(
145
- '<div><a target="%3$s" href="%2$s"><img src="%1$s"></a></div>',
146
- $img_link,
147
- $href,
148
- $target
149
- );
150
- } else {
151
-
152
- if ( filter_var( $img_link, FILTER_VALIDATE_URL ) ) {
153
- return sprintf('<div><img src="%s"></div>', $img_link );
154
- } else {
155
- return '';
156
- }
157
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
158
  }
159
  }
160
 
39
  );
40
  if ( ! $id ) return;
41
  $images_ids = array_filter( explode( ',', get_post_meta( $id, '_wpdh_image_ids', true ) ) );
42
+ if (count( $images_ids ) < 1 ) {
43
+ return;
44
+ }
45
 
46
  ob_start();
47
  require $this->plugin_path . '/templates/carousel_slide.php';
79
  'autoplay_timeout' => '5000',
80
  'autoplay_speed' => '500',
81
  'slide_by' => '1',
82
+ 'lazy_load_image' => 'true',
83
  ), $atts ) );
84
 
85
+ ob_start();
86
+ require $this->plugin_path . '/templates/carousel.php';
87
+ $html = ob_get_contents();
88
+ ob_end_clean();
89
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
90
  return $html;
91
  }
92
 
101
  public function item( $attributes, $content = null )
102
  {
103
  extract(shortcode_atts(array(
104
+ 'img_link' => '',
105
+ 'href' => '',
106
+ 'lazy-load' => '',
107
+ 'target' => '_self',
108
  ), $attributes ) );
109
 
110
+ if ($this->is_valid_url($href) && $this->is_valid_url($img_link)) {
111
+
112
+ return sprintf('<div><a target="%3$s" href="%2$s"><img class="owl-lazy" data-src="%1$s"></a></div>', $img_link, $href, $target);
113
+ }
114
+
115
+ if ( $this->is_valid_url($img_link) ) {
116
+
117
+ return sprintf('<div><img class="owl-lazy" data-src="%1$s"></div>', $img_link);
 
 
 
 
 
 
118
  }
119
+
120
+ return;
121
+ }
122
+
123
+ private function carousel_options( $id )
124
+ {
125
+ $options_array = array(
126
+ 'id' => 'id-' . $id,
127
+ 'class' => 'owl-carousel carousel-slider',
128
+ // General
129
+ 'data-margin' => $this->get_meta( $id, '_margin_right' ),
130
+ 'data-slide-by' => $this->get_meta( $id, '_slide_by' ),
131
+ 'data-loop' => $this->get_meta( $id, '_inifnity_loop' ),
132
+ 'data-lazy-load' => $this->get_meta( $id, '_lazy_load_image' ),
133
+ // Navigation
134
+ 'data-nav' => $this->get_meta( $id, '_nav_button' ),
135
+ 'data-dots' => $this->get_meta( $id, '_dot_nav' ),
136
+ // Autoplay
137
+ 'data-autoplay' => $this->get_meta( $id, '_autoplay' ),
138
+ 'data-autoplay-timeout' => $this->get_meta( $id, '_autoplay_timeout' ),
139
+ 'data-autoplay-speed' => $this->get_meta( $id, '_autoplay_speed' ),
140
+ 'data-autoplay-hover-pause' => $this->get_meta( $id, '_autoplay_pause' ),
141
+ // Responsive
142
+ 'data-colums' => $this->get_meta( $id, '_items' ),
143
+ 'data-colums-desktop' => $this->get_meta( $id, '_items' ),
144
+ 'data-colums-small-desktop' => $this->get_meta( $id, '_items_small_desktop' ),
145
+ 'data-colums-tablet' => $this->get_meta( $id, '_items_portrait_tablet' ),
146
+ 'data-colums-small-tablet' => $this->get_meta( $id, '_items_small_portrait_tablet' ),
147
+ 'data-colums-mobile' => $this->get_meta( $id, '_items_portrait_mobile' ),
148
+ );
149
+
150
+ return $this->array_to_data( $options_array );
151
+ }
152
+
153
+ public function get_meta($id, $key)
154
+ {
155
+ $meta = get_post_meta( $id, $key, true );
156
+
157
+ if ($meta == 'zero') { $meta = '0'; }
158
+ if ($meta == 'on') { $meta = 'true'; }
159
+ if ($meta == 'off') { $meta = 'false'; }
160
+ if ($key == '_margin_right' && $meta == 0) { $meta = '0'; }
161
+
162
+ return $meta;
163
+ }
164
+
165
+ public function array_to_data( $array )
166
+ {
167
+
168
+ $array_map = array_map( function( $key, $value )
169
+ {
170
+
171
+ if( is_bool( $value ) )
172
+ {
173
+ if ($value) {
174
+
175
+ return sprintf( '%s="%s"', $key, 'true' );
176
+ } else {
177
+
178
+ return sprintf( '%s="%s"', $key, 'false' );
179
+ }
180
+ }
181
+
182
+ if ( is_array( $value ) ) {
183
+
184
+ return sprintf( '%s="%s"', $key, implode(" ", $value ) );
185
+ }
186
+
187
+ return sprintf( '%s="%s"', $key, $value );
188
+
189
+ }, array_keys($array), array_values( $array ) );
190
+
191
+ return $array_map;
192
+ }
193
+
194
+ /**
195
+ * Check if url is valid as per RFC 2396 Generic Syntax
196
+ *
197
+ * @param string $url
198
+ * @return boolean
199
+ */
200
+ public function is_valid_url( $url )
201
+ {
202
+ if ( filter_var( $url, FILTER_VALIDATE_URL ) ) {
203
+
204
+ return true;
205
+ }
206
+
207
+ return false;
208
  }
209
  }
210
 
templates/carousel.php CHANGED
@@ -1,5 +1,41 @@
1
- <div id="carousel-slider" class="carousel-slider">
2
- <div id="id-<?php echo $id; ?>" class="owl-carousel sp-theme">
3
- <?php echo do_shortcode($content); ?>
4
- </div><!-- #id-## -->
5
- </div><!-- #carousel-slider -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ $options_array = array(
3
+ 'id' => 'id-' . $id,
4
+ 'class' => 'owl-carousel carousel-slider',
5
+ // General
6
+ 'data-margin' => $margin_right,
7
+ 'data-slide-by' => $slide_by,
8
+ 'data-loop' => $inifnity_loop,
9
+ 'data-lazy-load' => $lazy_load_image,
10
+ // Navigation
11
+ 'data-nav' => $navigation,
12
+ 'data-dots' => $pagination,
13
+ // Autoplay
14
+ 'data-autoplay' => $auto_play,
15
+ 'data-autoplay-timeout' => $autoplay_timeout,
16
+ 'data-autoplay-speed' => $autoplay_speed,
17
+ 'data-autoplay-hover-pause' => $stop_on_hover,
18
+ // Responsive
19
+ 'data-colums' => $items,
20
+ 'data-colums-desktop' => $items,
21
+ 'data-colums-small-desktop' => $items_desktop,
22
+ 'data-colums-tablet' => $items_desktop_small,
23
+ 'data-colums-small-tablet' => $items_tablet,
24
+ 'data-colums-mobile' => $items_mobile,
25
+ );
26
+ $data_attr = join(" ", $this->array_to_data( $options_array ));
27
+ ?>
28
+ <style>
29
+ #id-<?php echo $id; ?> .owl-nav [class*='owl-'],
30
+ #id-<?php echo $id; ?> .owl-dots .owl-dot span {
31
+ background-color: <?php echo $nav_color; ?>
32
+ }
33
+ #id-<?php echo $id; ?> .owl-nav [class*='owl-']:hover,
34
+ #id-<?php echo $id; ?> .owl-dots .owl-dot.active span,
35
+ #id-<?php echo $id; ?> .owl-dots .owl-dot:hover span {
36
+ background-color: <?php echo $nav_active_color; ?>
37
+ }
38
+ </style>
39
+ <div <?php echo $data_attr; ?>>
40
+ <?php echo do_shortcode($content); ?>
41
+ </div><!-- .carousel-slider -->
templates/carousel_slide.php CHANGED
@@ -5,140 +5,81 @@ $_nav_active_color = get_post_meta( $id, '_nav_active_color', true );
5
  $_lazy_load_image = get_post_meta( $id, '_lazy_load_image', true );
6
  $_show_attachment_title = get_post_meta( $id, '_show_attachment_title', true );
7
  $_show_attachment_caption = get_post_meta( $id, '_show_attachment_caption', true );
8
-
9
- $loading_image = $this->plugin_url . '/assets/img/ajax-loader.gif';
10
-
11
- if( count( $images_ids ) > 0 ): ?>
12
- <div id="carousel-slider" class="carousel-slider">
13
- <style type="text/css" scoped>
14
- #id-<?php echo $id; ?> .owl-nav [class*='owl-'],
15
- #id-<?php echo $id; ?> .owl-dots .owl-dot span {
16
- background-color: <?php echo $_nav_color; ?>
17
- }
18
- #id-<?php echo $id; ?> .owl-nav [class*='owl-']:hover,
19
- #id-<?php echo $id; ?> .owl-dots .owl-dot.active span,
20
- #id-<?php echo $id; ?> .owl-dots .owl-dot:hover span {
21
- background-color: <?php echo $_nav_active_color; ?>
22
- }
23
- </style>
24
- <div id="id-<?php echo $id; ?>" class="owl-carousel sp-theme">
25
- <?php
26
- foreach ( $images_ids as $image_id ):
27
-
28
- $get_post = get_post( $image_id );
29
- $image_title = $get_post->post_title;
30
- $image_caption = $get_post->post_excerpt;
31
- $image_description = $get_post->post_content;
32
- $image_alt_text = trim( strip_tags( get_post_meta( $image_id, '_wp_attachment_image_alt', true ) ) );
33
-
34
- echo '<div class="carousel-slider__item">';
35
-
36
- $title = sprintf( '<h4 class="title">%1$s</h4>', $image_title );
37
- $caption = sprintf( '<p class="caption">%1$s</p>', $image_caption );
38
-
39
- if ( $_show_attachment_title == 'on' && $_show_attachment_caption == 'on' ) {
40
-
41
- $full_caption = sprintf('<div class="carousel-slider__caption">%1$s%2$s</div>', $title, $caption);
42
-
43
- } elseif( $_show_attachment_title == 'on' ){
44
-
45
- $full_caption = sprintf('<div class="carousel-slider__caption">%s</div>', $title);
46
-
47
- } elseif( $_show_attachment_caption == 'on' ){
48
-
49
- $full_caption = sprintf('<div class="carousel-slider__caption">%s</div>', $caption);
50
-
51
- } else {
52
- $full_caption = '';
53
- }
54
-
55
- if ( $_lazy_load_image == 'on' ) {
56
-
57
- $image_src = wp_get_attachment_image_src( $image_id, $_image_size );
58
- $image = sprintf(
59
- '<img class="owl-lazy" data-src="%1$s" width="%2$s" height="%3$s" alt="%4$s" />',
60
- $image_src[0],
61
- $image_src[1],
62
- $image_src[2],
63
- $image_alt_text
64
- );
65
-
66
- } else {
67
- $image = wp_get_attachment_image( $image_id, $_image_size, false, array( 'alt' => $image_alt_text ) );
68
- }
69
-
70
- if ( filter_var( $image_description, FILTER_VALIDATE_URL) ) {
71
-
72
- echo '<a href="'.$image_description.'">';
73
-
74
- echo $image;
75
- echo $full_caption ;
76
-
77
- echo '</a>';
78
-
79
- } else {
80
-
81
- echo $image ;
82
- echo $full_caption ;
83
- }
84
-
85
- echo '</div>';
86
-
87
- endforeach;
88
- ?>
89
- </div><!-- #id-## -->
90
- </div><!-- #carousel-slider -->
91
- <?php endif; //if( count( $images_ids ) > 0 ):
92
-
93
- add_action('wp_footer', function() use ( $id )
94
- {
95
- $_items_small_desktop = get_post_meta( $id, '_items_small_desktop', true );
96
- $_items_portrait_tablet = get_post_meta( $id, '_items_portrait_tablet', true );
97
- $_items_small_portrait_tablet = get_post_meta( $id, '_items_small_portrait_tablet', true );
98
- $_items_portrait_mobile = get_post_meta( $id, '_items_portrait_mobile', true );
99
- $_items = get_post_meta( $id, '_items', true );
100
- $_image_size = get_post_meta( $id, '_image_size', true );
101
- $_slide_by = get_post_meta( $id, '_slide_by', true );
102
- $_margin_right = get_post_meta( $id, '_margin_right', true );
103
- $_nav_button = get_post_meta( $id, '_nav_button', true );
104
- $_nav_button = ($_nav_button == 'on') ? 'true' : 'false';
105
- $_dot_nav = get_post_meta( $id, '_dot_nav', true );
106
- $_dot_nav = ($_dot_nav == 'on') ? 'true' : 'false';
107
- $_inifnity_loop = get_post_meta( $id, '_inifnity_loop', true );
108
- $_inifnity_loop = ($_inifnity_loop == 'on') ? 'true' : 'false';
109
- $_autoplay = get_post_meta( $id, '_autoplay', true );
110
- $_autoplay = ($_autoplay == 'on') ? 'true' : 'false';
111
- $_autoplay_timeout = get_post_meta( $id, '_autoplay_timeout', true );
112
- $_autoplay_speed = get_post_meta( $id, '_autoplay_speed', true );
113
- $_autoplay_pause = get_post_meta( $id, '_autoplay_pause', true );
114
- $_autoplay_pause = ($_autoplay_pause == 'on') ? 'true' : 'false';
115
- ?>
116
- <script type="text/javascript">
117
- jQuery( document ).ready( function( $ ) {
118
- var carouselSlider = $('#id-<?php echo $id; ?>');
119
- carouselSlider.owlCarousel({
120
- nav : <?php echo $_nav_button; ?>,
121
- dots: <?php echo $_dot_nav; ?>,
122
- margin:<?php echo $_margin_right; ?>,
123
- loop :<?php echo $_inifnity_loop; ?>,
124
- autoplay: <?php echo $_autoplay; ?>,
125
- autoplayTimeout: <?php echo $_autoplay_timeout; ?>,
126
- autoplaySpeed: <?php echo $_autoplay_speed; ?>,
127
- autoplayHoverPause: <?php echo $_autoplay_pause; ?>,
128
- slideBy: <?php echo $_slide_by; ?>,
129
- responsiveClass:true,
130
- lazyLoad:true,
131
- responsive:{
132
- 320:{ items:<?php echo $_items_portrait_mobile; ?> },
133
- 600:{ items:<?php echo $_items_portrait_tablet; ?> },
134
- 768:{ items:<?php echo $_items_portrait_tablet; ?> },
135
- 980:{ items:<?php echo $_items_small_desktop; ?> },
136
- 1200:{ items:<?php echo $_items; ?> }
137
- }
138
- });
139
- });
140
- </script>
141
  <?php
142
- }, 30);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
143
 
144
- ?>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5
  $_lazy_load_image = get_post_meta( $id, '_lazy_load_image', true );
6
  $_show_attachment_title = get_post_meta( $id, '_show_attachment_title', true );
7
  $_show_attachment_caption = get_post_meta( $id, '_show_attachment_caption', true );
8
+ ?>
9
+ <style>
10
+ #id-<?php echo $id; ?> .owl-nav [class*='owl-'],
11
+ #id-<?php echo $id; ?> .owl-dots .owl-dot span {
12
+ background-color: <?php echo $_nav_color; ?>
13
+ }
14
+ #id-<?php echo $id; ?> .owl-nav [class*='owl-']:hover,
15
+ #id-<?php echo $id; ?> .owl-dots .owl-dot.active span,
16
+ #id-<?php echo $id; ?> .owl-dots .owl-dot:hover span {
17
+ background-color: <?php echo $_nav_active_color; ?>
18
+ }
19
+ </style>
20
+ <div <?php echo join(" ", $this->carousel_options($id)); ?>>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
21
  <?php
22
+ foreach ( $images_ids as $image_id ):
23
+
24
+ $get_post = get_post( $image_id );
25
+ $image_title = $get_post->post_title;
26
+ $image_caption = $get_post->post_excerpt;
27
+ $image_description = $get_post->post_content;
28
+ $image_alt_text = trim( strip_tags( get_post_meta( $image_id, '_wp_attachment_image_alt', true ) ) );
29
+
30
+ echo '<div class="carousel-slider__item">';
31
+
32
+ $title = sprintf( '<h4 class="title">%1$s</h4>', $image_title );
33
+ $caption = sprintf( '<p class="caption">%1$s</p>', $image_caption );
34
+
35
+ if ( $_show_attachment_title == 'on' && $_show_attachment_caption == 'on' ) {
36
+
37
+ $full_caption = sprintf('<div class="carousel-slider__caption">%1$s%2$s</div>', $title, $caption);
38
+
39
+ } elseif( $_show_attachment_title == 'on' ){
40
+
41
+ $full_caption = sprintf('<div class="carousel-slider__caption">%s</div>', $title);
42
+
43
+ } elseif( $_show_attachment_caption == 'on' ){
44
+
45
+ $full_caption = sprintf('<div class="carousel-slider__caption">%s</div>', $caption);
46
+
47
+ } else {
48
+ $full_caption = '';
49
+ }
50
 
51
+ if ( $_lazy_load_image == 'on' ) {
52
+
53
+ $image_src = wp_get_attachment_image_src( $image_id, $_image_size );
54
+ $image = sprintf(
55
+ '<img class="owl-lazy" data-src="%1$s" width="%2$s" height="%3$s" alt="%4$s" />',
56
+ $image_src[0],
57
+ $image_src[1],
58
+ $image_src[2],
59
+ $image_alt_text
60
+ );
61
+
62
+ } else {
63
+ $image = wp_get_attachment_image( $image_id, $_image_size, false, array( 'alt' => $image_alt_text ) );
64
+ }
65
+
66
+ if ( filter_var( $image_description, FILTER_VALIDATE_URL) ) {
67
+
68
+ echo '<a href="'.$image_description.'">';
69
+
70
+ echo $image;
71
+ echo $full_caption ;
72
+
73
+ echo '</a>';
74
+
75
+ } else {
76
+
77
+ echo $image ;
78
+ echo $full_caption ;
79
+ }
80
+
81
+ echo '</div>';
82
+
83
+ endforeach;
84
+ ?>
85
+ </div><!-- #id-## -->
templates/documentation.php CHANGED
@@ -1,123 +1,162 @@
1
  <div class="wrap">
 
 
 
 
2
 
3
- <div class="notice">
4
- <p><strong>If you like this plugin or if you make money using this or if you want to help me to continue my contribution on open source projects, consider to make a small donation.</strong></p>
5
- <p><a href="http://sayfulit.com/donate" target="_blank"><img alt="" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif"></a></p>
6
- <p><strong>You can also buy premium version from <a href="http://wpeden.com/product/sp-image-carousel/">here</a> or <a href="http://demo.sayfulit.com/sp-image-carousel/">try demo first</a></strong></p>
7
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
 
9
- <div id="dashboard-widgets-wrap">
10
- <div id="dashboard-widgets" class="metabox-holder">
11
- </div>
12
- </div>
13
 
14
- <h2>From Version 1.5.0</h2>
15
 
16
- <hr><iframe width="560" height="315" src="https://www.youtube.com/embed/O4-EM32h7b4?list=PL9GiQPpTzMv5ftsvX55JO_lTDcKrwCPVn" frameborder="0" allowfullscreen></iframe><hr>
 
 
 
 
 
17
 
18
- <h2>Usage - linking image</h2>
19
- <p>Without using custom post (Carousels admin menu), you can use custom shortcode to link image and generate carousel slider.</p>
20
- <p>To gererate carousel slider using shortcode, at first write wrapper shortcode as following:</p>
21
- <pre><code>[carousel][/carousel]</code></pre>
22
- <p>Now write the following shortcode inside the wrapper shortcode as many image as you want.</p>
23
- <pre><code>[item img_link=""]</code></pre>
24
- <p>You can add following attribute if you want to link image to custom post, page, image, etc. Like as following</p>
25
- <pre><code>[item img_link="IMAGE_URL_GOES_HERE" href="CUSTOM_URL_GOES_HERE"]</code></pre>
26
- <P>The whole shortcode look likes as following: (See example shortcode.)</P>
27
- <pre style="overflow: auto;"><code>[carousel][item img_link="IMAGE_URL_GOES_HERE"][item img_link="IMAGE_URL_GOES_HERE" href="CUSTOM_URL_GOES_HERE"][item img_link="IMAGE_URL_GOES_HERE"][/carousel]</code></pre>
28
- <h2>Shortcode Attributes</h2>
29
- <p>You can use shortcode attributes to change default functionality. These attributes need to place inside wrapper shortcode. The available shortcode attributes are as following:</p>
30
- <table class="form-table doc-table">
31
- <tr>
32
- <th scope="row">Attribute</th>
33
- <th>Default Value</th>
34
- <th>Usage</th>
35
- </tr>
36
- <tr>
37
- <th scope="row">id=''</th>
38
- <td>Random Number.</td>
39
- <td>Add id if you want to use multiple carousel at same page. If you leave it blank, it will generate random number.</td>
40
- </tr>
41
- <tr>
42
- <th scope="row">items=''</th>
43
- <td>4</td>
44
- <td>To set the maximum amount of items displayed at a time with the widest browser width (window >= 1200)</td>
45
- </tr>
46
- <tr>
47
- <th scope="row">items_desktop=''</th>
48
- <td>4</td>
49
- <td>This allows you to preset the number of slides visible with (window >= 980) browser width.</td>
50
- </tr>
51
- <tr>
52
- <th scope="row">items_desktop_small=''</th>
53
- <td>3</td>
54
- <td>This allows you to preset the number of slides visible with (window >= 768) browser width.</td>
55
- </tr>
56
- <tr>
57
- <th scope="row">items_tablet=''</th>
58
- <td>2</td>
59
- <td>This allows you to preset the number of slides visible with (window >= 600) browser width.</td>
60
- </tr>
61
- <tr>
62
- <th scope="row">items_mobile=''</th>
63
- <td>1</td>
64
- <td>This allows you to preset the number of slides visible with (window >= 320) browser width.</td>
65
- </tr>
66
- <tr>
67
- <th scope="row">auto_play=''</th>
68
- <td>true</td>
69
- <td>Write true to enable autoplay else write false.</td>
70
- </tr>
71
- <tr>
72
- <th scope="row">stop_on_hover=''</th>
73
- <td>true</td>
74
- <td>Write true pause autoplay on mouse hover else write false.</td>
75
- </tr>
76
- <tr>
77
- <th scope="row">navigation=''</th>
78
- <td>true</td>
79
- <td>Write false to hide "next" and "previous" buttons.</td>
80
- </tr>
81
- <tr>
82
- <th scope="row">nav_color=''</th>
83
- <td>#d6d6d6</td>
84
- <td>Enter hex value of color for carousel navigation.</td>
85
- </tr>
86
- <tr>
87
- <th scope="row">nav_active_color=''</th>
88
- <td>#4dc7a0</td>
89
- <td>Enter hex value of color for carousel navigation on mouse hover.</td>
90
- </tr>
91
- <tr>
92
- <th scope="row">margin_right=''</th>
93
- <td>10</td>
94
- <td>margin-right(px) on item. Default value is 10. Example: 20</td>
95
- </tr>
96
- <tr>
97
- <th scope="row">inifnity_loop=''</th>
98
- <td>true</td>
99
- <td>Write true to show inifnity loop. Duplicate last and first items to get loop illusion</td>
100
- </tr>
101
- <tr>
102
- <th scope="row">autoplay_timeout=''</th>
103
- <td>5000</td>
104
- <td>Autoplay interval timeout in millisecond. Default: 5000</td>
105
- </tr>
106
- <tr>
107
- <th scope="row">autoplay_speed=''</th>
108
- <td>500</td>
109
- <td>Autoplay speen in millisecond. Default: 500</td>
110
- </tr>
111
- <tr>
112
- <th scope="row">slide_by=''</th>
113
- <td>1</td>
114
- <td>Navigation slide by x number. Default value is 1.</td>
115
- </tr>
116
- </table>
117
 
118
- <h2>Example 1</h2>
119
- <pre style="overflow: auto;"><code>[carousel][item img_link='http://lorempixel.com/400/200/city/1/'][item img_link='http://lorempixel.com/400/200/city/2/'][item img_link='http://lorempixel.com/400/200/city/3/'][item img_link='http://lorempixel.com/400/200/city/4/'][item img_link='http://lorempixel.com/400/200/city/5/'][item img_link='http://lorempixel.com/400/200/city/6/'][item img_link='http://lorempixel.com/400/200/city/7/'][item img_link='http://lorempixel.com/400/200/city/8/'][item img_link='http://lorempixel.com/400/200/city/9/'][item img_link='http://lorempixel.com/400/200/city/10/'][/carousel]</code></pre>
 
 
 
 
120
 
121
- <h2>Example 2 with attribute</h2>
122
- <pre style="overflow: auto;"><code>[carousel id='myCustomId' items='3' items_desktop='3' margin_right='5' navigation='false'][item img_link='http://lorempixel.com/400/200/city/1/'][item img_link='http://lorempixel.com/400/200/city/2/'][item img_link='http://lorempixel.com/400/200/city/3/'][item img_link='http://lorempixel.com/400/200/city/4/'][item img_link='http://lorempixel.com/400/200/city/5/'][item img_link='http://lorempixel.com/400/200/city/6/'][item img_link='http://lorempixel.com/400/200/city/7/'][item img_link='http://lorempixel.com/400/200/city/8/'][item img_link='http://lorempixel.com/400/200/city/9/'][item img_link='http://lorempixel.com/400/200/city/10/'][/carousel]</code></pre>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
123
  </div>
1
  <div class="wrap">
2
+ <h1 class="wp-heading"><?php _e('Carousel Slider Documentation', 'carousel-slider' ); ?></h1>
3
+ <div id="poststuff">
4
+ <div id="post-body" class="metabox-holder columns-2">
5
+ <div id="post-body-content">
6
 
7
+ <div class="postbox ">
8
+ <button type="button" class="handlediv button-link" aria-expanded="true">
9
+ <span class="screen-reader-text">Toggle panel: Video Instruction</span>
10
+ <span class="toggle-indicator" aria-hidden="true"></span>
11
+ </button>
12
+ <h2 class="hndle ui-sortable-handle"><span>Video Instruction</span></h2>
13
+ <div class="inside">
14
+ <div style="position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0;">
15
+ <iframe
16
+ style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
17
+ width="1280"
18
+ height="720"
19
+ src="https://www.youtube.com/embed/O4-EM32h7b4?list=PL9GiQPpTzMv5ftsvX55JO_lTDcKrwCPVn"
20
+ frameborder="0"
21
+ allowfullscreen
22
+ ></iframe>
23
+ </div>
24
+ </div>
25
+ </div>
26
 
27
+ </div><!-- #post-body-content -->
 
 
 
28
 
29
+ <div id="postbox-container-1" class="postbox-container">
30
 
31
+ <div class="postbox ">
32
+ <div class="inside">
33
+ <p><strong>If you like this plugin or if you make money using this or if you want to help me to continue my contribution on open source projects, consider to make a small donation.</strong></p>
34
+ <p style="text-align: center;"><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=3LZWQTHEVYWCY" target="_blank"><img alt="PayPal Donate" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif"></a></p>
35
+ </div>
36
+ </div>
37
 
38
+ <div class="postbox ">
39
+ <h2 class="hndle"><span>Example 1 - linking image</span></h2>
40
+ <div class="inside">
41
+ <pre style="overflow: auto;"><code>[carousel][item img_link='http://lorempixel.com/400/400/city/1/'][item img_link='http://lorempixel.com/400/400/city/2/'][item img_link='http://lorempixel.com/400/400/city/3/'][item img_link='http://lorempixel.com/400/400/city/4/'][item img_link='http://lorempixel.com/400/400/city/5/'][item img_link='http://lorempixel.com/400/400/city/6/'][item img_link='http://lorempixel.com/400/400/city/7/'][item img_link='http://lorempixel.com/400/400/city/8/'][item img_link='http://lorempixel.com/400/400/city/9/'][item img_link='http://lorempixel.com/400/400/city/10/'][/carousel]</code></pre>
42
+ </div>
43
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
44
 
45
+ <div class="postbox">
46
+ <h2 class="hndle"><span>Example 2 - linking image</span></h2>
47
+ <div class="inside">
48
+ <pre style="overflow: auto;"><code>[carousel id='myCustomId' items='3' items_desktop='3' margin_right='5' navigation='false'][item img_link='http://lorempixel.com/400/400/city/1/'][item img_link='http://lorempixel.com/400/400/city/2/'][item img_link='http://lorempixel.com/400/400/city/3/'][item img_link='http://lorempixel.com/400/400/city/4/'][item img_link='http://lorempixel.com/400/400/city/5/'][item img_link='http://lorempixel.com/400/400/city/6/'][item img_link='http://lorempixel.com/400/400/city/7/'][item img_link='http://lorempixel.com/400/400/city/8/'][item img_link='http://lorempixel.com/400/400/city/9/'][item img_link='http://lorempixel.com/400/400/city/10/'][/carousel]</code></pre>
49
+ </div>
50
+ </div>
51
 
52
+ </div><!-- #postbox-container-1 -->
53
+ <div id="postbox-container-2" class="postbox-container">
54
+ <div class="postbox ">
55
+ <h2 class="hndle"><span>Usage - linking image</span></h2>
56
+ <div class="inside">
57
+ <p>Without using custom post (Carousels admin menu), you can use custom shortcode to link image and generate carousel slider.</p>
58
+ <p>To gererate carousel slider using shortcode, at first write wrapper shortcode as following:</p>
59
+ <pre><code>[carousel][/carousel]</code></pre>
60
+ <p>Now write the following shortcode inside the wrapper shortcode as many image as you want.</p>
61
+ <pre><code>[item img_link=""]</code></pre>
62
+ <p>You can add following attribute if you want to link image to custom post, page, image, etc. Like as following</p>
63
+ <pre><code>[item img_link="IMAGE_URL_GOES_HERE" href="CUSTOM_URL_GOES_HERE"]</code></pre>
64
+ <P>The whole shortcode look likes as following: (See example shortcode.)</P>
65
+ <pre style="overflow: auto;"><code>[carousel][item img_link="IMAGE_URL_GOES_HERE"][item img_link="IMAGE_URL_GOES_HERE" href="CUSTOM_URL_GOES_HERE"][item img_link="IMAGE_URL_GOES_HERE"][/carousel]</code></pre>
66
+ <h2>Shortcode Attributes</h2>
67
+ <p>You can use shortcode attributes to change default functionality. These attributes need to place inside wrapper shortcode. The available shortcode attributes are as following:</p>
68
+ <table class="form-table doc-table">
69
+ <tr>
70
+ <th scope="row">Attribute</th>
71
+ <th>Default Value</th>
72
+ <th>Usage</th>
73
+ </tr>
74
+ <tr>
75
+ <th scope="row">id=''</th>
76
+ <td>Random Number.</td>
77
+ <td>Add id if you want to use multiple carousel at same page. If you leave it blank, it will generate random number.</td>
78
+ </tr>
79
+ <tr>
80
+ <th scope="row">items=''</th>
81
+ <td>4</td>
82
+ <td>To set the maximum amount of items displayed at a time with the widest browser width (window >= 1200)</td>
83
+ </tr>
84
+ <tr>
85
+ <th scope="row">items_desktop=''</th>
86
+ <td>4</td>
87
+ <td>This allows you to preset the number of slides visible with (window >= 980) browser width.</td>
88
+ </tr>
89
+ <tr>
90
+ <th scope="row">items_desktop_small=''</th>
91
+ <td>3</td>
92
+ <td>This allows you to preset the number of slides visible with (window >= 768) browser width.</td>
93
+ </tr>
94
+ <tr>
95
+ <th scope="row">items_tablet=''</th>
96
+ <td>2</td>
97
+ <td>This allows you to preset the number of slides visible with (window >= 600) browser width.</td>
98
+ </tr>
99
+ <tr>
100
+ <th scope="row">items_mobile=''</th>
101
+ <td>1</td>
102
+ <td>This allows you to preset the number of slides visible with (window >= 320) browser width.</td>
103
+ </tr>
104
+ <tr>
105
+ <th scope="row">auto_play=''</th>
106
+ <td>true</td>
107
+ <td>Write true to enable autoplay else write false.</td>
108
+ </tr>
109
+ <tr>
110
+ <th scope="row">stop_on_hover=''</th>
111
+ <td>true</td>
112
+ <td>Write true pause autoplay on mouse hover else write false.</td>
113
+ </tr>
114
+ <tr>
115
+ <th scope="row">navigation=''</th>
116
+ <td>true</td>
117
+ <td>Write false to hide "next" and "previous" buttons.</td>
118
+ </tr>
119
+ <tr>
120
+ <th scope="row">nav_color=''</th>
121
+ <td>#d6d6d6</td>
122
+ <td>Enter hex value of color for carousel navigation.</td>
123
+ </tr>
124
+ <tr>
125
+ <th scope="row">nav_active_color=''</th>
126
+ <td>#4dc7a0</td>
127
+ <td>Enter hex value of color for carousel navigation on mouse hover.</td>
128
+ </tr>
129
+ <tr>
130
+ <th scope="row">margin_right=''</th>
131
+ <td>10</td>
132
+ <td>margin-right(px) on item. Default value is 10. Example: 20</td>
133
+ </tr>
134
+ <tr>
135
+ <th scope="row">inifnity_loop=''</th>
136
+ <td>true</td>
137
+ <td>Write true to show inifnity loop. Duplicate last and first items to get loop illusion</td>
138
+ </tr>
139
+ <tr>
140
+ <th scope="row">autoplay_timeout=''</th>
141
+ <td>5000</td>
142
+ <td>Autoplay interval timeout in millisecond. Default: 5000</td>
143
+ </tr>
144
+ <tr>
145
+ <th scope="row">autoplay_speed=''</th>
146
+ <td>500</td>
147
+ <td>Autoplay speen in millisecond. Default: 500</td>
148
+ </tr>
149
+ <tr>
150
+ <th scope="row">slide_by=''</th>
151
+ <td>1</td>
152
+ <td>Navigation slide by x number. Default value is 1.</td>
153
+ </tr>
154
+ </table>
155
+ </div>
156
+ </div>
157
+ </div><!-- #postbox-container-2 -->
158
+
159
+ </div><!-- #post-body -->
160
+ </div><!-- #poststuff -->
161
+ <br class="clear">
162
  </div>