I'm currently working on creating a dynamic photo gallery, but I've encountered a couple of issues that need to be addressed...
The "onclick" function in my JavaScript only allows for a single click, whereas I need it to be able to handle multiple clicks.
My image transitions aren't functioning as expected - they move instantaneously instead of smoothly transitioning, and this disrupts the aesthetic appeal. I require smooth transitions to enhance the overall look of the gallery.
Fiddle : http://jsfiddle.net/0Lg891p0/
<!DOCTYPE html>
<html lang="cs-CZ">
<head>
<meta charset="UTF-8">
<meta name="generator" content="John_Doe">
<link rel="stylesheet" href="Web.css">
<title>John Doe</title>
</head>
<body>
<div id="web">
<div id="gallery">
<div id="photos">
<img id="photo1" src="photo1.jpg" alt="photo1" />
<img id="photo2" src="photo2.jpg" alt="photo2" />
<img id="photo3" src="photo3.jpg" alt="photo3" />
</div>
<div id="arrow_left" class="animation1"></div>
<div id="arrow_right" class="animation2"></div>
<script>
document.querySelector('.animation1').onclick=function() {
var d = document.getElementById("photo1");
d.className = d.className + " fly1";
var t = document.getElementById("photo2");
t.className = t.className + " fly1";
var t = document.getElementById("photo3");
t.className = t.className + " fly1";
}
</script>
<script>
document.querySelector('.animation2').onclick=function() {
var d = document.getElementById("photo1");
d.className = d.className + " fly2";
var t = document.getElementById("photo2");
t.className = t.className + " fly2";
var t = document.getElementById("photo3");
t.className = t.className + " fly2";
}
</script>
</div>
</div>
</body>
</html>
CSS
#web {
background-color: #FF0;
height: 700px;
width: 1500px;
}
#gallery {
}
#photos {
}
#photo1 {
position: absolute;
height: 300px;
width: 300px;
margin-top: 300px;
margin-left: 500px;
border: solid 10px;
z-index: 1;
display: block;
transition: ease-in-out 1s;
}
#photo1.fly1 {
position: absolute;
left: 300px;
top: 8px;
transition: ease-in-out 1s;
}
#photo1.fly2 {
position: absolute;
left: -300px;
top: 8px;
transition: ease-in-out 1s;
}
#photo2 {
position: absolute;
height: 300px;
width: 300px;
margin-top: 300px;
margin-left: 200px;
border: solid 10px;
z-index: 1;
display: block;
transition: ease-in-out 1s;
}
#photo2.fly1 {
position: absolute;
left: 300px;
top: 8px;
transition: ease-in-out 1s;
}
#photo2.fly2 {
position: absolute;
left: -300px;
top: 8px;
transition: ease-in-out 1s;
}
#photo3 {
position: absolute;
height: 300px;
width: 300px;
margin-top: 300px;
margin-left: 800px;
border: solid 10px;
z-index: 1;
display: block;
transition: ease-in-out 1s;
}
#photo3.fly1 {
position: absolute;
left: 300px;
top: 8px;
transition: ease-in-out 1s;
}
#photo3.fly2 {
position: absolute;
left: -300px;
top: 8px;
transition: ease-in-out 1s;
}
#arrow_left {
width: 50px;
height: 50px;
background-color: #F00;
margin-top: 450px;
margin-left: 470px;
position: absolute;
z-index: 10;
}
#arrow_right {
width: 50px;
height: 50px;
background-color: #F00;
margin-top: 450px;
margin-left: 800px;
position: absolute;
z-index: 10;
}