I have a mysqli query which fetches all the images from the table(I have 5 images that I display). I am using a jquery slider to display them. The problem is if there are no 5 images I see blank page like if the user uploads just two images then the rest three thumbnails will be empty and when you click on them it shows empty area. I don't want that happen so how do I only show the thumbnail if the image exists instead of showing empty thumbnail?
I tried the below but this doesn't work. I just need to see if image_one exists then show the thumbnail and the same for the rest of the images.
<?php
$stmt = $mydb->prepare("SELECT * FROM table where title = ? AND id = ? limit 1 ");
$stmt->bind_param('ss', $title, $id);
$stmt->execute();
$result = $stmt->get_result();
while ($row = $result->fetch_assoc()) {
$path = 'images/';
?>
<div id="slides">
<?php if($result->num_rows > 0){?><div class="slide"><a class="fancybox" href="<?php echo $path.$row['image_one']?>" data-fancybox-group="gallery"><img class="cloudzoom appsld" src="<?php echo $path.$row['image_one']?>"/></a></div><?php };?>
<?php if($result->num_rows > 0){?><div class="slide"><a class="fancybox" href="<?php echo $path.$row['image_two']?>" data-fancybox-group="gallery"><img class="cloudzoom appsld" src="<?php echo $path.$row['image_two']?>"/></a></div><?php };?>
<?php if($result->num_rows > 0){?> <div class="slide"><a class="fancybox" href="<?php echo $path.$row['image_three']?>" data-fancybox-group="gallery"><img class="cloudzoom appsld" src="<?php echo $path.$row['image_three']?>"/></a></div><?php };?>
<?php if($result->num_rows > 0){?><div class="slide"><a class="fancybox" href="<?php echo $path.$row['image_four']?>" data-fancybox-group="gallery"><img class="cloudzoom appsld" src="<?php echo $path.$row['image_four']?>"/></a></div><?php };?>
<?php if($result->num_rows > 0){?><div class="slide"><a class="fancybox" href="<?php echo $path.$row['image_five']?>" data-fancybox-group="gallery"><img class="cloudzoom appsld" src="<?php echo $path.$row['image_five']?>"/></a></div><?php };?>
</div>
<div id="slide_menu">
<ul id="slide"> <!-- This is the thumbnail area -->
<li class="fbar"> </li>
<?php if($result->num_rows > 0){?><li class="menuItem"><a href=""><img src="<?php echo $path.$row['image_one']?>" /></a></li><?php }; ?>
<?php if($result->num_rows > 0){?><li class="menuItem"><a href=""><img src="<?php echo $path.$row['image_two']?>" /></a></li><?php }; ?>
<?php if($result->num_rows > 0){?><li class="menuItem"><a href=""><img src="<?php echo $path.$row['image_three']?>" /></a></li><?php }; ?>
<?php if($result->num_rows > 0){?><li class="menuItem"><a href=""><img src="<?php echo $path.$row['image_four']?>" /></a></li><?php }; ?>
<?php if($result->num_rows > 0){?><li class="menuItem"><a href=""><img src="<?php echo $path.$row['image_five']?>" /></a></li><?php }; ?>
</ul>
</div>
we can not see your database design so look at your default value for
image_one and so on
The row count is allways 0 or 1 (because of Limit 1)
Important are the fields image_one to image_five These fields are always present, regardless of whether they are empty or with file names are filled.
depending on the default value test it
for example one of
put an if arround building html.
<?php if($result->num_rows > 0){?>
<?php if ($row['image_one'] > '')
{?>
<li class="menuItem">
<a href=""><img src="<?php echo $path.$row['image_one']?>" /></a>
</li>
<?php
}?>
.... next 4 other tests
<?php if ($row['image_two'] > '')
....
<?php } // END__$result->num_rows > 0 ?>
Im not 100% sure for pdo but its not too far away
<?php
$sql = "SELECT * FROM table where title = $title AND id = $id limit 1 ";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
?>
<div class="slide">
<a class="fancybox" href="images/<?php echo $row['DB-IMAGE-PATH-HERE']; ?>" data-fancybox-group="gallery">
<img class="cloudzoom appsld" src="images/<?php echo $row['DB-IMAGE-PATH-HERE']; ?>"/>
</a>
</div>
<?php } // end while loop ?>
</div> <!-- end id="slides" -->
try something like
...
<ul id="slide"> <!-- This is the thumbnail area -->
<li class="fbar"> </li>
<?php
foreach ( $row as $element => $val){
if(isset($val)) {
print "<li class='menuItem'><a href=''><img src=".$path.$val."/></a></li>";
}
}
?>
</ul>
...
and the same for the 1st (<div id="slides">) block