For this site I wanted to use an imageflow-type gallery on the index page. There I will upload several pictures of mine 🙂

The first thing to try was searching an already-made module for wordpress. I couldn’t find one that was the way I wanted – either they were old, not working, bulky, slow, ugly, or they were not free.

So then I decided to manufacture one myself. The first step was to find an imageflow control, not too complicated, free and nice-looking. I found this ImageFlow control which is customizable, free and cute. It isn’t exactly the fastest (it uses JavaScript quite a lot), but it is clean and straightforward. I uploaded the folder extracted from the downloaded archive in my theme folder (I integrated it directly in my theme). Then, in the header.php file I added the references:

<?php /* ImageFlow Object */ ?>
<?php if(is_home()) { ?>
<link rel="stylesheet" href="<?php echo bloginfo('template_url'); ?>/ImageFlow/imageflow.css" type="text/css" />
<script src="<?php echo bloginfo('template_url'); ?>/ImageFlow/imageflow.js" type="text/javascript"></script>
<?php } ?>

In the index.php file, I added this:

<div id="myImageFlow" style="width: 600px; ">
<?php
// show all images in a folder
$dirname = "/imageflow/";
$dir = opendir($dirname);
while(false != ($file = readdir($dir)))
{
   if(($file != ".") and ($file != "..") and strpos($file, 'refl_')!==0 )
   {
      echo "<img src=\"/imageflow/{$file}\" longdesc=\"/imageflow/{$file}\" alt=\"\" />\n";
   }
}
?>
</div>

The code above lists all the images in the “imageflow” folder. I rejected the files that have names starting with “refl_” because they are cache files created by ImageFlow for reflections. If I was to show them too, the reflection of reflection appeared, and so on…

I also wanted to display the images on white, to hide the slider and to open all the images in a LightBox. For this, I installed the plugin “Shadowbox JS”, an excellent plugin that allow to view images, movies, html in an shadowbox (like the lightbox). The plugin is based on the Shadowbox.js library. Then I modified the file “imageflow.js” to include the needed features:

instanceOne.init({ ImageFlowID:'myImageFlow', buttons: true, captions: false, onClick: function() { Shadowbox.open({content:    this.url, player: "img"}) }, slider: false, reflectionGET: '&bgc=ffffff', opacity: true });

This line is at the end of the file, in the function “domReady”. I included the onClick event to call for the Shadowbox.js library.

And… that was it. You can admire the result on the first page (at least for now 🙂 )

UPDATE:

I received some complaints that the ImageFlow control on the first page is slow. That was because I was loading with it high-res images, which were afterwards showed with Shadowbox. This wasn’t good at all, so I cropped and resized the images, so that now they are square and much smaller (150×150 px). I renamed them “thumb_xxxx”, where xxxx is the original name of the file. Then, in the index.php file of the theme, I updated the ImageFlow code like this:

$dirname = "/imageflow/";
$dir = opendir($dirname);
$names = array();
while(false != ($file = readdir($dir)))
{
   if(($file != ".") and ($file != "..") and strpos($file, 'thumb_')===0 )
   {
      $val['thumb'] = $file;
      $val['img'] = substr($file, 6, strlen($file));
      $names[] = $val;
    }
}

asort($names);
foreach($names as $name) {
   echo "<img src=\"//imageflow/".$name['thumb']."\" longdesc=\"/imageflow/".$name['img']."\" alt=\"\" />\n";
}

I used an array to sort the images by their filename.

The second issue was that when viewing a large image with Shadowbox, I couldn’t browse through the rest of the gallery’s images. For this, I had to modify the imageflow.js file, so that the last function in it looks like this:

domReady(function()
{
   var instanceOne = new ImageFlow();
   var myImages=new Array();

   var ImageFlowDiv = document.getElementById('myImageFlow');
   var max = ImageFlowDiv.childNodes.length;
   for(var index = 0; index < max; index++)
   {
      node = ImageFlowDiv.childNodes[index];
      if (node && node.nodeType == 1 && node.nodeName == 'IMG')
      {
         var src = node.getAttribute('src',2);
         src=src.replace("/thumb_","/");
         myImages.push({content: src, player: "img"});
      }
   }

   instanceOne.init({ ImageFlowID:'myImageFlow', buttons: true, captions: false, slider: false, reflectionGET: '&bgc=ffffff', opacity: true, aspectRatio: 2.65, startID: 5 });
   instanceOne.onClick = function() {
      var index=0;
      for(img in myImages) {
         if(myImages[img].content == this.url)
         index=parseInt(img);
      }
      Shadowbox.options.onOpen=function() {
         Shadowbox.current=index;
      }
      Shadowbox.open(myImages);
   }
});

The code now loads all the image files specified for ImageFlow, eliminates the “thumb_” prefix, and builds a gallery. Then, when opened, it identifies the image that has been clicked in ImageFlow (comparing their paths) and sets the current image to that one (so that when clicking, say, the second image, the Shadowbox gallery opens up and the second image is shown). This one was quite tricky, because I had problems finding a way to set the current image after loading a gallery in Shadowbox (I used the onOpen hook).

Oh, and for the ImageFlow to work, when using reflection the reflect2.php or reflect3.php file has to be copied in the root folder of your site!

So… this would be it 🙂

Be Sociable, Share!

• 

Filed under:
Technology, Web development by Myself