Hướng dẫn tạo Ux Element đơn giản cho Ux builder để hiển thị so sánh hình ảnh Before & After cho theme flatsome mà không cần sử dụng plugin. Làm theo hướng dẫn dưới đây!
1. Thêm mới element
Thêm đoạn code sau vào file function của theme để đăng ký 1 element nhập hình ảnh đầu vào trong trình chỉnh sửa ux_builder
function nhatweb_ux_builder_element() {
add_ux_builder_shortcode('nhatweb_compare_images', array(
'name' => __('Image Before & After'),
'category' => __('Media'),
'priority' => 1,
'options' => array(
'before_image' => array(
'type' => 'image',
'heading' => 'Hình ảnh trước',
'default' => '',
'unit' => '',
),
'after_image' => array(
'type' => 'image',
'heading' => 'Hình ảnh sau',
'default' => '',
'unit' => '',
),
),
));
}
add_action('ux_builder_setup', 'nhatweb_ux_builder_element');
function nhatweb_compare_images_shortcode($atts) {
$atts = shortcode_atts(array(
'before_image' => '',
'after_image' => ''
), $atts);
$before_image = wp_get_attachment_image($atts['before_image'], 'full');
$after_image = wp_get_attachment_image($atts['after_image'], 'full');
$output = '<div class="nhatweb-compare-images">';
$output .= '<div class="nhatweb-compare-images-container">';
$output .= '<img class="nhatweb-compare-images-img nhatweb-compare-images-before" src="'.$before_image.'">';
$output .= '<img class="nhatweb-compare-images-img nhatweb-compare-images-after" src="'.$after_image.'">';
$output .= '</div>';
$output .= '</div>';
return $output;
}
add_shortcode('nhatweb_compare_images', 'nhatweb_compare_images_shortcode');
2. Thêm đoạn mã script
<script>
(function($) {
$(document).ready(function() {
$('.nhatweb-compare-images').each(function() {
var $container = $(this).find('.nhatweb-compare-images-container'),
$before = $(this).find('.nhatweb-compare-images-before'),
$after = $(this).find('.nhatweb-compare-images-after'),
$dragger = $('<div class="nhatweb-compare-images-dragger"><span class="thanh-keo"></span></div>'),
isDragging = false,
startX = 0,
endX = 0,
dragOffset = ($container.width() - $dragger.outerWidth()) / 2;
$container.append($dragger);
function updateDraggerPosition() {
var containerWidth = $container.width(),
draggerWidth = $dragger.outerWidth(),
maxOffset = containerWidth - draggerWidth,
offset = Math.min(Math.max(dragOffset, 0), maxOffset);
$dragger.css('left', offset + 'px');
$before.css('clip', 'rect(0, ' + offset + 'px, auto, 0)');
$after.css('clip', 'rect(0, auto, auto, ' + offset + 'px)');
}
$dragger.on('mousedown touchstart', function(e) {
e.preventDefault();
isDragging = true;
startX = e.pageX || e.originalEvent.touches[0].pageX;
});
$(document).on('mousemove touchmove', function(e) {
if (isDragging) {
var x = e.pageX || e.originalEvent.touches[0].pageX;
dragOffset = dragOffset + (x - startX);
startX = x;
updateDraggerPosition();
}
});
$(document).on('mouseup touchend', function() {
isDragging = false;
});
updateDraggerPosition();
});
});
})(jQuery);
</script>
3. Thêm style css
/* Before & After */
.nhatweb-compare-images {
position: relative;
/* width: 100%;
height: auto; */
overflow: hidden;
}
.nhatweb-compare-images-container {
position: relative;
display:block;
width: 100%;
max-width:100%;
height:auto;
min-height:385px;
overflow: hidden;
}
.nhatweb-compare-images-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: 100%;
height: auto;
}
.nhatweb-compare-images-before {
z-index: 10;
clip: rect(0, auto, auto, 0);
}
.nhatweb-compare-images-after {
z-index: 20;
clip: rect(0, 100%, auto, auto);
}
.nhatweb-compare-images:hover:before {
content: "Before";
position: absolute;
display: flex;
align-items: center;
z-index: 99;
font-size: 18px;
color: #fff;
font-weight: 600;
margin-left: 10px;
top: 47%;
background: #00000070;
padding: 5px 10px;
border-radius: 5px;
width: 82px;
justify-content: center;
}
.nhatweb-compare-images:hover:after {
content: "After";
position: absolute;
display: flex;
align-items: center;
z-index: 99;
font-size: 18px;
color: #fff;
font-weight: 600;
margin-right: 10px;
top: 47%;
background: #00000070;
padding: 5px 10px;
border-radius: 5px;
right: 0;
width: 82px;
justify-content: center;
}
.nhatweb-compare-images-dragger {
position: absolute;
top: 0;
transform: translateX(-50%);
left:50%;
height: 100%;
min-height: 390px;
cursor: ew-resize;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
}
.nhatweb-compare-images-dragger:before {
bottom: 50%;
margin-bottom: 20px;
-webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
-moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
content: "";
width: 2px;
height: 100%;
background: #fff;
z-index: 999;
position: absolute;
box-shadow: 0px 5px 12px rgba(51, 51, 51, 0.5);
}
.nhatweb-compare-images-dragger:after {
top: 50%;
margin-top: 20px;
-webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
-moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
content: "";
width: 2px;
height: 100%;
background: #fff;
z-index: 999;
position: absolute;
box-shadow: 0px 5px 12px rgba(51, 51, 51, 0.5);
}
.nhatweb-compare-images-dragger:active {
cursor: grabbing;
}
.thanh-keo {
display: flex;
justify-content: center;
align-items: center;
height: 44px;
width: 100%;
}
.thanh-keo:before {
background-image: url(http://nhatweb.vn/wp-content/uploads/2023/04/icon-left-right.svg);
background-size: 42px 42px;
width: 42px;
height: 42px;
content: "";
position: absolute;
}
