Question

Hy everione。

所以基本上我有一个带有图像的列表，我会像这样从db显示它们：

<?php                                           
    $result = mysql_query("SELECT * FROM images ORDER BY position");
    while ($image = mysql_fetch_array($result)){
?>
        <img src="/<?php echo $image['thumb'];?>" />

php } ?>

我已经创建了一个掩码，在那里显示大图像，但我不知道如何知道单击图像然后在弹出窗口中显示大图像。

我在db中使用的字段是

image_id    
image   
position    
thumb

Answer 1

您需要将<img>标记用<a>链接包围，该链接指向另一个检索正确图像的PHP脚本：

在while（）循环中：

<a href='getImage.php?id=<?php echo $image['image_id']; ?>'>
  <img src="/<?php echo $image['thumb'];?>" />
</a>

getImage.php

getImage.php主要显示包含之前选择的完整尺寸图像的<img>标记。请务必在必要时填写所需的其余HTML，因为我之前只包含了<img>标记。

$img = isset($_GET['id']) ? intval($_GET['id']) : NULL;

if ($img) { 
  $image_qry = mysql_query("SELECT image FROM images WHERE image_id = $img");
  if ($image_qry) {
    $image_data = mysql_fetch_assoc($image_qry);
    // One row was returned...
    if ($image_data) {
      echo "<img src='{$image_data['image']}' alt='alt text...' />";
    }
  }
}
else {
  // Invalid id, not an integer
}

Answer 2

<?php                                           
    $result = mysql_query("SELECT * FROM images ORDER BY position");
    while ($image = mysql_fetch_array($result)){
?>
        <img src="/<?php echo $image['thumb'];?>"  onclick="openImage('<?php echo $image["image"];?>');" />

<?php } ?>

写一个名为openImage(image_src)的javascript函数，将图像放在正确的位置

Answer 3

看看这个并选择满足您需求的东西http://www.1stwebdesigner.com/css/fresh-jquery-image-gallery-display-solutions/

Answer 4

<script>
  function showBigImage(image_id){
     // show your big image here with using image_id
  }
</script>
<?php                                           
  $result = mysql_query("SELECT * FROM images ORDER BY position");
  while ($image = mysql_fetch_array($result)){
?>
    <img src="/<?php echo $image['thumb']; ?>" onclick="showBigImage('<?php echo $image["image_id"]; ?>');" />

<?php } ?>

选择第1张图像时显示第2张图像

4 个答案:

在while（）循环中：

getImage.php