ourworld_web/www_jungle_paradise
20
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Add experiences slider

Browse Source
This commit is contained in:
samaradel 2023-05-07 13:03:28 +03:00
parent c7f189d0d1
commit 830db2cd72
3 changed files with 35 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
content/experiences/index.md
View File

@ -27,14 +27,8 @@ weight: 5
<!-- section 2 --> <!-- section 2 -->
{% row(margin="withContainer" padding="both") %} {% row(margin="withContainer" padding="both") %}
<div id="gallery-hash-experiences">
<a style="background-color: transparent"> <div id="inline-gallery-container" class="inline-gallery-container"></div>
![Image](./img/exp_book.jpg#mx-auto)
</a>
</div>
||| |||

14
css/index.css
View File

@ -437,6 +437,20 @@ header {
.header:hover .back { .header:hover .back {
transform: none; transform: none;
} }
.inline-gallery-container {
width: 100%;
height: 0;
padding-bottom: 65%;
}
.lg-next {
right: 0;
}
.lg-backdrop {
background-color: transparent !important;
}
.lg-next, .lg-prev {
color: #000
}
@media (max-width: 768px) { @media (max-width: 768px) {
h2 { h2 {
font-size: 4rem; font-size: 4rem;

45
static/js/custom.js
View File

@ -226,29 +226,24 @@ if (document.getElementById("gallery-hash-restaurant-2") !== null) {
} }
// Experiences // Experiences
if (document.getElementById("gallery-hash-experiences") !== null) { const lgContainer = document.getElementById("inline-gallery-container");
const experiences = lightGallery( const inlineGallery = lightGallery(lgContainer, {
document.getElementById("gallery-hash-experiences"), container: lgContainer,
{ download: false,
dynamic: true, dynamic: true,
hash: false, closable: false,
galleryId: 2, counter: false,
dynamicEl: [ slideDelay: 300,
{ src: "../images/experiences/exper1.jpg" }, dynamicEl: [
{ src: "../images/experiences/exper2.jpg" }, { src: "../images/experiences/exper1.jpg" },
{ src: "../images/experiences/exper3.jpg" }, { src: "../images/experiences/exper2.jpg" },
{ src: "../images/experiences/exper4.jpg" }, { src: "../images/experiences/exper3.jpg" },
{ src: "../images/experiences/exper5.jpg" }, { src: "../images/experiences/exper4.jpg" },
{ src: "../images/experiences/exper6.jpg" }, { src: "../images/experiences/exper5.jpg" },
{ src: "../images/experiences/exper7.jpg" }, { src: "../images/experiences/exper6.jpg" },
{ src: "../images/experiences/exper8.jpg" }, { src: "../images/experiences/exper7.jpg" },
], { src: "../images/experiences/exper8.jpg" },
} ],
); });
document inlineGallery.openGallery();
.getElementById("gallery-hash-experiences")
.addEventListener("click", function () {
experiences.openGallery(0);
});
}