单击时如何更改页面上的所有照片_JavaScript

我在顶部有一个水平幻灯片放映的页面，在该页面下有许多与上面水平幻灯片放映的照片相对应的照片。 下页中的图片应取决于上一节中单击的图像。 因此，当单击顶部幻灯片中的一张照片时，它将触发以下所有图片的更改。 现在我还无法弄清楚该怎么做。 这是我到目前为止的代码。

这将创建顶部幻灯片。

    <?php
if($_GET){
    $galname = $_GET['galname'];
// gallery settings
$itemsPerPagep = '10';         // number of images per page    
$thumb_widthp  = '150';        // width of thumbnails
$thumb_heightp = '220';         // height of thumbnails
$src_folderp   = 'admin/showroom/'.$galname.'';             // current folder
$src_filesp    = scandir($src_folderp); // files in current folder
$extensionsp   = array(".jpg",".jpeg",".png",".gif",".JPG",".JPEG",".PNG",".GIF"); // allowed extensions in photo gallery

此代码一步一步地回显幻灯片图像

if( isset($filesp[$ip]) && is_file( $src_folderp .'/'. $filesp[$ip] ) ) { 
      echo '<a href"#" id="imgsft'.$ip.'" style="cursor:pointer" onClick="">
      <div class="thumb2" style="text-align:center;">
      <span style="padding-bottom:15px;">'.$placep = substr($filesp[$ip], 0 , (strrpos($filesp[$ip], '.'))).'</span>
               <img src="'. $src_folderp .'/'. $filesp[$ip] .'"width="'.$thumb_widthp.'" height="'.$thumb_heightp.'" alt="" style="padding-top:15px;"/>
            </div>  
            </a>';

并且此代码回显页面下部的图像

<?php
include_once("resources/init.php");
include_once("db_conx.php");
$sql = "SELECT * FROM photos WHERE id= '62'";
$query = mysqli_query($db_conx, $sql);
    while ($row = mysqli_fetch_array($query, MYSQLI_ASSOC)) {
        $description = $row["description"];
        $filename = $row["filename"];
        $thumb1 = $row["thumb1"];
        $thumb2 = $row["thumb2"];
        $thumb3 = $row["thumb3"];}
?>

在最后一个“ id = 62”的部分，我需要这个“ id”变量，以便能够根据上方的幻灯片索引ID＃更改为正确的ID号。

单击图像时，如何获取此id变量以将其更改为相应图像的正确id，从而导致下部页面上的所有照片相对于数据库行中存储的内容发生变化

如果我过于简化/误解了您的问题，请告诉我，但是单击图像时，您需要提出AJAX请求或重新加载页面。 您可以通过使每个图像成为链接或添加单击图像时执行的javascript来实现。 然后，您可以将请求中图像的标识符传递给后端，并在后端使用参数。

为什么不使用引用到要定位的div容器的链接，并使用jQuery加载/创建所需的部分？

另外，您可以使用的.collapse类来实现相同的效果。 我正在开发一个将其用于此类情况的网站。

单击时如何更改页面上的所有照片

问题描述

1楼

2楼