Monday, October 6, 2014

Zurb Foundation Photo Gallery Showcase Album

One of our clients required a simple web page for displaying POI details such as photos of hotels. The website, in general, is a hotel coupon directory. Users search by location and browse available hotel coupons. One of the options is to view the hotel images.

Since we were already using Zurb's Foundation framework for our responsive website layout adding a photo gallery was a breeze. This media component is called a Clearing Lightbox. In our case the image names are retrieved from a MySQL database. A simple while loop takes care of generating the required HTML.

<div class="row">
    <div class="small-12 columns">
        <h2>Hotel Images</h2>
    </div>
</div>

<div class="row">
    <div class="small-12 columns">
        <ul class="clearing-thumbs small-block-grid-1 medium-block-grid-4" data-clearing>
<?php
    while($row = $img_result->fetch_object()) {
    ?>
        <li><a href="/images/<?=$row->ImageFileName?>"><img src="/images/<?=$row->ImageFileName?>"></a></li>
    <?
    }
    $result->free();
?>
        </ul>
    </div>
</div>

Note the two classes small-block-grid-1 and medium-block-grid-4. This is the beauty of Foundation framework. Super easy to define the following rule: if the screen is small (e.g. mobile device) -> display the images one under another, if the screen is medium size (or larger) -> display 4 images per row.

This example shows how simple it is to build responsive websites. There's no need to write all the HTML from scratch.

Web Task Technologies - "We are here to help"