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 -->
{% row(margin="withContainer" padding="both") %}
<div id="gallery-hash-experiences">
<a style="background-color: transparent">
![Image](./img/exp_book.jpg#mx-auto)
</a>
</div>
<div id="inline-gallery-container" class="inline-gallery-container"></div>
|||

14
css/index.css
View File

@ -437,6 +437,20 @@ header {
.header:hover .back {
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) {
h2 {
font-size: 4rem;

45
static/js/custom.js
View File

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