Skip to content

Commit

Permalink
Lightbox - component (#1821)
Browse files Browse the repository at this point in the history 
* Lightbox - component

* Corrections

* Changes in lightbox

* Corrections #2

---------

Co-authored-by: Bartosz Cylwik <bartosz.cylwik94@gmail.com>
  • Loading branch information
@iprzybysz @juujisai
iprzybysz and juujisai committed Jul 25, 2023
1 parent f818e0b commit 10550cb
Show file tree
Hide file tree
Showing 14 changed files with 4,044 additions and 2 deletions.
313 changes: 313 additions & 0 deletions demo/sites/components/lightbox.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,313 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="Tailwind Elements" />
<title>Album example · Bootstrap v5.1</title>

<!-- Roboto font -->
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"
rel="stylesheet" />
<!-- Tailwind -->
<link rel="stylesheet" href="../../../src/scss/tailwind.scss" />
<!-- PRISM -->
<link rel="stylesheet" href="../../dev/css/new-prism.css" />
<!-- Theme -->
<meta name="theme-color" content="#f8fafc" />
<script>
try {
if (
localStorage.theme === "dark" ||
(!("theme" in localStorage) &&
window.matchMedia("(prefers-color-scheme: dark)").matches)
) {
document.documentElement.classList.add("dark");
document
.querySelector('meta[name="theme-color"]')
.setAttribute("content", "#0B1120");
} else {
document.documentElement.classList.remove("dark");
}
} catch (_) {}
</script>
<!-- Custom styles -->
<style></style>
</head>

<body class="dark:bg-neutral-800">
<!-- Start your project here-->
<div class="mx-96">
<br />
<br />
<br />
<h2 class="mb-6 text-2xl font-bold text-gray-900 dark:text-gray-200">
Basic example
</h2>

<div
id="basic-lightbox"
data-te-lightbox-init
class="flex flex-col space-y-5 lg:flex-row lg:space-x-5 lg:space-y-0">
<div class="h-full w-full">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
data-te-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table Full of Spices"
class="w-full cursor-zoom-in data-[te-lightbox-disabled]:cursor-auto" />
</div>
<div class="h-full w-full">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
data-te-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
alt="Winter Landscape"
class="w-full cursor-zoom-in data-[te-lightbox-disabled]:cursor-auto" />
</div>
<div class="h-full w-full">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
data-te-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
alt="View of the City in the Mountains"
class="w-full cursor-zoom-in data-[te-lightbox-disabled]:cursor-auto" />
</div>
</div>
<br />
<br />
<br />
<h2 class="mb-6 text-2xl font-bold text-gray-900 dark:text-gray-200">
Shadows and rounded corners
</h2>

<div
data-te-lightbox-init
class="flex flex-col space-y-5 lg:flex-row lg:space-x-5 lg:space-y-0">
<div class="h-full w-full">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
data-te-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table Full of Spices"
class="w-full cursor-zoom-in rounded shadow-sm data-[te-lightbox-disabled]:cursor-auto" />
</div>
<div class="h-full w-full">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
data-te-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
alt="Winter Landscape"
class="w-full cursor-zoom-in rounded shadow-sm data-[te-lightbox-disabled]:cursor-auto" />
</div>
<div class="h-full w-full">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
data-te-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
alt="View of the City in the Mountains"
class="w-full cursor-zoom-in rounded shadow-sm data-[te-lightbox-disabled]:cursor-auto" />
</div>
</div>
<br />
<br />
<br />
<h2 class="mb-6 text-2xl font-bold text-gray-900 dark:text-gray-200">
Different sizes
</h2>

<div data-te-lightbox-init class="flex flex-row space-x-5">
<div class="flex h-full w-full flex-1 flex-col">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
data-te-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table Full of Spices"
class="mb-5 w-full cursor-zoom-in data-[te-lightbox-disabled]:cursor-auto" />
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Square/1.webp"
data-te-img="https://mdbcdn.b-cdn.net/img/Photos/Square/1.webp"
alt="Coconut with Strawberries"
class="w-full cursor-zoom-in data-[te-lightbox-disabled]:cursor-auto" />
</div>
<div class="flex h-full w-full flex-1 flex-col">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Vertical/1.webp"
data-te-img="https://mdbcdn.b-cdn.net/img/Photos/Vertical/1.webp"
alt="Dark Roast Iced Coffee"
class="w-full cursor-zoom-in data-[te-lightbox-disabled]:cursor-auto" />
</div>
</div>
<br />
<br />
<br />
<h2 class="mb-6 text-2xl font-bold text-gray-900 dark:text-gray-200">
Zoom level
</h2>
<div
data-te-lightbox-init
data-te-zoom-level="0.25"
class="flex flex-col space-y-5 lg:flex-row lg:space-x-5 lg:space-y-0">
<div class="h-full w-full">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
data-te-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table Full of Spices"
class="w-full cursor-zoom-in data-[te-lightbox-disabled]:cursor-auto" />
</div>
<div class="h-full w-full">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
data-te-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
alt="Winter Landscape"
class="w-full cursor-zoom-in data-[te-lightbox-disabled]:cursor-auto" />
</div>
<div class="h-full w-full">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
data-te-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
alt="View of the City in the Mountains"
class="w-full cursor-zoom-in data-[te-lightbox-disabled]:cursor-auto" />
</div>
</div>
<br />
<br />
<br />
<h2 class="mb-6 text-2xl font-bold text-gray-900 dark:text-gray-200">
Disabled image
</h2>
<div
data-te-lightbox-init
class="flex flex-col space-y-5 lg:flex-row lg:space-x-5 lg:space-y-0">
<div class="h-full w-full">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
data-te-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table Full of Spices"
class="w-full cursor-zoom-in data-[te-lightbox-disabled]:cursor-auto" />
</div>
<div class="h-full w-full">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
data-te-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
alt="Winter Landscape"
class="w-full cursor-zoom-in data-[te-lightbox-disabled]:cursor-auto" />
</div>
<div class="h-full w-full">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
data-te-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
data-te-lightbox-disabled
alt="Disabled image"
class="w-full cursor-zoom-in data-[te-lightbox-disabled]:cursor-auto" />
</div>
<div class="h-full w-full">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp"
data-te-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp"
alt="Place Royale Bruxelles"
class="w-full cursor-zoom-in data-[te-lightbox-disabled]:cursor-auto" />
</div>
</div>
<br />
<br />
<br />
<h2 class="mb-6 text-2xl font-bold text-gray-900 dark:text-gray-200">
Captions
</h2>
<div
data-te-lightbox-init
class="flex flex-col space-y-5 lg:flex-row lg:space-x-5 lg:space-y-0">
<div class="h-full w-full">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
data-te-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
data-te-caption="Image caption 1"
alt="Table Full of Spices"
class="w-full cursor-zoom-in data-[te-lightbox-disabled]:cursor-auto" />
</div>
<div class="h-full w-full">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
data-te-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
data-te-caption="Image caption 2"
alt="Winter Landscape"
class="w-full cursor-zoom-in data-[te-lightbox-disabled]:cursor-auto" />
</div>
<div class="h-full w-full">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
data-te-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
data-te-caption="Image caption 3"
alt="View of the City in the Mountains"
class="w-full cursor-zoom-in data-[te-lightbox-disabled]:cursor-auto" />
</div>
</div>
<br />
<br />
<br />
<h2 class="mb-6 text-2xl font-bold text-gray-900 dark:text-gray-200">
Outside access
</h2>
<div
data-te-lightbox-init
id="lightbox"
class="flex flex-col space-y-5 lg:flex-row lg:space-x-5 lg:space-y-0">
<div class="h-full w-full">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
data-te-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
data-te-caption="Image caption 1"
alt="Table Full of Spices"
class="w-full cursor-zoom-in data-[te-lightbox-disabled]:cursor-auto" />
</div>
<div class="h-full w-full">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
data-te-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
data-te-caption="Image caption 2"
alt="Winter Landscape"
class="w-full cursor-zoom-in data-[te-lightbox-disabled]:cursor-auto" />
</div>
<div class="h-full w-full">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
data-te-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
data-te-caption="Image caption 3"
alt="View of the City in the Mountains"
class="w-full cursor-zoom-in data-[te-lightbox-disabled]:cursor-auto" />
</div>
</div>
<div class="mt-3 text-center">
<button
type="button"
id="lightboxToggler"
data-te-ripple-init
data-te-ripple-color="light"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]">
Open second image
</button>
</div>
<br />
<br />
<br />
</div>
<!-- End your project here-->

<!-- Theme switcher -->
<script type="module" src="../../../src/js/theme.js"></script>
<!-- MDB -->
<script type="module" src="../../../src/js/index.umd.js"></script>
<!-- PRISM -->
<script type="module" src="../../dev/js/new-prism.js"></script>
<!-- MDB SNIPPET -->
<script type="module" src="../../dev/js/dist/mdbsnippet.min.js"></script>
<!-- Custom scripts -->
<script type="module">
import * as te from "../../../src/js/index.umd.js";

const lightbox = document.getElementById("lightbox");
const lightboxInstance = te.Lightbox.getInstance(lightbox);
const lightboxToggler = document.getElementById("lightboxToggler");

lightboxToggler.addEventListener("click", () => {
lightboxInstance.open(1);
});
</script>
</body>
</html>
5 changes: 5 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -424,6 +424,11 @@ <h3 class="mb-5">Your sites:</h3>
class="mb-1 mr-1 rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)]"
>Datatables</a
>
<a
href="./demo/sites/components/lightbox.html"
class="mb-1 mr-1 rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)]"
>Lightbox</a
>
</div>

<div class="my-5 flex flex-wrap justify-center">
Expand Down
21 changes: 21 additions & 0 deletions site/content/docs/standard/components/lightbox/a-ss.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
---
---

<li class="mb-1 pl-[9px] text-[0.85rem]" data-te-spy-active>
<a href="#api-section-import">Import</a>
</li>
<li class="mb-1 pl-[9px] text-[0.85rem]">
<a href="#api-section-usage">Usage</a>
</li>
<li class="mb-1 pl-[9px] text-[0.85rem]">
<a href="#api-section-options">Options</a>
</li>
<li class="mb-1 pl-[9px] text-[0.85rem]">
<a href="#api-section-classes">Classes</a>
</li>
<li class="mb-1 pl-[9px] text-[0.85rem]">
<a href="#api-section-methods">Methods</a>
</li>
<li class="mb-1 pl-[9px] text-[0.85rem]">
<a href="#api-section-events">Events</a>
</li>
Loading

0 comments on commit 10550cb

Please sign in to comment.