Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Lightbox - component #1821

Merged
merged 4 commits into from
Jul 25, 2023
Merged

Lightbox - component #1821

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b4d0bbb
Lightbox - component
iprzybysz Jul 24, 2023
8730346
Corrections
iprzybysz Jul 25, 2023
ef9904a
Changes in lightbox
juujisai Jul 25, 2023
b1bceca
Corrections #2
iprzybysz Jul 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
313 changes: 313 additions & 0 deletions demo/sites/components/lightbox.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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