NextGEN ImageFlow Portfolio

By llamabot | January 20, 2009

I recently discovered an ImageFlow plugin that has been setup to work with the NextGEN Gallery plugin. This plugin uses Java Script to create an effect similar to Apple’s coverflow. I wanted to use this plugin to show a portfolio of some of the websites I have built. I took a screenshot of all the pages I wanted to use, made a gallery in NextGEN, setup the ImageFlow plugin and put the gallery in my post.

It was pretty straightforward up until this point, but I had a few problems.

1. In the description text I wanted to display a link to the website the screenshot was taken from.

2. When I clicked on the image in the ImageFlow it displayed the image in the browser instead of going to the website the image represented.

The first problem was easily overcome. The ImageFlow plugin uses the “Alt & Title Text / Description” text associated with the image in the NextGEN gallery you have created. For each picture I added a brief title along with a hyperlink to the page. So:

Personal Blog <a href=http://theyomen.com target=”_blank”>http://theyomen.com</a>

You will notice that for the href tag I left the quotation marks out. This enabled the ImageFlow plugin to display the hyperlink properly. Unfortunately, this had an unintended consequence. Since this text in this box is used for the title tag whenever I moused over an image on the ImageFlow it would reveal all code. Ugly. To correct this I went to the plugins directory and found nextgen-imageflow/lib/functions.php. On line 102 you’ll find:

alt=”‘.apply_filters(’the_title’, $picture->description).’” title=”‘.apply_filters(’the_title’, $picture->description).’”

I changed this line to:

alt=”‘.apply_filters(’the_title’, $picture->description).’” title=”"

This eliminated the mouse over problem.

The second problem was also easily overcome. I simply eliminated the link information in the onClick statement in the java script file. The file is found at nextgen-imageflow/imageflow/imageflow.js and line 61 can be changed from:

function() { document.location = this.url; }   /* Onclick behaviour */

to:

onClick:            function() {}   /* Onclick behaviour */

This change stopped anything from happening when an image is clicked. The result is a nice coverflow method for viewing a website portfolio.

This was done using NextGEN Gallery 1.02 and NextGEN ImageFlow 1.1