Add petpet function

This commit is contained in:
Quentin ANIERE 2022-04-29 14:41:47 +02:00
parent 5937df3d40
commit 126144cc81
10 changed files with 60 additions and 16 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

View File

@ -21,37 +21,44 @@
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="photo-container">
<img src="./images/denis/denis_chemise.png">
<img class="normal-denis" src="./images/denis/denis_chemise.png">
<img class="petpet-denis"src="./images/denis/denis-chemise-petpet.gif">
</div>
</div>
<div class="swiper-slide">
<div class="photo-container">
<img src="./images/denis/denis_chapeau.png">
<img class="normal-denis" src="./images/denis/denis_chapeau.png">
<img class="petpet-denis"src="./images/denis/denis-chapeau-petpet.gif">
</div>
</div>
<div class="swiper-slide">
<div class="photo-container">
<img src="./images/denis/saint_denis.png">
<img class="normal-denis" src="./images/denis/saint_denis.png">
<img class="petpet-denis"src="./images/denis/saint-denis-petpet.gif">
</div>
</div>
<div class="swiper-slide">
<div class="photo-container">
<img src="./images/denis/denis.png">
<img class="normal-denis" src="./images/denis/denis.png">
<img class="petpet-denis"src="./images/denis/denis-petpet.gif">
</div>
</div>
<div class="swiper-slide">
<div class="photo-container">
<img src="./images/denis/denis_noel.png">
<img class="normal-denis" src="./images/denis/denis_noel.png">
<img class="petpet-denis" src="./images/denis/denis-noel-petpet.gif">
</div>
</div>
<div class="swiper-slide">
<div class="photo-container">
<img src="./images/denis/denis_bobo.png">
<img class="normal-denis" src="./images/denis/denis_bobo.png">
<img class="petpet-denis" src="./images/denis/denis-bobo-petpet.gif">
</div>
</div>
<div class="swiper-slide">
<div class="photo-container">
<img src="./images/denis/thinking_denis.png">
<img class="normal-denis" src="./images/denis/thinking_denis.png">
<img class="petpet-denis" src="./images/denis/thinking-denis-petpet.gif">
</div>
</div>
</div>

View File

@ -118,12 +118,44 @@ const addMaximumScaleToMetaViewport = () => {
}
};
const disableIosTextFieldZoom = addMaximumScaleToMetaViewport;
// https://stackoverflow.com/questions/9038625/detect-if-device-is-ios/9039885#9039885
const checkIsIOS = () =>
/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (checkIsIOS()) {
disableIosTextFieldZoom();
}
const disableIosTextFieldZoom = addMaximumScaleToMetaViewport;
// https://stackoverflow.com/questions/9038625/detect-if-device-is-ios/9039885#9039885
const checkIsIOS = () =>
/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (checkIsIOS()) {
disableIosTextFieldZoom();
}
normalsPics = document.querySelectorAll(".normal-denis");
petpetPics = document.querySelectorAll(".petpet-denis");
normalsPics.forEach(pic => {
pic.addEventListener("click", () => {
normalsPics.forEach(pic => {
pic.style.display = "none";
});
petpetPics.forEach(pic => {
pic.style.display = "block";
});
});
});
petpetPics.forEach(pic => {
pic.addEventListener("click", () => {
petpetPics.forEach(pic => {
pic.style.display = "none";
});
normalsPics.forEach(pic => {
pic.style.display = "block";
});
});
});

View File

@ -170,6 +170,10 @@ body {
margin-right: -0.625em;
}
.petpet-denis {
display: none;
}
@media screen and (max-width: 1024px) {
body {
@ -224,3 +228,4 @@ body {
margin-left: 15vw;
}
}