SOD Media - Digital Agency Marketing

  • Home
  • Web Development
  • Hướng dẫn tạo Ux_element đơn giản so sánh hình ảnh Before & After cho theme flatsome
  • 141 Views

Hướng dẫn tạo Ux_element đơn giản so sánh hình ảnh Before & After cho theme flatsome

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 = '';
    $output .= '';
    $output .= '<img src="'.$before_image.'">';
    $output .= '<img src="'.$after_image.'">';
    $output .= '';
    $output .= '';
    return $output;
}
add_shortcode('nhatweb_compare_images', 'nhatweb_compare_images_shortcode');

2. Thêm đoạn mã 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;
}

 

 

Leave a Reply

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Chúng tôi tạo ra những sản phẩm đột phá và hỗ trợ thúc đẩy sự phát triển của quý khách hàng.

Menu

Contact Us

No.21 LK03, An Hung, Ha Dong, Ha Noi.

© 2020 – 2024 | Alrights reserved by Sodmedia.vn
Email

Bạn cần một
dự án mới?

09 : 00 - 18 : 30

Saturday – Thursday