Before after image cho US flatsome

Before after image cho US flatsome
0

Chào các đồng chí.
Mình là người nghiện kéo thả đã khá nặng nên làm một số cái kéo thả cho tiện
Khá nhiều bạn hỏi về before after image dùng để so sánh chức năng qua ảnh
Mình share cho bạn nào cần đoạn ux before after dành cho flatsome.
Các bạn copy vào rồi kéo thả như bình thường nhé.
Ux này được cái siêu nhẹ
Điều kiện kích thước 2 ảnh phải bằng nhau

Copy vao Function.php
function avado_before_after_ux_builder(){
add_ux_builder_shortcode(‘avado_before_after_ux’, array(
‘name’ => __(‘Ava before_after’),
‘category’ => __(‘Content’),
‘info’ => ‘Avado’,
‘wrap’ => false,
‘options’ => array(
‘before_src’ => array(
‘type’ => ‘image’,
‘heading’ => __(‘Image trước’),
‘default’ => ‘’
),

  'before_alt' => array(
    'type'    => 'textfield',
    'heading' => 'Alt ảnh trước',
    'default' => '',
  ),		
	
    'after_src' => array(
        'type' => 'image',
        'heading' => __('Image sau'),
        'default' => ''
    ),			
	
  'after_alt'  => array(
    'type'    => 'textfield',
    'heading' => 'Alt Ảnh sau',
    'default' => '',
  ),			
	
  'width' => array(
    'type'    => 'textfield',
    'heading' => 'width',
    'default' => '',
  ),			

  'height' => array(
    'type'    => 'textfield',
    'heading' => 'height',
    'default' => '',
  ),		

),
));
}
add_action(‘ux_builder_setup’, ‘avado_before_after_ux_builder’);

function ava_before_after_ux( $atts, $content = null ){
extract( shortcode_atts( array(
‘before_src’ => ‘’,
‘before_alt’ => ‘’,
‘after_src’ => ‘’,
‘after_alt’ => ‘’,
), $atts ) );

return '<div class="image-slider" ><div><img src="'.wp_get_attachment_image_url($before_src).'" alt="'.$before_alt.'"/></div><img  src="'.wp_get_attachment_image_url($after_src).'" alt="'.$after_alt.'" /></div>';

}
add_shortcode(‘avado_before_after_ux’, ‘ava_before_after_ux’);

CSS
Copy vao style.css
.image-slider {
position:relative;
display: inline-block;
line-height: 0;
}

.image-slider > div {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 400px;
max-width: 100%;
overflow: hidden;
resize: horizontal;
}

/* Cross-browser resizer styling */
.image-slider > div:before {
content: ‘’;
position: absolute;
right: 0; bottom: 0;
width: 39px; height: 39px;
padding: 5px;
background: linear-gradient(-45deg, white 50%, transparent 0);
background-clip: content-box;
cursor: ew-resize;
-webkit-filter: drop-shadow(0 0 2px black);
filter: drop-shadow(0 0 2px black);
}

.image-slider img {
user-select: none;
max-width: 800px;
}

CSS cho ux
.image-slider {
position:relative;
display: inline-block;
line-height: 0;
}

.image-slider > div {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 400px;
max-width: 100%;
overflow: hidden;
resize: horizontal;
}

/* Cross-browser resizer styling */
.image-slider > div:before {
content: ‘’;
position: absolute;
right: 0; bottom: 0;
width: 39px; height: 39px;
padding: 5px;
background: linear-gradient(-45deg, white 50%, transparent 0);
background-clip: content-box;
cursor: ew-resize;
-webkit-filter: drop-shadow(0 0 2px black);
filter: drop-shadow(0 0 2px black);
}

.image-slider img {
user-select: none;
max-width: 800px;
}

1 Like