교재 유익하게 사용하고 있습니다.
질문은 교재 9-15 (여기 사이트에서도 보이는)
이미지 갤러리 코드 관련 질문입니다.
해당 코드에서 만약에 이미지 파일들이
r1.png
r2.png
r3.png ....
이런 식으로 이름 비슷한 파일이 수 백개씩 있을 땐 얘네를 어떻게 불러올 지 궁금합니다.
일일이 수백줄짜리 이미지 파일 배열 코드를 작성할 순 없을 것 같고,
뭐를 공부하거나 검색해야 할지도 모르겠네용..
글고 아예 폴더를 통째로 받아와도 좋을 거 같은데 그것도 방법을 모르겠습니다...
읽어주셔서 감사합니다~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>new Image()로 이미지 로딩</title>
<script>
// 미리 로딩해둘 이미지 이름 배열
var files = ["media/r1.png",
"media/r2.png",
"media/r3.png",
];
var imgs = new Array();
for(var i=0; i<files.length; i++) {
imgs[i] = new Image(); // 이미지 객체 생성
imgs[i].src = files[i]; // 이미지 미리 로딩
}
// 다음 이미지 출력
var next = 1;
function change(img) {
img.src = imgs[next].src; // 이미지 변경
next++; // 다음 이미지 인덱스
next %= imgs.length; // 개수를 넘으면 처음으로
}
</script>
</head>
<body>
<h3>new Image()로 이미지 로딩</h3>
<hr>
이미지를 클릭하면 다음 이미지를 보여줍니다.<p>
<img style="border:20px ridge wheat"
src="media/r1.png" alt="."
width="200" height="200"
onclick="change(this)">
</body>
</html>
앞의 코드 사례처럼 웹 브라우저로 즉 웹 브라우저가 설치된 컴퓨터로 다운하는 것은 무리입니다.
질문자가 알고 있는 것처럼,
HTML 문서 내 자바스크립트 코드에 파일 이름을 모두 입력해 놓을 수도 없고요,.
1. 그래서 이것은 서버 프로그램 예를 들어 jsp나 node.js 코드를 통해 이루어져야 합니다.
2. 그리고 이미지를 활용하는 응용에 따라 서버 프로그램이나 자바스크립트 코드를 다르게 구현될 수 밖에 없습니다.
그때 그때 적합한 방법으로 구현해야죠.
예를 들어 사용자가 갤러리 이미지를 계속 보고 있는 경우는 서버측 프로그램에서 한 번에 10개씩 이미지를 담은 HTML 컨텐츠를 동적으로 만들어
브라우저로 보낼 수 있고,
아니면, 웹 페이지에 작성된 자바스크립트 코드가 Ajax 방법을 사용하여 서버로부터 비동기적으로 필요할 때 이미지를 가져 오는 방법입니다.
이때 여러개 가져다 놓을 수 있죠.
좀 어렵죠.
개발을 하다보면 방법이 생길겁니다.