Comment afficher le fichier pdf avec plusieurs vignettes sur une page Web en utilisant jquery ou javascript?

Question

Je travaille sur un projet au travail où sur une page j'ai affiché plusieurs vignettes pdf/images qui ont été chargées dynamiquement à partir d'un répertoire de mon système. Chaque vignette a un fichier pdf respectif dans un autre répertoire. Par conséquent, lorsque je clique sur l'une des vignettes/images de la page Web, le fichier PDF correspondant devrait s'ouvrir dans une nouvelle fenêtre qui est également stockée dans un autre répertoire du système. J'ai employé le php pour développer ma page Web ....

<?php 
//FOR PDF 
$pdf_directory = "pdf/";// PDF file directory 
$p = glob($pdf_directory."*"); 

foreach($p as $portable) { 
    $file=basename($portable,"*.pdf"); 
    $without_ex1 = pathinfo($file, PATHINFO_FILENAME); 

    //FOR THUMBNAIL 
    $pdfimg_directory = "pdfimage/";// THUMBNAIL Directory 
    $pi = glob($pdfimg_directory."*"); 

    $file2 = basename($b,"*.pdf"); 
    $without_ex2 = pathinfo($file2, PATHINFO_FILENAME); //trim .jgp 
    if($without_ex1===$without_ex2) { 
     foreach($pi as $thumbImages) { 
      echo '<a href="'.$portable.'"<img id = "img_id" src="'.$thumbImages.'" style="width: 100; height:100;">'; 
     } 
    } 
} 
?> 

Answer 1

Votre question n'a pas beaucoup de code ou beaucoup d'information mais je pense que c'est ce que vous recherchez. Je pense que vous voulez this mais avec les fichiers pdf aussi, je suppose que vous pouvez modifier le code et le rendre approprié pour le pdf. Voici un extrait de code pour le lien ci-dessus:

function openModal() { 
 
    document.getElementById('myModal').style.display = "block"; 
 
} 
 

 
function closeModal() { 
 
    document.getElementById('myModal').style.display = "none"; 
 
} 
 

 
var slideIndex = 1; 
 
showSlides(slideIndex); 
 

 
function plusSlides(n) { 
 
    showSlides(slideIndex += n); 
 
} 
 

 
function currentSlide(n) { 
 
    showSlides(slideIndex = n); 
 
} 
 

 
function showSlides(n) { 
 
    var i; 
 
    var slides = document.getElementsByClassName("mySlides"); 
 
    var dots = document.getElementsByClassName("demo"); 
 
    var captionText = document.getElementById("caption"); 
 
    if (n > slides.length) {slideIndex = 1} 
 
    if (n < 1) {slideIndex = slides.length} 
 
    for (i = 0; i < slides.length; i++) { 
 
     slides[i].style.display = "none"; 
 
    } 
 
    for (i = 0; i < dots.length; i++) { 
 
     dots[i].className = dots[i].className.replace(" active", ""); 
 
    } 
 
    slides[slideIndex-1].style.display = "block"; 
 
    dots[slideIndex-1].className += " active"; 
 
    captionText.innerHTML = dots[slideIndex-1].alt; 
 
}

body { 
 
    font-family: Verdana, sans-serif; 
 
    margin: 0; 
 
} 
 

 
* { 
 
    box-sizing: border-box; 
 
} 
 

 
.row > .column { 
 
    padding: 0 8px; 
 
} 
 

 
.row:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
.column { 
 
    float: left; 
 
    width: 25%; 
 
} 
 

 
/* The Modal (background) */ 
 
.modal { 
 
    display: none; 
 
    position: fixed; 
 
    z-index: 1; 
 
    padding-top: 100px; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: auto; 
 
    background-color: black; 
 
} 
 

 
/* Modal Content */ 
 
.modal-content { 
 
    position: relative; 
 
    background-color: #fefefe; 
 
    margin: auto; 
 
    padding: 0; 
 
    width: 90%; 
 
    max-width: 1200px; 
 
} 
 

 
/* The Close Button */ 
 
.close { 
 
    color: white; 
 
    position: absolute; 
 
    top: 10px; 
 
    right: 25px; 
 
    font-size: 35px; 
 
    font-weight: bold; 
 
} 
 

 
.close:hover, 
 
.close:focus { 
 
    color: #999; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
} 
 

 
.mySlides { 
 
    display: none; 
 
} 
 

 
.cursor { 
 
    cursor: pointer 
 
} 
 

 
/* Next & previous buttons */ 
 
.prev, 
 
.next { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    top: 50%; 
 
    width: auto; 
 
    padding: 16px; 
 
    margin-top: -50px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 20px; 
 
    transition: 0.6s ease; 
 
    border-radius: 0 3px 3px 0; 
 
    user-select: none; 
 
    -webkit-user-select: none; 
 
} 
 

 
/* Position the "next button" to the right */ 
 
.next { 
 
    right: 0; 
 
    border-radius: 3px 0 0 3px; 
 
} 
 

 
/* On hover, add a black background color with a little bit see-through */ 
 
.prev:hover, 
 
.next:hover { 
 
    background-color: rgba(0, 0, 0, 0.8); 
 
} 
 

 
/* Number text (1/3 etc) */ 
 
.numbertext { 
 
    color: #f2f2f2; 
 
    font-size: 12px; 
 
    padding: 8px 12px; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 

 
img { 
 
    margin-bottom: -4px; 
 
} 
 

 
.caption-container { 
 
    text-align: center; 
 
    background-color: black; 
 
    padding: 2px 16px; 
 
    color: white; 
 
} 
 

 
.demo { 
 
    opacity: 0.6; 
 
} 
 

 
.active, 
 
.demo:hover { 
 
    opacity: 1; 
 
} 
 

 
img.hover-shadow { 
 
    transition: 0.3s 
 
} 
 

 
.hover-shadow:hover { 
 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) 
 
}

<h2 style="text-align:center">Lightbox</h2> 
 

 
<div class="row"> 
 
    <div class="column"> 
 
    <img src="https://www.w3schools.com/howto/img_nature.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"> 
 
    </div> 
 
    <div class="column"> 
 
    <img src="https://www.w3schools.com/howto/img_fjords.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"> 
 
    </div> 
 
    <div class="column"> 
 
    <img src="https://www.w3schools.com/howto/img_mountains.jpg" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor"> 
 
    </div> 
 
    <div class="column"> 
 
    <img src="https://www.w3schools.com/howto/img_lights.jpg" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor"> 
 
    </div> 
 
</div> 
 

 
<div id="myModal" class="modal"> 
 
    <span class="close cursor" onclick="closeModal()">&times;</span> 
 
    <div class="modal-content"> 
 

 
    <div class="mySlides"> 
 
     <div class="numbertext">1/4</div> 
 
     <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%"> 
 
    </div> 
 

 
    <div class="mySlides"> 
 
     <div class="numbertext">2/4</div> 
 
     <img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%"> 
 
    </div> 
 

 
    <div class="mySlides"> 
 
     <div class="numbertext">3/4</div> 
 
     <img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%"> 
 
    </div> 
 
    
 
    <div class="mySlides"> 
 
     <div class="numbertext">4/4</div> 
 
     <img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%"> 
 
    </div> 
 
    
 
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a> 
 
    <a class="next" onclick="plusSlides(1)">&#10095;</a> 
 

 
    <div class="caption-container"> 
 
     <p id="caption"></p> 
 
    </div> 
 

 

 
    <div class="column"> 
 
     <img class="demo cursor" src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise"> 
 
    </div> 
 
    <div class="column"> 
 
     <img class="demo cursor" src="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Trolltunga, Norway"> 
 
    </div> 
 
    <div class="column"> 
 
     <img class="demo cursor" src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords"> 
 
    </div> 
 
    <div class="column"> 
 
     <img class="demo cursor" src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights"> 
 
    </div> 
 
    </div>

Answer 2

J'obtenu la sortie désirée. Merci de votre aide. Partagé le code ci-dessous.

<?php 
     $pdf = "pdf/";  //pdf directory 
     $pdfimg = "pdfimage/"; //pdf thumbnail directory. Used imagemagick to convert pdf to thumbnail 
     $all_files = glob($pdfimg."*"); 
     $all_pdf = glob($pdf."*pdf"); 
      for ($i=0;$i<count($all_files);$i++){ 
       $pdf_name = $all_pdf[$i]; 
       $a = ltrim($pdf_name,"pdf/"); //display pdf name 
       $image_name = $all_files[$i]; 
       echo '<a href="'.$pdf_name.'"><img src="'.$image_name .'" alt="'.$image_name.'" title="'.$a.'"style="height:100; width:100;display:inline;animation: moveSlideShow 1s linear infinite; margin-top:-17px; margin-left:5px;"/></a>'; 
      } 
?>