2017-09-03 61 views
0

雖然我不是太糟糕的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&ouml;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.'()">&times;</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)">&#10094;</a> 
 
\t <a class="next" onclick="plusSlides(1)">&#10095;</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抱歉。

回答

0

需要兩個模態的plusSlides()函數。目前他們 都調用相同的導致模態1圖像鏈接顯示模式2圖像不在屏幕上。

建議更改本節:

// Navigation in modal 

echo '<a class="prev" onclick="plusSlides".$id."(-1)">&#10094;</a> 
<a class="next" onclick="plusSlides".$id."(1)">&#10095;</a>'; 

然後改變這部分:

function currentSlide<?php echo $id?>(n) { 
    showSlides<?php echo $id?>(slideIndex = n); 
} 

var slideIndex = 1; 
showSlides<?php echo $id?>(slideIndex); 

function showSlides<?php echo $id?>(n) { 
    var i; 

而且更新plusSlides功能(在代碼中未畫出),以這樣的:

function plusSlides1(n) { 
    showSlides1(slideIndex += n); 
} 
function plusSlides2(n) { 
    showSlides2(slideIndex += n); 
} 

也許將plusSlides1(n)plusSlides2(n)函數帶入php代碼與其他人動態呈現它們?

+0

哇,請原諒我遲到的回覆!我剛纔看到了所有這些偉大的回覆,爲此我需要一些時間來閱讀和理解。非常感謝他們!我的印象是,如果有人回覆,我會通過電子郵件通知,但顯然不是這樣。我顯然必須改變我的設置。 – Rumi

0

你的設計理念,作爲一個程序員,都有點不優化,如果我可以這樣說:)

在JS,在其他語言中,function代碼封裝旁的想法,被再利用或多次使用。您正在創建針對潛在不同id的功能。所以我會用的ID本身的參數:

function openModal(id) { 
    document.getElementById(id).style.display = "block"; 
} 
function closeModal(id) { 
    document.getElementById(id).style.display = "none"; 
} 

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

顯然,圖像的代碼看起來是這樣的:

<img class = "img_3" src="../images/'.$pic.'" title="'.$desc.'" onclick="openModal(\'myModal'.$id.'\');currentSlide('.$number.')"> 

但是,這只是爲了讓你有什麼工作。

更好的方法是從PHP發送只有數據(包含圖像和標題的數組)並在客戶端構建用戶界面。 認爲所有thse elemnets您使用,表格單元格的div,圖像可以很容易地與JS創建:

td.innerHTML = "<div><img src='...' ></div>"; 

因此,使用JS你可以建立:

td = document.createEelement('tr') // or td or div or img 

HTML內容可以與設置easiy的UI,你需要:

var url = "http://pilgrimstudio.ch/images/", 
 
    images = [ 
 
    ["Studio_Bilder_Pele/Recording_1.png", "Der Aufnahmeraum 2"], 
 
    ["Studio_Bilder_Pele/Regie_1.png", "Regie 1 früher"], 
 
    ["2016-02-01%2015.36.22.jpg", "Regie 1"], 
 
    ["Studio_Bilder_Pele/Regie_2.png", "Regie 2"] 
 
    ]; 
 

 
function buildSlide(id, images) { 
 
    var tr, s = ''; 
 

 
    for (var i = 0; i < images.length; i++) { 
 
    if (i % 3 == 0) { 
 
     tr = document.createElement('tr'); 
 
     document.getElementById(id).appendChild(tr); 
 
    } 
 
    tr.innerHTML += `<td><img width="200" src="${url+images[i][0]}"</td>`; 
 
    } 
 

 
} 
 
buildSlide('gal1', images);
td img { 
 
    height: 140px; 
 
    overflow: hidden; 
 
}
<table id="gal1"> 
 
</table>

通過這種方式,您可以將服務器端代碼與客戶端代碼分開,這可以幫助您更清楚地理解事情。