Question

如果没有图像，如何隐藏图像标签？基本上，我有一个图像库，有4个图像可以设置。但是，如果产品有2个图像，我如何隐藏其他2个图像标签？什么是最好的使用方法？

<img src="/images/large/<?=$prod_id?>.jpg" onclick="openModal();currentSlide(1)" style="border: 1px solid #cccccc;" class="hover-single"/>

  <div class="row">
    <p style="text-align:center;">Click on image to enlarge</p>
    <div class="column">
      <img src="/images/large2/<?=$prod_id?>.jpg" style="width:80px; height:80px; border-right: 1px solid #cccccc; padding-right: 5px;" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
    </div>
    <div class="column">
      <img src="/images/large3/<?=$prod_id?>.jpg" style="width:80px; height:80px; border-right: 1px solid #cccccc; padding-right: 5px;" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
    </div>
    <div class="column">
      <img src="/images/large4/<?=$prod_id?>.jpg" style="width:80px; height:80px;" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
    </div>
  </div>

<div id="myModal" class="modal" style="display: block;">
  <span class="close cursor" onclick="closeModal()">×</span>
  <div class="modal-content">
    <div class="mySlides" style="display: block;">
      <div class="numbertext">1 / 4</div>
      <img src="/images/large1/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
    </div>

    <div class="mySlides" style="display: none;">
      <div class="numbertext">2 / 4</div>
      <img src="/images/large2/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
    </div>

    <div class="mySlides" style="display: none;">
      <div class="numbertext">3 / 4</div>
      <img src="/images/large3/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
    </div>

    <div class="mySlides" style="display: none;">
      <div class="numbertext">4 / 4</div>
      <img src="/images/large4/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
    </div>

    <a class="prev" onclick="plusSlides(-1)">&lt;</a>
    <a class="next" onclick="plusSlides(1)">&gt;</a>

    <div class="caption-container">
      <p id="caption"></p>
    </div>

    <div class="column">
      <img class="gallery cursor active" src="/images/large1/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(1)">
    </div>
    <div class="column">
      <img class="gallery cursor" src="/images/large2/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(2)">
    </div>
    <div class="column">
      <img class="gallery cursor" src="/images/large3/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(3)">
    </div>
    <div class="column">
      <img class="gallery cursor" src="/images/large4/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(4)">
    </div>
  </div>
</div>

Answer 1

您的模态内容代码可以重写如下：

检查图像文件是否存在
如果图像文件存在则显示幻灯片，否则不执行任何操作。

for($i = 1; $i<=4; $i++) { $img_file = '/images/large'.$i.'/'.$prod_id.'.jpg'; if(file_exists($img_file)) { $display = ($i == 1) ? ' block' : ' none'; echo '<div class="mySlides" style="display:'.$display.';">'; echo ' <div class="numbertext">'.$i.' / 4</div>'; echo ' <img src="'.$img_file.'" style="width:95%; height:95%; margin-left: 2.5%;">'; echo '</div>'; } }

以上代码可用于替换以下代码部分：

<div class="mySlides" style="display: block;">
  <div class="numbertext">1 / 4</div>
  <img src="/images/large1/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>

<div class="mySlides" style="display: none;">
  <div class="numbertext">2 / 4</div>
  <img src="/images/large2/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>

<div class="mySlides" style="display: none;">
  <div class="numbertext">3 / 4</div>
  <img src="/images/large3/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>

<div class="mySlides" style="display: none;">
  <div class="numbertext">4 / 4</div>
  <img src="/images/large4/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>

当然，这不是每次检查file_exists的最佳方法。这可以通过在数据集/数据库中存储每个产品的图像数量来改进。然后设置一个新变量，如$img_num，以替换循环中的4。

Answer 2

试试这段代码：

<div class="row">
    <p style="text-align:center;">Click on image to enlarge</p>
    <div class="column">
    <?php if(file_exists('/images/large2/'.$prod_id.'.jpg')){<?php>
      <img src="/images/large2/<?=$prod_id?>.jpg" style="width:80px; height:80px; border-right: 1px solid #cccccc; padding-right: 5px;" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"><?php } 
</php>

Answer 3

您可以根据自己的要求：

$query = "here is your query";
$res   = "your query executed";
$imagearray = array();
$i = 0;
while($row = mysql_fetch_array($res))
{
   if(file_exists(imagepath.$row["image"]))
   {
      $imagearray[$i] = $row["image"];
      $i++
   }
}

Answer 4

嗨，他们的兄弟ild烟道做得很好，但是我们可以更多地增强代码，但是提升动态更多，我建议下面的代码，

扫描现有文件夹的目录（以这种方式你不需要依赖在任意数字上表示文件夹
看到那些带有ur图像的路径是否存在

显示指定的图像，然后将其余部分丢弃。

<div id="myModal" class="modal" style="display: block;">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<?php
$k=1;
$dirs = array_filter(glob('images/*'), 'is_dir');
foreach ( $dirs as $allLargeDir ){
    $imgPath=$allLargeDir."/".$prod_id.".jpg";
    if(file_exists($imgPath)){
   ?>
      <div class="mySlides" style="display: block;">
      <div class="numbertext"><?php echo $k++." / ".$n; ?></div>
        <img src="<?php echo $imgPath;?>" style="width:95%; height:95%; margin-left: 2.5%;">
     </div>
  <?php
  }
}
?>

如果没有图像集，如何在PHP中隐藏图像

4 个答案: