1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
|
<?php
if ( ! defined( 'ABSPATH' ) ) {
die( '-1' );
}
class WPBakeryShortCode_image_swap extends WPBakeryShortCode {
protected function content( $atts, $content = null ) {
extract( shortcode_atts( array(
'image_id' => '',
'alt' => '',
'width' => '',
'img_width' => '',
'height' => '',
'img_height' => '',
'image_id2' => '',
'alt2' => '',
'caption_url' => '',
'caption_url_target' => '',
'border_width' => '10',
'border_style' => 'solid',
'border_color' => '#fff',
'front_anim_speed' => '',
'hover_effect' => 'maw_img_swap_fade',
'img_align' => 'left',
), $atts ) );
$img_swap_rand_id = rand(5, 500);
$caption_url = vc_build_link($caption_url);
if ($image_id != '') {
$image_url = wp_get_attachment_url( $image_id );
}
if ($image_id2 != '') {
$image_url2 = wp_get_attachment_url( $image_id2 );
}
$content = wpb_js_remove_wpautop($content, true);
ob_start(); ?>
<div style="text-align: <?php echo $img_align ?>;">
<div style="display: inline-block;">
<div class="maw_image_swap maw_image_swap_<?php echo $img_swap_rand_id; ?> ih-item <?php echo $hover_effect; ?>"
style="border: <?php echo $border_width; ?>px <?php echo $border_style; ?> <?php echo $border_color; ?>; height: <?php echo $height; ?>px; max-width: <?php echo $width; ?>px; box-shadow: none;">
<?php if (isset($caption_url['url']) && $caption_url['url'] != '') { ?>
<a href="<?php echo esc_url($caption_url['url']); ?>" target="<?php echo $caption_url['target']; ?>" title="<?php echo esc_html($caption_url['title']); ?>">
<?php }
if (isset($caption_url['url']) && $caption_url['url'] == NULL) { ?>
<a>
<?php } ?>
<div class="img">
<img src="<?php echo $image_url; ?>" alt="<?php echo $alt; ?>" style="height: <?php echo $height; ?>px; width: <?php echo $width; ?>px; max-width: 100%;">
</div>
<?php if ($hover_effect != 'maw_img_swap_fade') { ?>
<div class="info" style="opacity: 1 !important;">
<img src="<?php echo $image_url2; ?>" alt="<?php echo $alt2; ?>" style="height: <?php echo $height; ?>px; width: <?php echo $width; ?>px; max-width: 100%;">
</div>
<?php } ?>
<?php if ($hover_effect == 'maw_img_swap_fade') { ?>
<div class="info">
<img src="<?php echo $image_url2; ?>" alt="<?php echo $alt2; ?>" style="height: <?php echo $height; ?>px; width: <?php echo $width; ?>px; max-width: 100%;">
</div>
<?php } ?>
</a>
</div>
</div>
</div>
<style>
<?php if ($hover_effect != 'square effect2' && $hover_effect != 'maw_img_swap_fade') { ?>
.maw_image_swap_<?php echo $img_swap_rand_id; ?>.square .info,
.maw_image_swap_<?php echo $img_swap_rand_id; ?>.square .img {
-webkit-transition: all <?php echo $front_anim_speed; ?>ms ease-in-out !important;
-moz-transition: all <?php echo $front_anim_speed; ?>ms ease-in-out !important;
transition: all <?php echo $front_anim_speed; ?>ms ease-in-out !important;
}
<?php } ?>
<?php if ($hover_effect == 'maw_img_swap_fade' && $front_anim_speed != '') { ?>
.maw_img_swap_fade .info {
transition: <?php echo $front_anim_speed; ?>ms ease !important;
}
<?php } ?>
<?php if ($img_width != '' || $img_height != '') { ?>
@media only screen and (max-width: 767px) {
.maw_image_swap_<?php echo $img_swap_rand_id; ?>.ih-item {
max-width: <?php echo $img_width; ?>px !important;
height: auto !important;
height: <?php echo $img_height; ?>px !important;
}
.maw_image_swap_<?php echo $img_swap_rand_id; ?>.ih-item img{
width: <?php echo $img_width; ?>px !important;
height: auto !important;
height: <?php echo $img_height; ?>px !important;
}
}
<?php } ?>
</style>
<?php
return ob_get_clean();
}
}
vc_map( array(
"name" => __( 'Image Swap', 'swap' ),
"base" => "image_swap",
"category" => __('Mega Addons'),
"description" => __('Image over image hover effects', 'swap'),
"icon" => plugin_dir_url( __FILE__ ).'../icons/img-swap.png',
'params' => array(
array(
"type" => "attach_image",
"heading" => __( 'Front Image', 'swap' ),
"param_name" => "image_id",
"description" => __( 'Select the image', 'swap' ),
"group" => 'Image',
),
array(
"type" => "textfield",
"heading" => __( 'Alternate Text', 'info-banner-vc' ),
"param_name" => "alt",
"description" => __( 'It will be used as alt attribute of img tag', 'info-banner-vc' ),
"group" => 'Image',
),
array(
"type" => "attach_image",
"heading" => __( 'Flip Image', 'swap' ),
"param_name" => "image_id2",
"description" => __( 'It will show on hover', 'swap' ),
"group" => 'Image',
),
array(
"type" => "textfield",
"heading" => __( 'Alternate Text', 'info-banner-vc' ),
"param_name" => "alt2",
"description" => __( 'It will be used as alt attribute of img tag', 'info-banner-vc' ),
"group" => 'Image',
),
array(
"type" => "vc_number",
"heading" => __( 'Image Width', 'ich-vc' ),
"param_name" => "width",
"description" => __( 'set in pixel e.g 250 or leave blank for default', 'ich-vc' ),
"max" => "",
"suffix" => 'px',
"group" => 'Image',
),
array(
"type" => "vc_number",
"heading" => __( 'Image Height', 'ich-vc' ),
"param_name" => "height",
"description" => __( 'set in pixel e.g 250 or leave blank for default', 'ich-vc' ),
"max" => "",
"suffix" => 'px',
"group" => 'Image',
),
array(
"type" => "vc_link",
"heading" => __( 'Link To', 'swap' ),
"param_name" => "caption_url",
"description" => __( 'Enter URL to link caption', 'swap' ),
"group" => 'Image',
),
array(
"type" => "vc_links",
"param_name" => "caption_url",
"class" => "ult_param_heading",
"description" => __( '<span style="Background: #ddd;padding: 10px; display: block; color: #0073aa;font-weight:600;"><a href="https://1.envato.market/02aNL" target="_blank" style="text-decoration: none;">Get the Pro version for more stunning elements and customization options.</a></span>', 'ihover' ),
"group" => 'Image',
),
/* Border */
array(
"type" => "vc_number",
"heading" => __( 'Border Width', 'swap' ),
"param_name" => "border_width",
"description" => __( 'Width of border, eg: 15. Leaving blank will disable border', 'swap' ),
"group" => 'Border',
),
array(
"type" => "dropdown",
"heading" => __( 'Border Style', 'swap' ),
"param_name" => "border_style",
"group" => 'Border',
"value" => array(
"Solid" => "solid",
"Dotted" => "dotted",
"Ridge" => "ridge",
"Dashed" => "dashed",
"Double" => "double",
"Groove" => "groove",
"Inset" => "inset",
)
),
array(
"type" => "colorpicker",
"heading" => __( 'Border Color', 'swap' ),
"param_name" => "border_color",
"description" => __( 'Select the color for border', 'swap' ),
"group" => 'Border',
),
/* Hover Effects */
array(
"type" => "dropdown",
"heading" => __( 'Alignment', 'swap' ),
"param_name" => "img_align",
"group" => 'Settings',
"value" => array(
'Left' => 'left',
'Center' => 'center',
'Right' => 'right',
)
),
array(
"type" => "vc_number",
"heading" => __( 'Animation Speed', 'ich-vc' ),
"param_name" => "front_anim_speed",
"description" => __( 'write value in ms, 1s = 1000ms', 'ich-vc' ),
"min" => "0",
"max" => "3000",
"suffix" => 'ms',
"value" => '300',
"group" => 'Settings',
),
array(
"type" => "dropdown",
"heading" => __( 'Hover Effect', 'swap' ),
"param_name" => "hover_effect",
"description" => __( 'Choose hover effect <a href="https://addons.topdigitaltrends.net/image-swap/" target="_blank">See Demo</a>', 'swap' ),
"group" => 'Settings',
"value" => array(
'Fade' => 'maw_img_swap_fade',
// 'Effect1 top to bottom' => 'square effect1 top_to_bottom',
// 'Effect1 bottm to top' => 'square effect1 bottom_to_top',
// 'Effect1 left and right' => 'square effect1 left_and_right',
'Effect2' => 'square effect2',
'Effect5 left to right' => 'square effect5 left_to_right',
'Effect5 right to left' => 'square effect5 right_to_left',
'Effect7 fade simple' => 'square effect7',
'Effect8 scaleup' => 'square effect8 scale_up',
'Effect8 scaledown' => 'square effect8 scale_down',
'Effect9 bottom to top' => 'square effect9 bottom_to_top',
'Effect9 left to right' => 'square effect9 left_to_right',
'Effect9 right to left' => 'square effect9 right_to_left',
'Effect9 top to bottom' => 'square effect9 top_to_bottom',
'Effect10 left to right' => 'square effect10 left_to_right',
'Effect10 right to left' => 'square effect10 right_to_left',
'Effect10 top to bottom' => 'square effect10 top_to_bottom',
'Effect10 bottom to top' => 'square effect10 bottom_to_top',
'Effect11 left to right' => 'square effect11 left_to_right',
'Effect11 right to left' => 'square effect11 right_to_left',
'Effect11 top to bottom' => 'square effect11 top_to_bottom',
'Effect11 bottom to top' => 'square effect11 bottom_to_top',
'Effect12 left to right' => 'square effect12 left_to_right',
'Effect12 right to left' => 'square effect12 right_to_left',
'Effect12 top to bottom' => 'square effect12 top_to_bottom',
'Effect12 bottom to top' => 'square effect12 bottom_to_top',
'Effect13 left to right' => 'square effect13 left_to_right',
'Effect13 right to left' => 'square effect13 right_to_left',
'Effect13 top to bottom' => 'square effect13 top_to_bottom',
'Effect13 bottom to top' => 'square effect13 bottom_to_top',
'Effect14 left to right' => 'square effect14 left_to_right',
'Effect14 right to left' => 'square effect14 right_to_left',
'Effect14 top to bottom' => 'square effect14 top_to_bottom',
'Effect14 bottom to top' => 'square effect14 bottom_to_top',
'Effect15 left to right' => 'square effect15 left_to_right',
'Effect15 right to left' => 'square effect15 right_to_left',
'Effect15 top to bottom' => 'square effect15 top_to_bottom',
'Effect15 bottom to top' => 'square effect15 bottom_to_top',
)
),
array(
"type" => "vc_links",
"param_name" => "caption_urls",
"class" => "ult_param_heading",
"description" => __( '<span style="Background: #ddd;padding: 10px; display: block; color: #302f2f;font-weight:600;">Image Size For Mobile</span>', 'megaaddons' ),
"group" => 'Settings',
),
array(
"type" => "vc_number",
"heading" => __( 'Image Width', 'ich-vc' ),
"param_name" => "img_width",
"max" => "",
"suffix" => 'px',
"group" => 'Settings',
),
array(
"type" => "vc_number",
"heading" => __( 'Image Height', 'ich-vc' ),
"param_name" => "img_height",
"max" => "",
"suffix" => 'px',
"group" => 'Settings',
),
),
) );
|