#fancydemo {
  text-align: center
}

#fancydemo .pmk-Image {
  padding: 5px;
  background: white;
  border: 1px solid #DDD;
  margin: 5px 20px 7px 0;
}

<?php 
include_once 'phpmoko/ui/FlowPanel.php';
include_once 'phpmoko/utils/Bitmap.php';

class ModuleDemo implements WebModule
{
  function getWidget()
  {
    $bitmap = new Bitmap('./modules/demos/image/1_b.gif');
    $bitmap->resize(154, 100, false);
    $bitmap->save('./modules/demos/image/1_s.gif');

    $bitmap = new Bitmap('./modules/demos/image/1_b.png');
    $bitmap->resize(154, 100, false);
    $bitmap->save('./modules/demos/image/1_s.png');

    for ($i = 1; $i <= 4; $i++)
    {
      $bitmap = new Bitmap('./modules/demos/image/'.$i.'_b.jpg');
      $bitmap->resize(154, 100, false);
      $bitmap->save('./modules/demos/image/'.$i.'_s.jpg');
    }
    
    $flowPanel = new FlowPanel();
    $flowPanel->setId('fancydemo');

    $image = new Image('/modules/demos/image/1_s.png');
    $image->setGroupId('MyGroupDemo');
    $image->setTitle('My title 1');
    $image->setUrlBigImage('/modules/demos/image/1_b.png');
    $flowPanel->add($image);


    $image = new Image('/modules/demos/image/1_s.gif');
    $image->setGroupId('MyGroupDemo');
    $image->setTitle('My title 1');
    $image->setUrlBigImage('/modules/demos/image/1_b.gif');
    $flowPanel->add($image);
    
    for ($i = 1; $i <= 4; $i++)
    {
      $image = new Image('/modules/demos/image/'.$i.'_s.jpg');
      if ($i <= 3)
        $image->setGroupId('MyGroupDemo');

      $image->setTitle('My title '.$i);
      $image->setUrlBigImage('/modules/demos/image/'.$i.'_b.jpg');
      $flowPanel->add($image);
    }

    return $flowPanel;
  }
}
?>