Question

I have the following sql query that fetches images from an establishment table.
The main photo ie, establishment_mainphoto_url is always inputed and can never be left null. However, the other 5 fields can contain photos or be left null, or a combination of some null and some not.

I have a jcarousel slide-image show that calls images from an unordered list for display.

The code:

$establishment_id = $row_establishment_view['establishment_id'];
$carouselSQL = mysql_query("SELECT establishment_mainphoto_url,
                                 establishment_photo_url1, 
                                 establishment_photo_url2, 
                                 establishment_photo_url3, 
                                 establishment_photo_url4, 
                                 establishment_photo_url5                                   
                                 FROM establishment 
                                 WHERE establishment_id=$establishment_id");
$carouselImg = mysql_fetch_assoc($carouselSQL);  

The jquery carousel code:

<div class="carousel_container"><!--Carousel list of images-->
                    <div class="infiniteCarousel">
                       <div class="wrapper">
                           <ul>
                           <?php if(!empty($carouselImg['establishment_mainphoto_url'])) {?>                                                                                        
                               <li><img alt="" src="Establishment_Images/<?php echo $carouselImg['establishment_mainphoto_url'];?>" height="390" width="500"/></li> 
                           <?php } ?>
                           <?php if(!empty($carouselImg['establishment_photo_url1'])) {?>   
                               <li><img alt="" src="Establishment_Images/<?php echo $carouselImg['establishment_photo_url1'];?>" height="390" width="500"/></li>
                           <?php } ?>
                           <?php if(!empty($carouselImg['establishment_photo_url2'])) {?>   
                               <li><img alt="" src="Establishment_Images/<?php echo $carouselImg['establishment_photo_url2'];?>" height="390" width="500"/></li> 
                           <?php } ?>  
                           <?php if(!empty($carouselImg['establishment_photo_url3'])) {?>     
                               <li><img alt="" src="Establishment_Images/<?php echo $carouselImg['establishment_photo_url3'];?>" height="390" width="500"/></li> 
                           <?php } ?>
                           <?php if(!empty($carouselImg['establishment_photo_url4'])) {?>   
                               <li><img alt="" src="Establishment_Images/<?php echo $carouselImg['establishment_photo_url4'];?>" height="390" width="500"/></li> 
                           <?php } ?> 
                           <?php if(!empty($carouselImg['establishment_photo_url5'])) {?>      
                               <li><img alt="" src="Establishment_Images/<?php echo $carouselImg['establishment_photo_url5'];?>" height="390" width="500"/></li>
                           <?php } ?>                    
                           </ul> 
                       </div>   
                    </div>   
                </div> 

Say a user enters the establishment_mainphoto_url, establishment_photo_url1 and establishment_photo_ur4 and leaves the other fields empty.

Right now the carousel shows the images but with blanks in between. E.g after the main image and image 1, it will have 2 blank “images” where 2 and 3 are supposed to be and then image 4 will show, then a blank for 5, and the carousel then starts over.

How do I fix it so that the 3 images show in line in the slideshow with no “blanks”?

Answer 1

<div class="carousel_container"><!--Carousel list of images-->
<div class="infiniteCarousel">
   <div class="wrapper">
       <ul>
       <?php
       foreach ( $carouselImg as $image ) {
           if ( empty($image) ) continue;
           echo '<li><img alt="" src="Establishment_Images/' . $image . '" height="390" width="500"/></li>';
       }
       ?>
       </ul> 
   </div>   
</div>   
</div>