Add petpet function
BIN
src/images/denis/denis-bobo-petpet.gif
Normal file
After Width: | Height: | Size: 31 KiB |
BIN
src/images/denis/denis-chapeau-petpet.gif
Normal file
After Width: | Height: | Size: 28 KiB |
BIN
src/images/denis/denis-chemise-petpet.gif
Normal file
After Width: | Height: | Size: 30 KiB |
BIN
src/images/denis/denis-noel-petpet.gif
Normal file
After Width: | Height: | Size: 29 KiB |
BIN
src/images/denis/denis-petpet.gif
Normal file
After Width: | Height: | Size: 31 KiB |
BIN
src/images/denis/saint-denis-petpet.gif
Normal file
After Width: | Height: | Size: 32 KiB |
BIN
src/images/denis/thinking-denis-petpet.gif
Normal file
After Width: | Height: | Size: 33 KiB |
@ -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>
|
||||
|
@ -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";
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|