Я опубликовал стих Ранее это включало предыдущее изображение с покрытием ползунка. В то время как многие плагины, которые выполняют эту функцию, я предпочитаю использовать третьи партийные плагины, принимая во внимание дополнительные накладные расходы, включая ограниченные функции обновления и рекламу. Мне Так же, как тo Держи меня WordPress корпус как можно меньше, поэтому я создал пробку, которая использует WordPress и jQuery Чтобы показать заранее и после изображений.

До и после ползунка изображения

Вот демонстрация слайдера:

Вот тот, кто его создал:

[before_after before=" after=" width="600"]

Как установить до и после плагина слайдера

Сделайте эти шаги, чтобы установить и активировать плагин на вашем сайте WordPress:

1. Создать новую папку для wp-content/plugins/ Каталог и назовите его before-after-sliderВ области
2. Создать новый файл в этой папке и назовите это before-after-slider.phpВ области
3. Скопировать и вставить этот код к before-after-slider.php в файле.
4. Сохраните файл и активируйте пробку От панели администратора WordPress.

Когда страница загружается:

• Если установлен короткий код, сценарий jQuery и CSS введены в заголовке страницы.
• Скрипт инициализирует поведение слайдера, изначально установив ручку в середине (50%).
• Пользователи взаимодействуют с ручкой, чтобы динамически обнаружить более или менее до или после изображения.

post_content, 'before_after' ) ) { wp_enqueue_script( 'jquery' ); // jQuery is already included in WordPress wp_add_inline_script( 'jquery', ' jQuery(document).ready(function($) { $(".ba-slider").each(function() { var $slider = $(this), $before = $slider.find(".ba-before"), $after = $slider.find(".ba-after"), $handle = $slider.find(".ba-handle"); // Initialize slider position var initialPercent = 50; $before.css("clip-path", "inset(0 " + (100 - initialPercent) + "% 0 0)"); $after.css("clip-path", "inset(0 0 0 " + initialPercent + "%)"); $handle.css("left", initialPercent + "%"); // Handle drag and click $slider.on("mousedown touchstart", function(e) { e.preventDefault(); var moveHandler = function(moveEvent) { moveEvent.preventDefault(); var clientX = moveEvent.type.includes("touch") ? moveEvent.originalEvent.touches[0].clientX : moveEvent.clientX, offsetX = clientX - $slider.offset().left, percent = Math.max(0, Math.min(100, (offsetX / $slider.width()) * 100)); // Update clip-path for both images $before.css("clip-path", "inset(0 " + (100 - percent) + "% 0 0)"); $after.css("clip-path", "inset(0 0 0 " + percent + "%)"); $handle.css("left", percent + "%"); }; $(document).on("mousemove touchmove", moveHandler); $(document).on("mouseup touchend", function() { $(document).off("mousemove touchmove", moveHandler); }); }); }); }); ' ); // Inline CSS to minimize requests wp_add_inline_style( 'wp-block-library', ' .ba-slider { position: relative; width: 100%; max-width: 100%; overflow: hidden; } .ba-slider img { position: absolute; top: 0; left: 0; width: 100%; height: auto; object-fit: cover; object-position: center; } .ba-before, .ba-after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .ba-before img, .ba-after img { width: 100%; height: 100%; } .ba-handle { position: absolute; top: 0; width: 4px; height: 100%; background: #fff; cursor: ew-resize; box-shadow: 0 0 5px rgba(0,0,0,0.3); z-index: 10; } .ba-handle::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 0 5px rgba(0,0,0,0.3); } ' ); } } add_action( 'wp_enqueue_scripts', 'ba_slider_scripts' ); // Shortcode function function ba_slider_shortcode( $atts ) { $atts = shortcode_atts( array( 'before' => '', 'after' => '', 'width' => '600', 'height' => '', ), $atts, 'before_after' ); // Sanitize inputs $before = esc_url( $atts['before'] ); $after = esc_url( $atts['after'] ); $width = esc_attr( $atts['width'] ); $height = $atts['height'] ? 'height: ' . esc_attr( $atts['height'] ) . 'px;' : 'aspect-ratio: 16 / 9;'; if ( ! $before || ! $after ) { return '
Error: Both before and after images are required.
'; } // Generate HTML, wrapped in wp-block-image and figure for centering $output="
"; $output .= '
'; $output .= '
'; $output .= '
'; $output .= '
'; $ izvade. = ''; $ izvade. = '
'; $ izvade. = '
'; $ izvade. = '
'; atgriezt $ izvadi; } add_shortcode ('pirms_after', 'ba_slider_shortcode');

Первая часть плагин -IN предоставляет Безопасность и правильная среда Немедленно уйти, если код обращается за пределами WordPress (if (!defined('ABSPATH')) exit;)

JavaScript и CSS Загрузка: Заглушки относительно Enqueues JavaScript и CSS только Если текущая страница или запись

Короткий код. Эта оптимизация позволяет избежать ненужной загрузки сценариев по всей шкале.

• Это связывает WordPress wp_enqueue_scripts Действие, чтобы добавить оба:
  • JavaScriptЭто использует jQuery для инициализации до/после ползунка. Этот:
    • Размещены до и после изображений рядом с CSS clip-path Раскрыть или скрыть части каждого изображения.
    • Добавьте слушателей событий к событиям мыши и прикоснитесь к событиям, позволяя посетителю потянуть ручку горизонтально, чтобы отрегулировать видимые части до и после изображений в режиме реального времени.
    • Обновляет положение ручки и динамически настраивает видимость каждого изображения на основе движения индикатора.
  • Внутренний CSSВОЗ:
    • Исследуйте контейнер ползунка и изображения, чтобы правильно сложить с абсолютным позиционированием.
    • Проектируйте ручки буксировки, включая вертикальную белую линию и круговой индикатор для улучшения пользовательского опыта (UX)

Функциональность короткой воды: Основная сокращенная функция ba_slider_shortcode():

• Принимает и продезится четыре дополнительных атрибута:
  • before ((URL из «до» изображения),
  • after (Изображение «после« URL),
  • width (ширина пикселей слайдера),
  • height (Высота пикселя или соотношение до 16: 9, если нет).
• Проверяет, оба оба before и after изображения доставляются; В противном случае он показывает сообщение об ошибке.
• Строительство слайдера HTML -конструкции:
  • Обернутый слайдер WordPress wp-block-image Div и a figure Элемент для выравнивания.
  • Включает в себя оба изображения и вытянутые ручки внутри div с классом ba-sliderВ области
  • Примените указанный пользователь, указанный в стиле ширины и высоты/края.