웹 사이트에 링크가있는 임의의 이미지 표시

Question

나는 사람들이 pdf 문서를 다운로드 할 수있는 웹 사이트를 운영하고 있습니다. 사이트를보다 매력적으로 만들기 위해 임의의 보고서 첫 페이지의 스크린 샷을 표시하고 사용자가 클릭하면 스크린 샷을 찍은 해당 pdf 파일을 엽니 다.

는 지금, 나는 이것을 달성하기 위해 다음과 같은 자바 스크립트 코드를 사용하고 있습니다 :이 문제없이 작동하고

<script type="text/javascript"> 
var total_images = 3; 
var random_number = Math.floor((Math.random()*total_images)); 
var random_img = new Array(); 
random_img[0] = '<a href="documents/report1.pdf"><img src="images/report1.jpg"><\/a>'; 
random_img[1] = '<a href="documents/report2.pdf"><img src="images/report2.jpg"><\/a>'; 
random_img[2] = '<a href="documents/report3.pdf"><img src="images/report3.jpg"><\/a>'; 
document.write(random_img[random_number]); 
--></script> 

. 그러나 항상 새로운 pdf-docs가 추가되고 코드를 편집 할 때마다 약간의 어려움이 있습니다. php를 사용하여 javascript 배열을 채울 수도 있습니다 읽었습니다. 불행히도, 나는 그것에 대해 올 때 완벽한 멍청한 놈이다. 그리고 나는 이것을 어떻게 할 것인지, 그리고 올바른 보고서에 대한 스크린 샷 링크를 가지고 있는지를 확신하지 못한다.

달성 방법에 대한 아이디어가 있으십니까?

미리 감사드립니다.

Answer 1

당신은 직접 자바 스크립트에 PHP를 삽입 할 수 있습니다. 내 말은, PHP는 서버에서 처음 실행되고, 수정 된 자바 스크립트를 클라이언트에게 제공하여 처음에는 PHP가 있다는 것을 전혀 모를 것입니다.

이 보고서의 PHP 배열 및 명명 규칙을 가정하면 유사합니다

<script type="text/javascript"> 
    var total_images = 3; 
    var random_number = Math.floor((Math.random()*total_images)); 
    var random_img = [ 
         <?php 
          foreach ($reports as $report) { 
           echo "'<a href="documents/$report.pdf"><img src="images/$report.jpg"><\/a>', "; 
          } 
         ?> 
        ]; 
    document.write(random_img[random_number]); 
</script> 

편집 : 자세한 설명

이 지금처럼 자바 스크립트 배열을 생성합니다 :

['<a href="documents/report1.pdf"><img src="images/report1.jpg"><\/a>', 
'<a href="documents/report2.pdf"><img src="images/report2.jpg"><\/a>', 
];