Надежная библиотека компонентов пользовательского интерфейса JavaScript
Fancybox (lightbox)
Идеальная альтернатива JavaScript lightbox, которая устанавливает стандарт для взаимодействия пользователя с мультимедийным дисплеем.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"/>
</head>
<body>
<div>
<a data-fancybox href="https://lipsum.app/id/1/1600x1200" data-caption="Hello world"> <img src="https://lipsum.app/id/1/200x150" width="200" height="150" alt="" /></a>
<a data-fancybox href="https://lipsum.app/id/2/1600x1200" data-caption="Second single image"><img src="https://lipsum.app/id/2/200x150" width="200" height="150" alt="" /></a>
<a data-fancybox href="https://lipsum.app/id/3/1600x1200" data-caption="Third single image"><img src="https://lipsum.app/id/3/200x150" width="200" height="150" alt="" /></a>
</div>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<script>
Fancybox.bind('[data-fancybox]', {
//
});
</script>
</body>
</html>Пример:
Карусель
Отзывчивые, удобные для прикосновения карусели с естественными ощущениями. Простые в использовании, настраиваемые и полнофункциональные. Легко комбинируются с Fancybox или Panzoom.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.autoplay.css"/>
<style>
#myCarousel {
--f-carousel-spacing: 10px;
--f-carousel-slide-width: 100%;
--f-progress-color: #ff3520;
}
#myCarousel .f-carousel__slide {
padding: 50px;
background: #eee;
}
</style>
</head>
<body>
<div>
<div class="f-carousel" id="myCarousel">
<div class="f-carousel__slide">1</div>
<div class="f-carousel__slide">2</div>
<div class="f-carousel__slide">3</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.autoplay.umd.js"></script>
<script>
new Carousel(document.getElementById("myCarousel"), {
Autoplay : {
timeout : 2000
}
}, {
Autoplay
});
</script>
</body>
</html>
Пример:
Panzoom
Легко добавляйте жесты панорамирования и масштабирования для любого HTML-контента. Представляйте свой контент динамичным и интерактивным способом с помощью различных элементов управления преобразованием.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/panzoom/panzoom.css"/>
<style>
#myPanzoom {
max-width: 600px;
height: 300px;
background: #eee;
}
.f-custom-controls {
position: absolute;
border-radius: 4px;
overflow: hidden;
z-index: 1;
}
.f-custom-controls.top-right {
right: 16px;
top: 16px;
}
.f-custom-controls.bottom-right {
right: 16px;
bottom: 16px;
}
.f-custom-controls button {
width: 32px;
height: 32px;
background: none;
border: none;
margin: 0;
padding: 0;
background: #222;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.f-custom-controls svg {
pointer-events: none;
width: 18px;
height: 18px;
stroke: #fff;
stroke-width: 2;
}
.f-custom-controls button[disabled] svg {
opacity: 0.7;
}
[data-panzoom-action=toggleFS] g:first-child {
display: flex
}
[data-panzoom-action=toggleFS] g:last-child {
display: none
}
.in-fullscreen [data-panzoom-action=toggleFS] g:first-child {
display: none
}
.in-fullscreen [data-panzoom-action=toggleFS] g:last-child {
display: flex
}
</style>
</head>
<body>
<div>
<div class="f-panzoom" id="myPanzoom">
<div class="f-custom-controls top-right">
<button data-panzoom-action="toggleFS" class="toggleFullscreen">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<g>
<path d="M14.5 9.5 21 3m0 0h-6m6 0v6M3 21l6.5-6.5M3 21v-6m0 6h6" />
</g>
<g>
<path d="m14 10 7-7m-7 7h6m-6 0V4M3 21l7-7m0 0v6m0-6H4" />
</g>
</svg>
</button>
</div>
<div class="f-custom-controls bottom-right">
<button data-panzoom-change='{"angle": 90}'>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M9 4.55a8 8 0 0 1 6 14.9M15 15v5h5M5.63 7.16v.01M4.06 11v.01M4.63 15.1v.01M7.16 18.37v.01M11 19.94v.01"
/>
</svg>
</button>
<button data-panzoom-action="zoomIn">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 5v14M5 12h14" />
</svg>
</button>
<button data-panzoom-action="zoomOut">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M5 12h14" />
</svg>
</button>
</div>
<img class="f-panzoom__content" src="https://lipsum.app/id/30/1350x900" />
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/panzoom/panzoom.umd.js"></script>
<script>
const container = document.getElementById("myPanzoom");
new Panzoom(container, {
//
});
</script>
</body>
</html>Пример:
