Képek nagyítása JS

Képek nagyítása JS
2021-06-07T23:48:12+02:00
2021-06-08T08:04:22+02:00
2022-08-12T03:05:30+02:00
kamef
Sziasztok! Hogy lehetne megoldani, hogy a képek nagyobbak legyenek kattintásra, úgy hogy ne kelljen minden képre külön külön megírni a kódot? Illetve egy nagyítási animációt, hogy lehet hozzá tenni javascriptben? Eddig jutottam: https://kutyaidatsetaltatod.tk/ 



<!DOCTYPE html>

<html lang="hu">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Kepek</title>

    <link rel="stylesheet" href="index.css">

</head>

<body>

    <div class="kepekCLASS" id="kepekID">

   <div class="kep" id="kepID"><img src="kepek/kep1.png"></div>

   <div class="kep"id="kepID" ><img src="kepek/kep2.jpg"></div>

   <div class="kep"id="kepID"><img src="kepek/kep3.jpg"></div>

   <div class="kep"id="kepID"><img src="kepek/kep4.jpg"></div>

   <div class="kep"id="kepID"><img src="kepek/kep5.jpg"></div>

   <div class="kep"id="kepID"><img src="kepek/kep6.jpg"></div>

   <div class="kep"id="kepID"><img src="kepek/kep7.jpg"></div>

   <div class="kep"id="kepID"><img src="kepek/kep8.jpg"></div>

   <div class="kep"id="kepID"><img src="kepek/kep9.jpg"></div>

   <div class="kep"id="kepID"><img src="kepek/kep10.jpg"></div>

   <div class="kep"id="kepID"><img src="kepek/kep11.jpg"></div>

   <div class="kep"id="kepID"><img src="kepek/kep12.jpg"></div>

   <div class="kep"id="kepID"><img src="kepek/kep13.jpg"></div>

   <div class="kep"id="kepID"><img src="kepek/kep14.jpg"></div>

   <div class="kep"id="kepID"><img src="kepek/kep15.jpg"></div>

   <div class="kep"id="kepID"><img src="kepek/kep16.jpg"></div>

   <div class="kep"id="kepID"><img src="kepek/kep17.jpg"></div>

   <div class="kep"id="kepID"><img src="kepek/kep18.jpg"></div>

   <div class="kep"id="kepID"><img src="kepek/kep19.jpg"></div>

   <div class="kep"id="kepID"><img src="kepek/kep20.jpg"></div>

 

</div>

<script src="index.js"></script>

</body>


</html>


CSS

*{

    box-sizing: border-box;

    margin: 0px;

    padding: 0px;

}

html{

    margin: 1%;

    background-color: rgba(0, 0, 0, 0.863);

    height: 100%;  

}

body{

height: 100%;

width: 100%;

}

.kepekCLASS{

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    align-content: flex-start;

}

.kep{

    margin: 0.5%;

    border: 1px rgb(83, 5, 5) solid;

    height: 30%;

    width: 20%;

}

img{

    height: 100%;

    width: 100%;

}

.asd{

    position: fixed;

    height: 75%;

    width: 75%;

    left: 12.5%;

    top: 12.5%;

}


JS

let KiBe=false;

document.all[9].firstElementChild.onclick=function(){

    KiBe=!KiBe

    KiBeFunction();

}

let KiBeFunction =function(){

if(KiBe){

    document.all[9].firstElementChild.classList.add("asd")

}

else{

    document.all[9].firstElementChild.classList.remove("asd")

}

}
Mutasd a teljes hozzászólást!
.asd{ position: fixed; height:75%; width:75%; left: 50%; top: 50%; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } <script> document.querySelectorAll(".kep img").forEach((k)=>{ k.addEventListener("click",function(){ this.classList.toggle("asd"); }); }); </script>
Mutasd a teljes hozzászólást!

  • Eddig jutottam

    Mindenek előtt addig juss el, hogy az ALAP, a NAGYON ALAP dolgokkal tisztába teszed magad. Ilyen például az, hogy mi az az ID attribútum és milyen szabályoknak kell megfelelnie.

    The value of the id attribute must be unique within the HTML document.
    Mutasd a teljes hozzászólást!
  • .asd{ position: fixed; height:75%; width:75%; left: 50%; top: 50%; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } <script> document.querySelectorAll(".kep img").forEach((k)=>{ k.addEventListener("click",function(){ this.classList.toggle("asd"); }); }); </script>
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd