An Image Gallery and Slideshow with Zend Framework and Dojo

Ever wanted to have a fancy image gallery and slideshow on your website? This tutorial will show you how to implement an image gallery for your Zend Framework application using Dojo (see screenshot). Dojo’s image gallery already comes with some very nice built-in features like a thumbnail picker or a slideshow.

I assume that you are already using Dojo in your Zend Framework app (this tutorial will not focus on how to integrate Dojo into an ZF app). In case you don’t, you may find more information on how to setup Dojo in ZF here…

1. Step: Create Action to Fetch Data

The first thing you have to do is to create an action that will return a JSON response which consists of all the images (or links to images, to be more precise) you would like to see in your slideshow. You could fetch a list of images from your database. However, in this tutorial we will simply read all image files from a given directory.

Create an action called getpics in one of your controllers. In this example we will use the IndexController.

/**
 * ItemFileReadStore for Dojo Gallery
 *
 * @return JSON response
 */
 public function getpicsAction()
 {
   // check if request came via an ajax call, otherwhise redirect to index page
   if (!$this->_request->isXmlHttpRequest ()) {
     $this->_redirect ( '/' );
   }

   // set the path to your images
   $galleryPath = APPLICATION_PATH . '\public\images';
   // set the URL to your images
   $galleryURL = 'http://www.example.com/images/';

   // create an array with all filenames found in the directory
   $pictures = array();
   $filehandle = opendir($galleryPath);
   if ($filehandle !== null) {
     while (false !== ($file = readdir($filehandle))) {
       if (($file != '..') && ($file != '.'))
         $pictures[] = $galleryURL . $file;
     }
     //close the file-handle
     closedir($filehandle);
   }        

   // create a JSON response
   $response = $this->_helper->autoCompleteDojo
                             ->sendAutoCompletion($pictures);

   die;
 }

Make sure to adopt the $galleryPath and $galleryURL variables in this listing!

2. Step: Create Action to Show Images

Now, we create an action called showpics that basically does nothing ;-). Well, maybe except one thing: we set a variable $showpics which later on will enable us to distinguish if we came from this action or not.

public function showpicsAction() {
		$this->view->showpics = 1;
	}

3. Step: Adopt your layout.phtml File

Insert the following lines into your layout.phtml before your </head> tag:

<?php if (isset($this->showpics)): ?>
  <script type="text/javascript">
    dojo.require("dojox.image.Gallery");
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dojo.parser");
  </script>
<?php endif; ?>

Furthermore, you have to load the corresponding CSS files. Simply put the following lines into your layout.phtml file before you echo $this->headLink()

if (isset($this->showpics)) {
 $this->headLink()->appendStylesheet('/js/dojox/image/resources/SlideShow.css', 'screen, print');
 $this->headLink()->appendStylesheet('/js/dojox/image/resources/Gallery.css', 'screen, print');
 $this->headLink()->appendStylesheet('/js/dojox/image/resources/ThumbnailPicker.css', 'screen, print');
}

Again, make sure to adopt all links to your needs.

4. Step: Create the View for your showpicsAction

Create a file called showpics.phtml in the folder that contains your views. In this example, this will probably be the \application\views\scripts\index folder. Put the following lines of code into this file:

<div jsId="imageItemStore" dojoType="dojo.data.ItemFileReadStore"
 url="http://<?= $_SERVER['HTTP_HOST'] ?>/index/getpics"></div>

<div id="gallery1" dojoType="dojox.image.Gallery"  imageHeight="400" imageWidth="550">
 <script type="dojo/connect">
   var itemRequest = {
     query: {},
     count: 20
   };
   var itemNameMap = {
     imageThumbAttr: "label",
     imageLargeAttr: "name"
   };
   this.setDataStore(imageItemStore, itemRequest, itemNameMap);
 </script>
</div>

That’s it! You should now be able to see your slideshow when calling your \index\showpics site.

• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• Share with Stumblers
• Tweet about it