스크립트를 사용하여 html로 많은 양의 이미지를 추가하는 가장 쉬운 방법

Question

몇 가지 도움이 필요한 문제가 있습니다. 나는 다량의 심상 및 영상을 포함하는 개인 웹 페이지에 종사하고있다. 마크 업은 엄격히 HTML이며 CSS를 사용하여 스타일이 지정됩니다. 하나 또는 두 개의 Javascript가 실행 중입니다. 나는 첫날에 첫 페이지를 마쳤고, 각 페이지에 20-30 개의 이미지/비디오를 수동으로 추가해야한다는 것을 깨달았습니다. (나는 10-15 페이지 정도를 만들려고합니다.) 아마도 사용 가능한 스크립트가 있다고 생각했습니다. 모든 미디어 컨텐츠를 업로드하는 작업을 단순화 할 수 있습니다. 모든 페이지가 똑같아 보이므로 스크립트로 작업하기가 더 쉬워집니다.

다음은 내가 생각한 것입니다. 두 폴더를 만들고 각 이미지와 비디오를 각각 추가 할 수 있다고 생각했습니다.

그런 다음 Javascript를 사용하여 모든 콘텐츠를 반복하여 이미 만들어진 HTML 페이지에 추가합니다.

이것이 가능합니까? 그렇다면이 솔루션을 얻을 수있는 방법을 알려주십시오.

완전한 솔루션을 고맙게 생각할 정도로 자바 스크립트를 잘 모르고 있습니다.

다음은 HTML에게 불행하게도

<ul> 
<li><iframe width="420" height="345"src="" 
</iframe></li> 
</ul> 

<ul> 
<li><a href="#"><img src="" width=100 height=100/></a></li> 
</ul> 

Answer 1

자바 스크립트 전용 솔루션은 명명 규칙을 사용하고 javascript가 특정 이름의 항목이 있어야한다고 가정합니다.

한 예는 다음과 같습니다

파일의 이름을 바꿉니다

PageName_1.jpg, PageName_2.jpg, PageName_3.jpg, PageName_1.flv, ...

단점은 당신이뿐만 아니라 찾기 위해 어떤 종류의 파일 (확장)에 대한 매개 변수를 정의해야한다는 것입니다 각 페이지에서 검색 할 각 유형의 수를 나타냅니다. 당신은 설정하는 것이 일단

var files = {'jpg':3, 'flv':1, ...}; 
var pageName = "PageName"; 

, 당신은 객체를 반복 할 수 있습니다 : 당신은 그냥 이미지보다 더 원하는 경우 요소의 유형을 결정하기 위해 몇 가지 논리를 만들어야합니다

for (var ext in files){ 
    for (var i = 0; i < files[ext]; i++){ 
     var src = "images/" + pageName + "_" + (i+1) + "." + ext; 
     ... 
    } 
} 

생성.당신이 당신의 인생을 더 쉽게 만드는 및 서버 측 기능을 사용할 수 있습니다, 그리고 다시

function generateElement(src, ext){ 
    switch(ext){ 
     case 'jpg': 
      ... 
     break; 
     case 'flv': 
      ... 
     break; 
    } 
} 

: 이것에 대해 이동하는 가장 좋은 방법은 일반적으로 공장 방법이다.

Answer 2

, 자동으로 파일을 사용할 수 있는지 알 수있는 방법이 없습니다 그래서 자바 스크립트 파일 시스템을 액세스 할 수 있습니다.

필자는 개인적으로 PHP 5.4의 내장 서버를 사용하고 싶습니다. PHP에서는 파일을 glob() 개까지 손쉽게 입력 할 수 있으며 HTML 페이지에 넣을 수 있습니다.

또는 일괄 처리 스크립트를 가질 수있다 자바 스크립트를 읽을 파일의 목록을 "컴파일"

dir /B *.png;*.gif;*.jpg > filelist.txt 

그런 다음 당신이 AJAX 또는 유사한으로 파일을 얻을 수와 줄 바꿈에 분할 - 각 파일 것 한 줄에있다. 이렇게하면 배치 스크립트를 실행하여 파일 목록을 업데이트하면됩니다.