PHP 和 Javascript 图片库挑战 - 模态不显示正确的图像

Question

虽然我对 PHP 的了解还不错，但 Javascript 对我来说是一种看起来很奇怪的 PHP，而且它似乎经常将这种方法反映给我。它的行为很奇怪，我不知道为什么。所以请原谅我缺乏真正的知识。

我正在使用 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

	echo '<table width="100%" border="0" align="center">
	<tr> ';
	
	$number = 1;
	$position = array("left", "center", "right");
	$position_number = 0;

	foreach($images3row AS $index => $value) {

		foreach($value AS $pic => $desc) {

			echo '
			<td>
			<div align="'.$position[$position_number].'">
			<img class = "img_3" src="../images/'.$pic.'" title="'.$desc.'" onclick="openModal'.$id.'();currentSlide'.$id.'('.$number.')">
			</div>
			</td>';

			$number++;
			$position_number++;
			
			if ($position_number == 3) {
  		
				echo '</tr><tr>';
				$position_number = 0;
			}
		}
	}

	echo '</tr>
	</table>';

// MODAL

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

	$number = 1;
	$count = count($images3row);

// Main picture in modal

	foreach($images3row AS $index => $value) {

		foreach($value AS $pic => $desc) {
		
			echo '<div class="mySlides'.$id.'">
			<!--<div class="numbertext">'.$number.' / '.$count.'</div>-->
			<img src="../images/'.$pic.'" style="width:100%">
			</div>';
			$number++;
		}
	}

// Navigation in modal

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

// Caption (= description)

	echo '<div class="caption-container">
	<p id="caption'.$id.'"></p>
	</div>';
	
// Column (= thumbnails)

	echo '<div class="column-container">';

	$number = 1;

	foreach($images3row AS $index => $value) {

		foreach($value AS $pic => $desc) {

			echo' <div class="column">
			<img class="demo'.$id.' cursor" src="../images/'.$pic.'" onclick="currentSlide'.$id.'('.$number.')" alt="'.$desc.'">
			</div>';
			$number++;
		}
	}

	echo '</div>
	</div>
	</div>';
	
	?>
	
	<script>
	function openModal<?php echo $id?>() {
	  document.getElementById('myModal<?php echo $id?>').style.display = "block";
	}

	function closeModal<?php echo $id?>() {
	  document.getElementById('myModal<?php echo $id?>').style.display = "none";
	}

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

	function showSlides(n) {
	  var i;
	  var slides = document.getElementsByClassName("mySlides<?php echo $id?>");
	  var dots = document.getElementsByClassName("demo<?php echo $id?>");
	  var captionText = document.getElementById("caption<?php echo $id?>");
	  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;
	}
	</script>
	
	<?php
}
		
?>
	<script>
	function plusSlides(n) {
	  showSlides(slideIndex += n);
	}
	</script>

我猜我将几个 javascript 函数放入 PHP 函数的原因与试图建立对图片的正确引用有关（但我不记得我尝试过的所有变体）。我显然也没有成功。也许整个代码有缺陷，还可以做得更好？

感谢您的帮助！再一次，对于那些不成熟的 Javascript 感到抱歉。

Answer 1

如果我可以这么说的话，作为一名程序员，你的设计理念有点未优化:)

在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 发送数据（带有图像和标题的数组）并在客户端构建用户界面。 认为您正在使用的所有这些元素、表格单元格、div、图像都可以在 js 中轻松创建：

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

html内容可以设置为：

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

因此使用 js 可以轻松构建所需的 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>

通过这种方式，您可以将服务器端代码与客户端代码分开，这可能有助于您保持更清晰。

Answer 2

两种模式都需要plusSlides() 函数。目前他们 都调用同一个导致 modal1 图像链接显示不在屏幕上的模态 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 代码以与其他函数一起动态呈现它们？