<디렉터리 구조>
========================================================
[
"./img/이미지1.jpg",
"./img/이미지2.jpg",
"./img/이미지3.jpg",
"./img/이미지4.jpg",
"./img/이미지5.jpg",
"./img/이미지6.jpg"
]
이미지 주소를 가지고 있는 json 형식 image_list.txt 파일
========================================================
<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<input type="button" value="Select All" onclick="selectAll(this)">
<input type="button" value="Play Slideshow" onclick="slideShow(this)">
<hr>
<script src="./script1.js"></script>
</body>
</html>
index.html
========================================================
body{
overflow: hidden;
}
.image{
position:relative;
float: left;
height: 200px;
width:300px;
margin : 2px;
border: 1px solid white;
z-index:0;
}
.image-selected{
border: 1px solid black;
background-color:white;
}
.image-selected > img{
opacity: 0.5;
}
.image > img{
height:100%;
}
.image-magnified{
z-index:1;
}
.image-magnified > img{
height:400px;
width:600px;
margin-left:-150px;
margin-top:-100px;
opacity:0.95;
}
style1.css
========================================================
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.response);
for(var i=0; i<data.length; i++) {
var div = document.createElement("div");
var img = document.createElement("img");
img.src = data[i];
div.setAttribute("class", "image");
div.appendChild(img);
document.body.appendChild(div);
div.addEventListener("click", function() {
this.classList.toggle("image-selected");
});
div.addEventListener("mouseover", function(){
var div = this;
this.timer = setTimeout(function(){
div.classList.add("image-magnified");
}, 1000);
});
div.addEventListener("mouseout", function(){
clearTimeout(this.timer);
this.classList.remove("image-magnified");
});
}
}
};
xhttp.open("GET", "image_list.txt");
xhttp.send();
function selectAll(btn) {
var divs = document.getElementsByTagName("div");
for(var i=0; i<divs.length; i++) {
if(btn.value == "Select All") {
divs[i].classList.add("image-selected");
}else {
divs[i].classList.remove("image-selected");
}
}
if(btn.value == "Select All") {
btn.value = "Unselect All";
} else {
btn.value = "Select All";
}
}
function slideShow(btn) {
var divs = document.getElementsByTagName("div");
var index = 0;
divs[index].classList.add("image-magnified");
var timer = setInterval(function(){
divs[index].classList.remove("image-magnified");
index++;
if(index<divs.length) {
divs[index].classList.add("image-magnified");
} else {
clearInterval(timer);
}
}, 2000);
}
script1.js
