雖然我不是太糟糕的PHP,但對我來說Javascript是一種奇怪的外觀PHP,它往往似乎反映這種方法回到我身邊。它表現奇怪,我不知道爲什麼。所以請原諒我缺乏真正的知識。PHP和Javascript圖片庫的挑戰 - 模態不顯示正確的圖像
我正在編程圖片庫,使用PHP以及Javascript。如果網站上只有一個圖片庫,則效果很好:http://pilgrimstudio.ch/
但是,當同一網站上有第二個圖庫時,模式不起作用。我嘗試了各種各樣的東西,但沒有成功 - 我結束了不同種類的奇怪行爲。看起來Javascript並沒有正確處理圖片,但我不明白爲什麼。這裏是目前的一種奇怪的:http://pilgrimstudio.ch/News(模態只顯示一個 - 第一個圖片,沒有縮略圖,導航功能不起作用)。
下面是代碼:
<?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>
我想,爲什麼我把幾個JavaScript函數到PHP函數的原因曾與試圖建立的正確引用做圖片(但我不記得我嘗試過的所有變化)。我顯然也沒有成功。也許整個代碼是有缺陷的,它可以做得更好?
我很感激任何幫助!再次,對於dilletantic Javascript抱歉。
哇,請原諒我遲到的回覆!我剛纔看到了所有這些偉大的回覆,爲此我需要一些時間來閱讀和理解。非常感謝他們!我的印象是,如果有人回覆,我會通過電子郵件通知,但顯然不是這樣。我顯然必須改變我的設置。 – Rumi