如果没有图像,如何隐藏图像标签?基本上,我有一个可以设置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>

最佳答案

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


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

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。

关于php - 如果没有图像集,如何在PHP中隐藏图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48399628/

10-11 23:28
查看更多