Slide Anything – Responsive Content / HTML Slider and Carousel - Version 2.1.17

Version Description

  • Added a new feature to facilitate owl-carousel 'Lazy Load' images. With this feature enabled, slide images ( tags) are only loaded when the relevant slides are displayed (all of the slider's images are NOT loaded up-front).
Download this release

Release Info

Developer simonpedge
Plugin Icon 128x128 Slide Anything – Responsive Content / HTML Slider and Carousel
Version 2.1.17
Comparing to
See all releases

Code changes from version 2.1.16 to 2.1.17

Files changed (6) hide show
  1. images/lazy_load.gif +0 -0
  2. owl-carousel/sa-owl-theme.css +191 -187
  3. php/slide-anything-admin.php +20 -0
  4. php/slide-anything-frontend.php +46 -9
  5. readme.txt +14 -1
  6. slide-anything.php +1 -1
images/lazy_load.gif ADDED
Binary file
owl-carousel/sa-owl-theme.css CHANGED
@@ -1,187 +1,191 @@
1
- /*
2
- ##############################################################
3
- ### OWL CAROUSEL THEME (CSS) FOR THE SLIDE ANYTHING PLUGIN ###
4
- ##############################################################
5
- */
6
-
7
- .owl-carousel .owl-stage-outer {
8
- width:100% !important;
9
- }
10
- /* ### ERROR MESSAGES ### */
11
- #sa_invalid_postid {
12
- width:100% !important;
13
- padding:20px 0px !important;
14
- font-size:16px !important;
15
- line-height:22px !important;
16
- color:crimson !important;
17
- }
18
- /* ### PAGINATION BUTTONS ### */
19
- .sa_owl_theme .owl-dots {
20
- position:absolute;
21
- width:100%;
22
- padding:10px 0px 0px !important;
23
- bottom:-22px !important;
24
- text-align:center !important;
25
- font-size:12px !important;
26
- line-height:12px !important;
27
- }
28
- .sa_owl_theme .owl-dots .owl-dot {
29
- display: inline-block !important;
30
- }
31
- .sa_owl_theme .owl-dots .owl-dot span {
32
- display:inline-block !important;
33
- border-style:none !important;
34
- background-color:rgba(0,0,0,0.2) !important;
35
- width:10px !important;
36
- height:10px !important;
37
- border-radius:50% !important;
38
- margin:0px 3px !important;
39
- transition:all .3s ease-in-out !important;
40
- -webkit-transition:all .3s ease-in-out !important;
41
- -moz-transition:all .3s ease-in-out !important;
42
- -o-transition:all .3s ease-in-out !important;
43
- }
44
- .sa_owl_theme .owl-dots .active span {
45
- background-color:rgba(0,0,0,0.5) !important;
46
- }
47
- .sa_owl_theme .owl-dots .owl-dot span:hover {
48
- background-color:rgba(0,0,0,0.5) !important;
49
- }
50
- .owl-pagination-true {
51
- margin-bottom:22px !important;
52
- }
53
-
54
- /* ### PREVIOUS AND NEXT ARROW BUTTONS ### */
55
- .sa_owl_theme .owl-nav {
56
- display:block !important;
57
- }
58
- .autohide-arrows .owl-nav {
59
- display:none !important;
60
- }
61
- .autohide-arrows:hover .owl-nav {
62
- display:block !important;
63
- }
64
- .sa_owl_theme .owl-nav div,
65
- .sa_owl_theme .owl-nav button {
66
- position:absolute;
67
- top:50%;
68
- padding:2px 0px !important;
69
- display:inline-block;
70
- margin-top:-20px !important;
71
- line-height:30px !important;
72
- height:40px !important;
73
- width:30px !important;
74
- transition:all .3s ease-in-out !important;
75
- -webkit-transition:all .3s ease-in-out !important;
76
- -moz-transition:all .3s ease-in-out !important;
77
- -o-transition:all .3s ease-in-out !important;
78
- }
79
- .sa_owl_theme .owl-nav .owl-prev {
80
- left:10px;
81
- }
82
- .sa_owl_theme .owl-nav .owl-next {
83
- right:10px;
84
- }
85
- .sa_owl_theme .disabled .owl-prev,
86
- .sa_owl_theme .disabled .owl-next {
87
- display:none !important;
88
- }
89
- /* WHITE COLOR SCHEME */
90
- .white .sa_owl_theme .owl-nav .owl-prev {
91
- background:rgba(0,0,0,0.3) url('../images/icon_prev.png') no-repeat center center !important;
92
- }
93
- .white .sa_owl_theme .owl-nav .owl-next {
94
- background:rgba(0,0,0,0.3) url('../images/icon_next.png') no-repeat center center !important;
95
- }
96
- .white .sa_owl_theme .owl-nav .owl-prev:hover,
97
- .white .sa_owl_theme .owl-nav .owl-next:hover {
98
- background-color:rgba(0,0,0,0.8) !important;
99
- }
100
- /* BLACK COLOR SCHEME */
101
- .black .sa_owl_theme .owl-nav .owl-prev {
102
- background:rgba(255,255,255,0.3) url('../images/black_icon_prev.png') no-repeat center center !important;
103
- }
104
- .black .sa_owl_theme .owl-nav .owl-next {
105
- background:rgba(255,255,255,0.3) url('../images/black_icon_next.png') no-repeat center center !important;
106
- }
107
- .black .sa_owl_theme .owl-nav .owl-prev:hover,
108
- .black .sa_owl_theme .owl-nav .owl-next:hover {
109
- background-color:rgba(255,255,255,0.8) !important;
110
- }
111
-
112
- /* ### LINK, ZOOM AND VIDEO POPUP ICONS ### */
113
- .sa_owl_theme .owl-item .sa_hover_container .sa_hover_buttons {
114
- width:auto;
115
- height:auto;
116
- position:absolute;
117
- border-radius:0px !important;
118
- z-index:2;
119
- cursor:pointer;
120
- background:transparent !important;
121
- }
122
- .sa_owl_theme .owl-item .sa_hover_container .always_visible .sa_slide_link_icon,
123
- .sa_owl_theme .owl-item .sa_hover_container .always_visible .sa_popup_zoom_icon,
124
- .sa_owl_theme .owl-item .sa_hover_container .always_visible .sa_popup_video_icon,
125
- .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_slide_link_icon,
126
- .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_popup_zoom_icon,
127
- .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_popup_video_icon {
128
- display:block;
129
- float:left;
130
- width:40px;
131
- height:40px;
132
- }
133
- .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_slide_link_icon:hover,
134
- .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_popup_zoom_icon:hover,
135
- .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_popup_video_icon:hover {
136
- transition:background-color .3s ease-in-out, background-image .3s ease-in-out !important;
137
- -webkit-transition:background-color .3s ease-in-out, background-image .3s ease-in-out !important;
138
- -moz-transition:background-color .3s ease-in-out, background-image .3s ease-in-out !important;
139
- -o-transition:background-color .3s ease-in-out, background-image .3s ease-in-out !important;
140
- }
141
- /* WHITE COLOR SCHEME */
142
- .white .sa_owl_theme .owl-item .sa_hover_container .always_visible .sa_slide_link_icon,
143
- .white .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_slide_link_icon {
144
- background:rgba(0,0,0,0.3) url('../images/slide_link.png') no-repeat center center !important;
145
- }
146
- .white .sa_owl_theme .owl-item .sa_hover_container .always_visible .sa_popup_zoom_icon,
147
- .white .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_popup_zoom_icon {
148
- background:rgba(0,0,0,0.3) url('../images/lightbox_zoom.png') no-repeat center center !important;
149
- }
150
- .white .sa_owl_theme .owl-item .sa_hover_container .always_visible .sa_popup_video_icon,
151
- .white .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_popup_video_icon {
152
- background:rgba(0,0,0,0.3) url('../images/lightbox_video.png') no-repeat center center !important;
153
- }
154
- .white .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_slide_link_icon:hover,
155
- .white .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_popup_zoom_icon:hover,
156
- .white .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_popup_video_icon:hover {
157
- background-color:rgba(0,0,0,0.8) !important;
158
- }
159
- /* BLACK COLOR SCHEME */
160
- .black .sa_owl_theme .owl-item .sa_hover_container .always_visible .sa_slide_link_icon,
161
- .black .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_slide_link_icon {
162
- background:rgba(255,255,255,0.3) url('../images/black_slide_link.png') no-repeat center center !important;
163
- }
164
- .black .sa_owl_theme .owl-item .sa_hover_container .always_visible .sa_popup_zoom_icon,
165
- .black .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_popup_zoom_icon {
166
- background:rgba(255,255,255,0.3) url('../images/black_lightbox_zoom.png') no-repeat center center !important;
167
- }
168
- .black .sa_owl_theme .owl-item .sa_hover_container .always_visible .sa_popup_video_icon,
169
- .black .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_popup_video_icon {
170
- background:rgba(255,255,255,0.3) url('../images/black_lightbox_video.png') no-repeat center center !important;
171
- }
172
- .black .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_slide_link_icon:hover,
173
- .black .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_popup_zoom_icon:hover,
174
- .black .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_popup_video_icon:hover {
175
- background-color:rgba(255,255,255,0.8) !important;
176
- }
177
-
178
- /* MAGNIFIC POPUP */
179
- .sa_custom_popup {
180
- position:relative;
181
- padding:20px;
182
- width:auto;
183
- margin:20px auto;
184
- }
185
- .mfp-hide {
186
- display: none !important;
187
- }
 
 
 
 
1
+ /*
2
+ ##############################################################
3
+ ### OWL CAROUSEL THEME (CSS) FOR THE SLIDE ANYTHING PLUGIN ###
4
+ ##############################################################
5
+ */
6
+
7
+ .owl-carousel .owl-stage-outer {
8
+ width:100% !important;
9
+ }
10
+ /* ### ERROR MESSAGES ### */
11
+ #sa_invalid_postid {
12
+ width:100% !important;
13
+ padding:20px 0px !important;
14
+ font-size:16px !important;
15
+ line-height:22px !important;
16
+ color:crimson !important;
17
+ }
18
+ /* ### PAGINATION BUTTONS ### */
19
+ .sa_owl_theme .owl-dots {
20
+ position:absolute;
21
+ width:100%;
22
+ padding:10px 0px 0px !important;
23
+ bottom:-22px !important;
24
+ text-align:center !important;
25
+ font-size:12px !important;
26
+ line-height:12px !important;
27
+ }
28
+ .sa_owl_theme .owl-dots .owl-dot {
29
+ display: inline-block !important;
30
+ }
31
+ .sa_owl_theme .owl-dots .owl-dot span {
32
+ display:inline-block !important;
33
+ border-style:none !important;
34
+ background-color:rgba(0,0,0,0.2) !important;
35
+ width:10px !important;
36
+ height:10px !important;
37
+ border-radius:50% !important;
38
+ margin:0px 3px !important;
39
+ transition:all .3s ease-in-out !important;
40
+ -webkit-transition:all .3s ease-in-out !important;
41
+ -moz-transition:all .3s ease-in-out !important;
42
+ -o-transition:all .3s ease-in-out !important;
43
+ }
44
+ .sa_owl_theme .owl-dots .active span {
45
+ background-color:rgba(0,0,0,0.5) !important;
46
+ }
47
+ .sa_owl_theme .owl-dots .owl-dot span:hover {
48
+ background-color:rgba(0,0,0,0.5) !important;
49
+ }
50
+ .owl-pagination-true {
51
+ margin-bottom:22px !important;
52
+ }
53
+
54
+ /* ### PREVIOUS AND NEXT ARROW BUTTONS ### */
55
+ .sa_owl_theme .owl-nav {
56
+ display:block !important;
57
+ }
58
+ .autohide-arrows .owl-nav {
59
+ display:none !important;
60
+ }
61
+ .autohide-arrows:hover .owl-nav {
62
+ display:block !important;
63
+ }
64
+ .sa_owl_theme .owl-nav div,
65
+ .sa_owl_theme .owl-nav button {
66
+ position:absolute;
67
+ top:50%;
68
+ padding:2px 0px !important;
69
+ display:inline-block;
70
+ margin-top:-20px !important;
71
+ line-height:30px !important;
72
+ height:40px !important;
73
+ width:30px !important;
74
+ transition:all .3s ease-in-out !important;
75
+ -webkit-transition:all .3s ease-in-out !important;
76
+ -moz-transition:all .3s ease-in-out !important;
77
+ -o-transition:all .3s ease-in-out !important;
78
+ }
79
+ .sa_owl_theme .owl-nav .owl-prev {
80
+ left:10px;
81
+ }
82
+ .sa_owl_theme .owl-nav .owl-next {
83
+ right:10px;
84
+ }
85
+ .sa_owl_theme .disabled .owl-prev,
86
+ .sa_owl_theme .disabled .owl-next {
87
+ display:none !important;
88
+ }
89
+ /* WHITE COLOR SCHEME */
90
+ .white .sa_owl_theme .owl-nav .owl-prev {
91
+ background:rgba(0,0,0,0.3) url('../images/icon_prev.png') no-repeat center center !important;
92
+ }
93
+ .white .sa_owl_theme .owl-nav .owl-next {
94
+ background:rgba(0,0,0,0.3) url('../images/icon_next.png') no-repeat center center !important;
95
+ }
96
+ .white .sa_owl_theme .owl-nav .owl-prev:hover,
97
+ .white .sa_owl_theme .owl-nav .owl-next:hover {
98
+ background-color:rgba(0,0,0,0.8) !important;
99
+ }
100
+ /* BLACK COLOR SCHEME */
101
+ .black .sa_owl_theme .owl-nav .owl-prev {
102
+ background:rgba(255,255,255,0.3) url('../images/black_icon_prev.png') no-repeat center center !important;
103
+ }
104
+ .black .sa_owl_theme .owl-nav .owl-next {
105
+ background:rgba(255,255,255,0.3) url('../images/black_icon_next.png') no-repeat center center !important;
106
+ }
107
+ .black .sa_owl_theme .owl-nav .owl-prev:hover,
108
+ .black .sa_owl_theme .owl-nav .owl-next:hover {
109
+ background-color:rgba(255,255,255,0.8) !important;
110
+ }
111
+
112
+ /* ### LINK, ZOOM AND VIDEO POPUP ICONS ### */
113
+ .sa_owl_theme .owl-item .sa_hover_container .sa_hover_buttons {
114
+ width:auto;
115
+ height:auto;
116
+ position:absolute;
117
+ border-radius:0px !important;
118
+ z-index:2;
119
+ cursor:pointer;
120
+ background:transparent !important;
121
+ }
122
+ .sa_owl_theme .owl-item .sa_hover_container .always_visible .sa_slide_link_icon,
123
+ .sa_owl_theme .owl-item .sa_hover_container .always_visible .sa_popup_zoom_icon,
124
+ .sa_owl_theme .owl-item .sa_hover_container .always_visible .sa_popup_video_icon,
125
+ .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_slide_link_icon,
126
+ .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_popup_zoom_icon,
127
+ .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_popup_video_icon {
128
+ display:block;
129
+ float:left;
130
+ width:40px;
131
+ height:40px;
132
+ }
133
+ .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_slide_link_icon:hover,
134
+ .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_popup_zoom_icon:hover,
135
+ .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_popup_video_icon:hover {
136
+ transition:background-color .3s ease-in-out, background-image .3s ease-in-out !important;
137
+ -webkit-transition:background-color .3s ease-in-out, background-image .3s ease-in-out !important;
138
+ -moz-transition:background-color .3s ease-in-out, background-image .3s ease-in-out !important;
139
+ -o-transition:background-color .3s ease-in-out, background-image .3s ease-in-out !important;
140
+ }
141
+ /* WHITE COLOR SCHEME */
142
+ .white .sa_owl_theme .owl-item .sa_hover_container .always_visible .sa_slide_link_icon,
143
+ .white .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_slide_link_icon {
144
+ background:rgba(0,0,0,0.3) url('../images/slide_link.png') no-repeat center center !important;
145
+ }
146
+ .white .sa_owl_theme .owl-item .sa_hover_container .always_visible .sa_popup_zoom_icon,
147
+ .white .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_popup_zoom_icon {
148
+ background:rgba(0,0,0,0.3) url('../images/lightbox_zoom.png') no-repeat center center !important;
149
+ }
150
+ .white .sa_owl_theme .owl-item .sa_hover_container .always_visible .sa_popup_video_icon,
151
+ .white .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_popup_video_icon {
152
+ background:rgba(0,0,0,0.3) url('../images/lightbox_video.png') no-repeat center center !important;
153
+ }
154
+ .white .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_slide_link_icon:hover,
155
+ .white .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_popup_zoom_icon:hover,
156
+ .white .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_popup_video_icon:hover {
157
+ background-color:rgba(0,0,0,0.8) !important;
158
+ }
159
+ /* BLACK COLOR SCHEME */
160
+ .black .sa_owl_theme .owl-item .sa_hover_container .always_visible .sa_slide_link_icon,
161
+ .black .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_slide_link_icon {
162
+ background:rgba(255,255,255,0.3) url('../images/black_slide_link.png') no-repeat center center !important;
163
+ }
164
+ .black .sa_owl_theme .owl-item .sa_hover_container .always_visible .sa_popup_zoom_icon,
165
+ .black .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_popup_zoom_icon {
166
+ background:rgba(255,255,255,0.3) url('../images/black_lightbox_zoom.png') no-repeat center center !important;
167
+ }
168
+ .black .sa_owl_theme .owl-item .sa_hover_container .always_visible .sa_popup_video_icon,
169
+ .black .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_popup_video_icon {
170
+ background:rgba(255,255,255,0.3) url('../images/black_lightbox_video.png') no-repeat center center !important;
171
+ }
172
+ .black .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_slide_link_icon:hover,
173
+ .black .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_popup_zoom_icon:hover,
174
+ .black .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_popup_video_icon:hover {
175
+ background-color:rgba(255,255,255,0.8) !important;
176
+ }
177
+ /* LAZY LOAD SETTING ENABLED */
178
+ .lazy-load .owl-item {
179
+ background:transparent url('../images/lazy_load.gif') no-repeat center;
180
+ }
181
+
182
+ /* MAGNIFIC POPUP */
183
+ .sa_custom_popup {
184
+ position:relative;
185
+ padding:20px;
186
+ width:auto;
187
+ margin:20px auto;
188
+ }
189
+ .mfp-hide {
190
+ display: none !important;
191
+ }
php/slide-anything-admin.php CHANGED
@@ -1692,6 +1692,21 @@ function cpt_slider_style_content($post) {
1692
  }
1693
  echo "</div>\n";
1694
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1695
  echo "</div>\n";
1696
  }
1697
 
@@ -2078,6 +2093,11 @@ function cpt_slider_save_postdata() {
2078
  } else {
2079
  update_post_meta($post->ID, 'sa_strip_javascript', '0');
2080
  }
 
 
 
 
 
2081
  }
2082
  }
2083
 
1692
  }
1693
  echo "</div>\n";
1694
 
1695
+ // Enable Lazy Load Images
1696
+ $lazy_load_images = get_post_meta($post->ID, 'sa_lazy_load_images', true);
1697
+ if ($lazy_load_images == '') {
1698
+ $lazy_load_images = '0';
1699
+ }
1700
+ $tooltip = "Enable &quot;Lazy Load&quot; for images added to your slide content (note: does not apply to slide backgrounds).";
1701
+ echo "<div id='sa_window_onload_line'>";
1702
+ echo "<span class='sa_tooltip' title='".$tooltip."'></span><span style='min-width:160px;'>Enable 'Lazy Load' Images:</span>";
1703
+ if ($lazy_load_images == '1') {
1704
+ echo "<input type='checkbox' id='sa_lazy_load_images' name='sa_lazy_load_images' value='1' checked/>";
1705
+ } else {
1706
+ echo "<input type='checkbox' id='sa_lazy_load_images' name='sa_lazy_load_images' value='1'/>";
1707
+ }
1708
+ echo "</div>\n";
1709
+
1710
  echo "</div>\n";
1711
  }
1712
 
2093
  } else {
2094
  update_post_meta($post->ID, 'sa_strip_javascript', '0');
2095
  }
2096
+ if (isset($_POST['sa_lazy_load_images']) && ($_POST['sa_lazy_load_images'] == '1')) {
2097
+ update_post_meta($post->ID, 'sa_lazy_load_images', '1');
2098
+ } else {
2099
+ update_post_meta($post->ID, 'sa_lazy_load_images', '0');
2100
+ }
2101
  }
2102
  }
2103
 
php/slide-anything-frontend.php CHANGED
@@ -102,9 +102,6 @@ function slide_anything_shortcode($atts) {
102
  }
103
  }
104
  $slide_data['slide_duration'] = floatval($metadata['sa_slide_duration'][0]) * 1000;
105
- if ($slide_data['slide_duration'] == 0) {
106
- $slide_data['slide_duration'] = 'false';
107
- }
108
  $slide_data['slide_transition'] = floatval($metadata['sa_slide_transition'][0]) * 1000;
109
  if (isset($metadata['sa_slide_by'][0]) && ($metadata['sa_slide_by'][0] != '')) {
110
  $slide_data['slide_by'] = $metadata['sa_slide_by'][0];
@@ -225,6 +222,10 @@ function slide_anything_shortcode($atts) {
225
  $slide_data['strip_javascript'] = '0';
226
  }
227
  }
 
 
 
 
228
 
229
  // REVERSE THE ORDER OF THE SLIDES IF 'Random Order' CHECKBOX IS CHECKED OR
230
  // RE-ORDER SLIDES IN A RANDOM ORDER IF 'Random Order' CHECKBOX IS CHECKED
@@ -299,19 +300,22 @@ function slide_anything_shortcode($atts) {
299
  $wrapper_style .= $slide_data['wrapper_padd_bottom']."px ";
300
  $wrapper_style .= $slide_data['wrapper_padd_left']."px;";
301
  $output .= "<div class='".$slide_data['slide_icons_color']."' style='".esc_attr($wrapper_style)."'>\n";
 
302
  if ($slide_data['pagination'] == 'true') {
303
  if ($slide_data['autohide_arrows'] == 'true') {
304
- $output .= "<div id='".esc_attr($slide_data['css_id'])."' class='owl-carousel owl-pagination-true autohide-arrows sa_owl_theme'>\n";
305
  } else {
306
- $output .= "<div id='".esc_attr($slide_data['css_id'])."' class='owl-carousel owl-pagination-true sa_owl_theme'>\n";
307
  }
308
  } else {
309
  if ($slide_data['autohide_arrows'] == 'true') {
310
- $output .= "<div id='".esc_attr($slide_data['css_id'])."' class='owl-carousel autohide-arrows sa_owl_theme'>\n";
311
- } else {
312
- $output .= "<div id='".esc_attr($slide_data['css_id'])."' class='owl-carousel sa_owl_theme'>\n";
313
  }
314
  }
 
 
 
 
315
  if ($sa_pro_version) {
316
  // PRO VERSION - INITIALISE VAIRABLES FOR MAGNIFIC POPUP
317
  $lightbox_function = "open_lightbox_gallery_".$slide_data['css_id'];
@@ -417,6 +421,10 @@ function slide_anything_shortcode($atts) {
417
  // strip JavaScript code (<script> tags) from slide content
418
  $slide_content = remove_javascript_from_content($slide_content);
419
  }
 
 
 
 
420
  $output .= $slide_content."</div>\n"; // .sa_hover_container
421
  }
422
  $output .= "</div>\n";
@@ -514,9 +522,11 @@ function slide_anything_shortcode($atts) {
514
  }
515
  if ($slide_data['slide_duration'] == 0) {
516
  $output .= " autoplay : false,\n";
 
517
  } else {
518
  $output .= " autoplay : true,\n";
519
  $output .= " autoplayTimeout : ".esc_attr($slide_data['slide_duration']).",\n";
 
520
  }
521
  $output .= " smartSpeed : ".esc_attr($slide_data['slide_transition']).",\n";
522
  $output .= " fluidSpeed : ".esc_attr($slide_data['slide_transition']).",\n";
@@ -524,7 +534,6 @@ function slide_anything_shortcode($atts) {
524
  $output .= " navSpeed : ".esc_attr($slide_data['slide_transition']).",\n";
525
  $output .= " dotsSpeed : ".esc_attr($slide_data['slide_transition']).",\n";
526
  $output .= " loop : ".esc_attr($slide_data['loop_slider']).",\n";
527
- $output .= " autoplayHoverPause : ".esc_attr($slide_data['stop_hover']).",\n";
528
  $output .= " nav : ".esc_attr($slide_data['nav_arrows']).",\n";
529
  $output .= " navText : ['',''],\n";
530
  $output .= " dots : ".esc_attr($slide_data['pagination']).",\n";
@@ -537,6 +546,10 @@ function slide_anything_shortcode($atts) {
537
  $output .= " mergeFit : true,\n";
538
  //$output .= " URLhashListener : true,\n";
539
  $output .= " autoHeight : ".esc_attr($slide_data['auto_height']).",\n";
 
 
 
 
540
  $output .= " mouseDrag : ".esc_attr($slide_data['mouse_drag']).",\n";
541
  $output .= " touchDrag : ".esc_attr($slide_data['touch_drag'])."\n";
542
  $output .= " });\n";
@@ -690,4 +703,28 @@ function remove_javascript_from_content($slide_content) {
690
  }
691
  return $slide_content;
692
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
693
  ?>
102
  }
103
  }
104
  $slide_data['slide_duration'] = floatval($metadata['sa_slide_duration'][0]) * 1000;
 
 
 
105
  $slide_data['slide_transition'] = floatval($metadata['sa_slide_transition'][0]) * 1000;
106
  if (isset($metadata['sa_slide_by'][0]) && ($metadata['sa_slide_by'][0] != '')) {
107
  $slide_data['slide_by'] = $metadata['sa_slide_by'][0];
222
  $slide_data['strip_javascript'] = '0';
223
  }
224
  }
225
+ $slide_data['lazy_load_images'] = '0';
226
+ if (isset($metadata['sa_lazy_load_images'])) {
227
+ $slide_data['lazy_load_images'] = $metadata['sa_lazy_load_images'][0];
228
+ }
229
 
230
  // REVERSE THE ORDER OF THE SLIDES IF 'Random Order' CHECKBOX IS CHECKED OR
231
  // RE-ORDER SLIDES IN A RANDOM ORDER IF 'Random Order' CHECKBOX IS CHECKED
300
  $wrapper_style .= $slide_data['wrapper_padd_bottom']."px ";
301
  $wrapper_style .= $slide_data['wrapper_padd_left']."px;";
302
  $output .= "<div class='".$slide_data['slide_icons_color']."' style='".esc_attr($wrapper_style)."'>\n";
303
+ $additional_classes = '';
304
  if ($slide_data['pagination'] == 'true') {
305
  if ($slide_data['autohide_arrows'] == 'true') {
306
+ $additional_classes = "owl-pagination-true autohide-arrows";
307
  } else {
308
+ $additional_classes = "owl-pagination-true";
309
  }
310
  } else {
311
  if ($slide_data['autohide_arrows'] == 'true') {
312
+ $additional_classes = "autohide-arrows";
 
 
313
  }
314
  }
315
+ if ($slide_data['lazy_load_images'] == '1') {
316
+ $additional_classes .= " lazy-load";
317
+ }
318
+ $output .= "<div id='".esc_attr($slide_data['css_id'])."' class='owl-carousel sa_owl_theme ".$additional_classes."'>\n";
319
  if ($sa_pro_version) {
320
  // PRO VERSION - INITIALISE VAIRABLES FOR MAGNIFIC POPUP
321
  $lightbox_function = "open_lightbox_gallery_".$slide_data['css_id'];
421
  // strip JavaScript code (<script> tags) from slide content
422
  $slide_content = remove_javascript_from_content($slide_content);
423
  }
424
+ if ($slide_data['lazy_load_images'] == '1') {
425
+ // modify images (<img> tag) within slide content to enable owl carousel lazy load
426
+ $slide_content = set_slide_images_to_lazy_load($slide_content);
427
+ }
428
  $output .= $slide_content."</div>\n"; // .sa_hover_container
429
  }
430
  $output .= "</div>\n";
522
  }
523
  if ($slide_data['slide_duration'] == 0) {
524
  $output .= " autoplay : false,\n";
525
+ $output .= " autoplayHoverPause : false,\n";
526
  } else {
527
  $output .= " autoplay : true,\n";
528
  $output .= " autoplayTimeout : ".esc_attr($slide_data['slide_duration']).",\n";
529
+ $output .= " autoplayHoverPause : ".esc_attr($slide_data['stop_hover']).",\n";
530
  }
531
  $output .= " smartSpeed : ".esc_attr($slide_data['slide_transition']).",\n";
532
  $output .= " fluidSpeed : ".esc_attr($slide_data['slide_transition']).",\n";
534
  $output .= " navSpeed : ".esc_attr($slide_data['slide_transition']).",\n";
535
  $output .= " dotsSpeed : ".esc_attr($slide_data['slide_transition']).",\n";
536
  $output .= " loop : ".esc_attr($slide_data['loop_slider']).",\n";
 
537
  $output .= " nav : ".esc_attr($slide_data['nav_arrows']).",\n";
538
  $output .= " navText : ['',''],\n";
539
  $output .= " dots : ".esc_attr($slide_data['pagination']).",\n";
546
  $output .= " mergeFit : true,\n";
547
  //$output .= " URLhashListener : true,\n";
548
  $output .= " autoHeight : ".esc_attr($slide_data['auto_height']).",\n";
549
+ if ($slide_data['lazy_load_images'] == '1') {
550
+ $output .= " lazyLoad : true,\n";
551
+ $output .= " lazyLoadEager: 1,\n";
552
+ }
553
  $output .= " mouseDrag : ".esc_attr($slide_data['mouse_drag']).",\n";
554
  $output .= " touchDrag : ".esc_attr($slide_data['touch_drag'])."\n";
555
  $output .= " });\n";
703
  }
704
  return $slide_content;
705
  }
706
+
707
+
708
+
709
+ // ### MODIFY IMAGES (<img> tag) WITHIN STRING PASSED (SLIDE CONTENT) TO ENABLE OWL CAROUSEL LAZY LOAD ###
710
+ function set_slide_images_to_lazy_load($slide_content) {
711
+ // 1) REPLACE 'src=' WITH 'data-src=' WITHIN <IMG> TAGS
712
+ $slide_content = preg_replace('~<img[^>]*\K(?=src)~i','data-', $slide_content);
713
+
714
+ // 2) FOR EACH <IMG> TAG WITHIN THE SLIDE CONTENT, ADD THE 'owl-lazy' CLASS
715
+ $dom = new DOMDocument();
716
+ $dom->loadHTML($slide_content);
717
+ $imgs = $dom->getElementsByTagName('img');
718
+ foreach ($imgs as $img) {
719
+ $curr_class = $img->getAttribute('class');
720
+ if ($curr_class != '') {
721
+ $img->setAttribute('class', $curr_class.' owl-lazy');
722
+ } else {
723
+ $img->setAttribute('class', 'owl-lazy');
724
+ }
725
+ }
726
+ $slide_content = $dom->saveHTML();
727
+
728
+ return $slide_content;
729
+ }
730
  ?>
readme.txt CHANGED
@@ -18,6 +18,7 @@ Slide Anything allows you to create a carousel/slider where the content for each
18
 
19
  Slide Anything has now been rebuilt using Owl Carousel 2, and this now provides many improvements and new features:
20
 
 
21
  * Infinite Looping - a much requested Owl Carousel 2 feature, which means that the first slide is now seamlessly displayed after the last slide without any carousel rewind.
22
  * New Transition Effects - New Owl Carousel transitions include Slide, Fade, Zoom In, Zoom Out, Flip Out X/Y, Rotate Left/Right, Bounce Out, Roll Out and Slide Down.
23
  * Slide Link Feature - A new feature which allows you to create a hover-over link button for any slide within your carousels.
@@ -235,6 +236,12 @@ The `SLIDE STYLE` settings are the style settings for each individual slide with
235
  = 2.1.16 =
236
  * Small bug fix that relates to Slide Anything PRO only: Sliders with 'autoplay' enabled were re-starting autoplay when popups were closed.
237
 
 
 
 
 
 
 
238
  == Upgrade Notice ==
239
 
240
  = 1.0 =
@@ -384,4 +391,10 @@ The `SLIDE STYLE` settings are the style settings for each individual slide with
384
  * Upgraded to the latest version of Owl Carousel (version 2.3.4). Set the 'Mouse Drag' option to disabled by default. Mouse dragging when enabled affects vertical touch-drag scrolling on mobile devices.
385
 
386
  = 2.1.16 =
387
- * Small bug fix that relates to Slide Anything PRO only: Sliders with 'autoplay' enabled were re-starting autoplay when popups were closed.
 
 
 
 
 
 
18
 
19
  Slide Anything has now been rebuilt using Owl Carousel 2, and this now provides many improvements and new features:
20
 
21
+ * New Lazy Load Images - with this feature enabled, slide images (<img> tags) are only loaded when the relevant slides are displayed (all of the slider's images are NOT loaded up-front).
22
  * Infinite Looping - a much requested Owl Carousel 2 feature, which means that the first slide is now seamlessly displayed after the last slide without any carousel rewind.
23
  * New Transition Effects - New Owl Carousel transitions include Slide, Fade, Zoom In, Zoom Out, Flip Out X/Y, Rotate Left/Right, Bounce Out, Roll Out and Slide Down.
24
  * Slide Link Feature - A new feature which allows you to create a hover-over link button for any slide within your carousels.
236
  = 2.1.16 =
237
  * Small bug fix that relates to Slide Anything PRO only: Sliders with 'autoplay' enabled were re-starting autoplay when popups were closed.
238
 
239
+ = 2.1.17 =
240
+ * Added a new feature to facilitate owl-carousel 'Lazy Load' images. With this feature enabled, slide images (<img> tags) are only loaded when the relevant slides are displayed (all of the slider's images are NOT loaded up-front).
241
+
242
+ = 2.1.18 =
243
+ * Bug Fix - There was an issue on mobile phones when autoplay is disabled, and when you swipe to change current slide then autoplay starts up.
244
+
245
  == Upgrade Notice ==
246
 
247
  = 1.0 =
391
  * Upgraded to the latest version of Owl Carousel (version 2.3.4). Set the 'Mouse Drag' option to disabled by default. Mouse dragging when enabled affects vertical touch-drag scrolling on mobile devices.
392
 
393
  = 2.1.16 =
394
+ * Small bug fix that relates to Slide Anything PRO only: Sliders with 'autoplay' enabled were re-starting autoplay when popups were closed.
395
+
396
+ = 2.1.17 =
397
+ * Added a new feature to facilitate owl-carousel 'Lazy Load' images. With this feature enabled, slide images (<img> tags) are only loaded when the relevant slides are displayed (all of the slider's images are NOT loaded up-front).
398
+
399
+ = 2.1.18 =
400
+ * Bug Fix - There was an issue on mobile phones when autoplay is disabled, and when you swipe to change current slide then autoplay starts up.
slide-anything.php CHANGED
@@ -4,7 +4,7 @@
4
  * Plugin URI: https://wordpress.org/plugins/slide-anything/
5
  * Description: Slide Anything allows you to create a carousel/slider where the content for each slide can be anything you want - images, text, HTML, and even shortcodes. This plugin uses the Owl Carousel jQuery plugin, and lets you create beautiful, touch enabled, responsive carousels and sliders.
6
  * Author: Simon Edge
7
- * Version: 2.1.16
8
  * License: GPLv2 or later
9
  */
10
 
4
  * Plugin URI: https://wordpress.org/plugins/slide-anything/
5
  * Description: Slide Anything allows you to create a carousel/slider where the content for each slide can be anything you want - images, text, HTML, and even shortcodes. This plugin uses the Owl Carousel jQuery plugin, and lets you create beautiful, touch enabled, responsive carousels and sliders.
6
  * Author: Simon Edge
7
+ * Version: 2.1.18
8
  * License: GPLv2 or later
9
  */
10