Je ne suis pas trop méchant avec PHP, mais Javascript me semble un peu étrange en PHP, et il me semble que cette approche me revient souvent à l'esprit. Il se comporte bizarrement, et je ne sais pas pourquoi. Alors s'il vous plaît pardonnez mon manque de connaissance réelle.Défi de la galerie d'images PHP et Javascript - modal n'affiche pas les bonnes images
Je suis en train de programmer une galerie d'images, en utilisant PHP ainsi que Javascript. Cela fonctionne bien s'il y a seulement une galerie d'images sur le site: http://pilgrimstudio.ch/
Mais quand il y a une deuxième galerie sur le même site, le modal ne fonctionne pas. J'ai essayé différentes choses, mais rien n'a fonctionné - j'ai fini avec différents types de comportements étranges. Il semble que Javascript n'aborde pas correctement les images, mais je ne vois pas pourquoi. Voici le type actuel d'étrange: http://pilgrimstudio.ch/News (le modal n'en montre qu'un - la première image, et pas de vignettes, et la fonctionnalité de navigation ne fonctionne pas).
Voici le code:
<?php
// THIS IS ON THE SITE
$id = 1;
$images = array();
$images[] = array("C37AC30Harmonia/C37.jpg"=>"Die Studer C 37 Röhren Bandmaschine");
$images[] = array("C37AC30Harmonia/Harmonia.jpg"=>"Zwei der drei neuen Harmonia");
$images[] = array("C37AC30Harmonia/PumpHarmonium.jpg"=>"Das sehr seltene Pump-Harmonium");
three_images_row($images, $id);
$id++;
// THE FOLLOWING IS IN FUNCTIONS.INC.PHP
function three_images_row($images3row, $id) {
// MAIN PAGE PICTURE TABLE
\t echo '<table width="100%" border="0" align="center">
\t <tr> ';
\t
\t $number = 1;
\t $position = array("left", "center", "right");
\t $position_number = 0;
\t foreach($images3row AS $index => $value) {
\t \t foreach($value AS $pic => $desc) {
\t \t \t echo '
\t \t \t <td>
\t \t \t <div align="'.$position[$position_number].'">
\t \t \t <img class = "img_3" src="../images/'.$pic.'" title="'.$desc.'" onclick="openModal'.$id.'();currentSlide'.$id.'('.$number.')">
\t \t \t </div>
\t \t \t </td>';
\t \t \t $number++;
\t \t \t $position_number++;
\t \t \t
\t \t \t if ($position_number == 3) {
\t \t
\t \t \t \t echo '</tr><tr>';
\t \t \t \t $position_number = 0;
\t \t \t }
\t \t }
\t }
\t echo '</tr>
\t </table>';
// MODAL
\t echo '<div id="myModal'.$id.'" class="modal">
\t <span class="close cursor" onclick="closeModal'.$id.'()">×</span>
\t <div class="modal-content">';
\t $number = 1;
\t $count = count($images3row);
// Main picture in modal
\t foreach($images3row AS $index => $value) {
\t \t foreach($value AS $pic => $desc) {
\t \t
\t \t \t echo '<div class="mySlides'.$id.'">
\t \t \t <!--<div class="numbertext">'.$number.'/'.$count.'</div>-->
\t \t \t <img src="../images/'.$pic.'" style="width:100%">
\t \t \t </div>';
\t \t \t $number++;
\t \t }
\t }
// Navigation in modal
\t echo '<a class="prev" onclick="plusSlides(-1)">❮</a>
\t <a class="next" onclick="plusSlides(1)">❯</a>';
// Caption (= description)
\t echo '<div class="caption-container">
\t <p id="caption'.$id.'"></p>
\t </div>';
\t
// Column (= thumbnails)
\t echo '<div class="column-container">';
\t $number = 1;
\t foreach($images3row AS $index => $value) {
\t \t foreach($value AS $pic => $desc) {
\t \t \t echo' <div class="column">
\t \t \t <img class="demo'.$id.' cursor" src="../images/'.$pic.'" onclick="currentSlide'.$id.'('.$number.')" alt="'.$desc.'">
\t \t \t </div>';
\t \t \t $number++;
\t \t }
\t }
\t echo '</div>
\t </div>
\t </div>';
\t
\t ?>
\t
\t <script>
\t function openModal<?php echo $id?>() {
\t document.getElementById('myModal<?php echo $id?>').style.display = "block";
\t }
\t function closeModal<?php echo $id?>() {
\t document.getElementById('myModal<?php echo $id?>').style.display = "none";
\t }
\t function currentSlide<?php echo $id?>(n) {
\t showSlides(slideIndex = n);
\t }
\t
\t var slideIndex = 1;
\t showSlides(slideIndex);
\t function showSlides(n) {
\t var i;
\t var slides = document.getElementsByClassName("mySlides<?php echo $id?>");
\t var dots = document.getElementsByClassName("demo<?php echo $id?>");
\t var captionText = document.getElementById("caption<?php echo $id?>");
\t if (n > slides.length) {slideIndex = 1}
\t if (n < 1) {slideIndex = slides.length}
\t for (i = 0; i < slides.length; i++) {
\t slides[i].style.display = "none";
\t }
\t for (i = 0; i < dots.length; i++) {
\t dots[i].className = dots[i].className.replace(" active", "");
\t }
\t slides[slideIndex-1].style.display = "block";
\t dots[slideIndex-1].className += " active";
\t captionText.innerHTML = dots[slideIndex-1].alt;
\t }
\t </script>
\t
\t <?php
}
\t \t
?>
\t <script>
\t function plusSlides(n) {
\t showSlides(slideIndex += n);
\t }
\t </script>Je pense que la raison pour laquelle je mets plusieurs des fonctions javascript dans la fonction PHP a dû faire en essayant d'établir le référencement correct du images (mais je ne me souviens pas de toutes les variations que j'ai essayé). Et je n'ai évidemment pas réussi avec ça non plus. Peut-être que tout le code est défectueux, et que cela peut être fait beaucoup mieux?
Je suis reconnaissant pour toute aide! Et encore une fois, désolé pour le Javascript Javascript.
Wow, s'il vous plaît pardonnez ma réponse tardive! Je viens de voir toutes ces grandes réponses, pour lesquelles j'ai besoin de temps pour lire et comprendre. Merci beaucoup pour eux! J'avais l'impression que je serais informé par e-mail si quelqu'un répondait, ce qui n'était évidemment pas le cas. Je dois évidemment changer mes paramètres. – Rumi