Dynamically set the images of the CSS Image Gallery with PHP

Question:

---

How to dynamically set the images and thumbnails of the CSS Image Gallery using PHP and mySQL? Answer:

---

CSS Image Gallery uses two unordered lists (ul and li HTML tags) for defining the images and the thumbnails of the gallery.

In order the images and thumbnails to be set dynamically, these two unordered lists should be filled with the images names read from the database.

For example, the code of the modified CSS Image Gallery could look like this:

<?php
// Check if there are any rows
if(mysql_num_rows($rsImages)){
?>
<div class="dmxGallery" id="cssGallery1">
  <ul>
  <?php do {
  // Set the images names
  ?>
      <li><img src="Images/<?php echo $row_rsImages['image']; ?>" width="450" height="299" class="image" alt="" /></li>
  <?php } while ($row_rsImages = mysql_fetch_assoc($rsImages)); ?></ul>
</div>
<div class="dmxThumbList" id="cssGallery1_thumb">
  <ul>
  <?php
    //Move to the first record
    mysql_data_seek($rsImages, 0);
    //Get the first row
    $row_rsImages = mysql_fetch_assoc($rsImages);
    do {
    //Set the thumbnail names
  ?>
    <li><img src="Images/thumbs/<?php echo $row_rsImages['image']; ?>" width="150" height="100" alt="" /></li>
  <?php } while ($row_rsImages = mysql_fetch_assoc($rsImages)); ?>
  </ul>
</div>
<?php } ?>

Where 'image' name is the column in my database which contains the image names without the path.

The above code could be optimized by storing the image names into array. The values of the array can be used when it is set the thumbnails instead of fetching again the records from the database.

Also, the image and thumbnail dimensions could be get from the files instead using static values.

For example, this could be achieved with the following code:

* Retrieving image dimensions:

<?php do {
      // Get image dimensions
      list($w, $h) = getimagesize("Images/".$row_rsImages['image']);
      // Set the images names
  ?>
      <li><img src="Images/<?php echo $row_rsImages['image']; ?>" width="<?php echo $w ?>" height="<?php echo $h ?>" class="image" alt="" /></li>
  <?php } while ($row_rsImages = mysql_fetch_assoc($rsImages)); ?></ul>

* Retrieving thumbnails dimensions:

<?php
    //Move to the first record
    mysql_data_seek($rsImages, 0);
    //Get the first row
    $row_rsImages = mysql_fetch_assoc($rsImages);
    //Get thumbnails dimensions
    list($w, $h) = getimagesize("Images/thumbs/".$row_rsImages['image']);
      do {
    //Set the thumbnail names
  ?>
    <li><img src="Images/thumbs/<?php echo $row_rsImages['image']; ?>" width="<?php echo $w ?>" height="<?php echo $h ?>" alt="" /></li>
  <?php } while ($row_rsImages = mysql_fetch_assoc($rsImages)); ?>

---

DISCLAIMER:

This is extra complimentary content which purpose is to show additional usage that is not part of the product, i.e. it suggests tips for extending the functionality of the product by the users themselves. It is provided "as is", without warranty of any kind, express or implied , including but not limited to the warranties of merchantability, fitness for a particular purpose and nonfringement of third party rights.

DMXzone does not take responsibility to support the suggested content to be fully compatible and working as intended and does not provide support for extended functionality which is not included in the current release of the extension.

It is highly recommended that only more advanced developers use it.