How To Make A Lightbox Animation Effect Only Using Javascript (no library)

StackOverflow https://stackoverflow.com/questions/22727617

  •  23-06-2023
  •  | 
  •  

سؤال

I am just new to Javascript. I want to implement lightbox effect without using jQuery. I can successfully add a fixed div with 100% height and width of body element by using Javascript but there is no animation effect.

HTML:

<html>
<head>
  <title>Lightbox Example</title>
  <link rel="stylesheet" href="lightboxstyle.css" type="text/css">
</head>
<body>
  <ul>
    <li><img class="preview" src="images/blue.jpg" title="blue"></li>
    <li><img class="preview" src="images/red.jpg" title="red"></li>
    <li><img class="preview" src="images/yellow.jpg" title="yellow"></li>
    <li><img class="preview" src="images/green.jpg" title="green"></li>
  </ul>
  <script src="lightbox.js"></script>
</body>
</html>

Stlesheet

.preview {list-style: none;display:inline;width:200px;}
ul li {display:inline;margin-left:1%}
body {background-color:#eee;}
#lightbox {
position:fixed;
left:0;
top:0;
z-index: 999;
background-image:url(images/1.png);
}

Javascript 

function lightboxboot(){
var lightbox=document.createElement("div")
lightbox.id="lightbox"
var ul=document.getElementsByTagName("ul")
ul[0].insertBefore(lightbox)
for (var x=1;x<100;x++){
setTimeout(function(){
lightbox.style.width=x+"%";
lightbox.style.height=x+"%";
},50)
}
}
var image=document.getElementsByClassName("preview")
for (var i=0;i<image.length;i++){
image[i].onclick=lightboxboot;
}

The lightbox div can still cover the entire body element after the script runs over but these is no animation effect.

هل كانت مفيدة؟

المحلول 

for (var x=1;x<100;x++){
setTimeout(function(){
lightbox.style.width=x+"%";
lightbox.style.height=x+"%";
},50)
}

Is wrong. You set a bunch of timeouts for the same time and try to access x wrongly. Here:

for (var x=1;x<100;x++){
    setTimeout(function(x){
        lightbox.style.width=x+"%";
        lightbox.style.height=x+"%";
    },x*50,x)
}
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top