Как сделать лайтбокс для изображений внутри Rich Text в Webflow

Библиотека Lightbox3

Код из видео

<!-- Lightbox -->
<script src="https://cdn.jsdelivr.net/npm/lightbox3@1.1.0/dist/lightbox3.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightbox3@1.1.0/dist/lightbox3.min.css">

<script>
(() => {
  const ALT_PREFIX = 'lb:'

  const isLbImg = (img) => {
    if (!img || img.tagName !== 'IMG') return false
    return (img.getAttribute('alt') || '').startsWith(ALT_PREFIX)
  }

  const findLbImg = (node) => {
    const img = node?.closest?.('img')
    return isLbImg(img) ? img : null
  }

  const getLightboxCtor = () => {
    const w = window
    if (!w) return null
    if (w.Lightbox && typeof w.Lightbox.init === 'function') return w.Lightbox
    if (w.Lightbox3 && w.Lightbox3.Lightbox && typeof w.Lightbox3.Lightbox.init === 'function') {
      return w.Lightbox3.Lightbox
    }
    return null
  }

  const getLightbox = () => {
    const ctor = getLightboxCtor()
    if (!ctor) return null
    if (!window.__lb3Singleton) window.__lb3Singleton = ctor.init()
    return window.__lb3Singleton
  }

  const getImgSrc = (img) => {
    if (!img) return ''
    return img.currentSrc || img.src || img.getAttribute('src') || ''
  }

  document.addEventListener(
    'click',
    (e) => {
      const img = findLbImg(e.target)
      if (!img) return

      const lb = getLightbox()
      const src = getImgSrc(img)
      if (!lb || !src) return

      e.preventDefault()
      e.stopPropagation()
      lb.open(src, img)
    },
    true
  )

  const hintCursor = () => {
    document.querySelectorAll(`img[alt^="${ALT_PREFIX}"]`).forEach((img) => {
      img.style.cursor = 'zoom-in'
    })
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', hintCursor, { once: true })
  } else {
    hintCursor()
  }
})()

</script>

Привет!
Рассказываю о проекте на Webflow, который создал с помощью AI-агентов и MCP-сервера Webflow.

Видео на YouTube

Сайт из видео — https://blumberger-dev.webflow.io/
Описание кейса — https://item.team/blumberger
Скачать скилл — https://github.com/IvanMayorov/figma-to-webflow

Как меняется работа веб-дизайнера с приходом AI? Поговорили с Сашей Рассоловым о том, как мы делаем сайты, какие задачи отдаём нейросетям и за что теперь платят заказчики.

Обсудили Figma, Webflow, Instatic, Astro, Claude и Codex. Разобрали процесс от идеи до готового сайта, работу с анимацией, стоимость проектов и навыки, которые помогают оставаться востребованным.

Хотите научиться делать сайты с AI? Подробнее о курсе — https://mayorov.team/education/

А как нейросети изменили вашу работу? Расскажите в комментариях.

YouTube
VK видео

Показываю, как использую нейросети в работе над реальными проектами: от дизайна и адаптивной вёрстки до анимаций, интернет-магазинов и прототипов для клиентов.

В видео — примеры сайтов, созданных с помощью Codex и Claude, перенос готовой страницы в Figma для правок, редизайн шаблонного AI-сайта и магазин на Medusa с доставкой СДЭК и оплатой через Т-Банк.

Главный принцип: человек думает, а нейросеть делает. Разбираю, где нужен дизайнерский взгляд и почему одного промпта недостаточно для решения задач бизнеса.

🎓 Про обучение

Мастермайнд по AI-дизайну: 3 месяца, два созвона в неделю по два часа, группа до 8 человек, 6 работ в портфолио. Записанных уроков нет — в AI-инструментах слишком многое меняется, поэтому всё разбираем вживую и на актуальных версиях.

Вопросы в личку: @ivanmayorov

Смотреть в 4k на Youtube