如果没有图像,如何隐藏图像标签?基本上,我有一个可以设置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)"><</a>
<a class="next" onclick="plusSlides(1)">></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/