Виведення варіантів «до» та «після» для зображень за допомогою плагіна TwentyTwenty, все про WordPress

Чи ви коли-небудь стикалися з необхідністю накладання двох зображень «до» і «після» один на одного для виведення на екран? Ви не можете робити це в WordPress "з коробки", проте для цього існує спеціальний плагін TwentyTwenty, створений Корі Мартіном. Плагін використовує переваги властивості clip CSS, за допомогою якого відбувається накладання двох ідентичних за розміром зображень один на одного. Властивість clip дозволяє виводити зображення у власному контейнері. Слайдер є адаптивним та використовує довільні події переміщення, що містяться в бібліотеці jQuery Event Move, щоб підтримувати перемикання слайдера 1:1 на мобільних пристроях.

Плагін дуже простий у використанні. Завантажте два зображення у розмірі медіа-бібліотеки. Під час вставляння зображень у пост переконайтеся, що параметри розміру зображень однакові. Додайте шорткод [TwentyTwenty] над вихідним зображенням та шорткод [/TwentyTwenty] після кінцевого зображення. Ось приклад шорткодів, доданих до запису:

зображень

Шорткод генерують слайдер, який можна перетягувати туди-сюди. Ви бачитимете, яке зображення є вихідним, а яке – зміненим, якщо наведете курсор миші на слайдер. Щоб побачити будь-яке зображення, клацніть та перетягніть кухоль ліворуч або праворуч.

варіантів

варіантів

Плагін написаний на Sass; на Zurb.com є список всіх використовуваних Sass змінних та їх стандартні значення. Змінні дозволяють керувати різними аспектами слайдера, починаючи від кольору кружка і закінчуючи його радіусом.

Ось кілька ідей, для чого може стати в нагоді TwentyTwenty:

  • Порівняння підробок із реальнимитоварами
  • Варіанти редизайну веб-сайту
  • Реконструкція будинку (до та після)