单击一个页面后如何更改页面上的所有照片

时间:2015-08-07 19:16:57

标签: javascript php html mysql css

我有一个页面顶部和下面有一个水平幻灯片放映我有许多照片对应于上面水平幻灯片中的照片。下页上的图片应取决于上面部分中点击的图片。因此,当点击顶部幻灯片中的一张照片时,它会触发所有下面的图片进行更改。现在我还没弄明白怎么做。这是我到目前为止的代码。

这会创建顶部幻灯片。

    <?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,从而导致较低页面上的所有照片相对于存储在数据库行中的内容发生变化

2 个答案:

答案 0 :(得分:0)

如果我过度简化/误解您的问题,请告诉我,但您需要在点击图片时发出AJAX请求或重新加载页面。您可以通过将每个图像作为链接或添加在单击图像时执行的javascript来执行此操作。然后,您可以将请求中图像的标识符传递给后端,并在那里使用参数。

答案 1 :(得分:0)

为什么不使用引用你想要定位的div容器的链接,并使用jQuery加载/创建你想要的部分?

此外,使用the Autofac+Serilog integration中的.collapse类可以达到相同的效果。我正在开发一个网站,将其用于此类案例。