WOWslider – Cool way of displaying images on a webpage

Have you ever seen a webpage which contained a banner or a picture which either scrolls or slides from one side to the other and thought to yourself ‘how cool is that’? Well me too. So having been asked to include a few photos of the recent The Missing Link conference, I thought to myself “let’s see if I can do something similar” or dare I say it even better. Surely not… better….. I hear you say.

Well after spending three whole time consuming minutes on Google using the term “sliders”,  I stumbled across a free (well for non-commercial use anyway) program called WOWslider from a company surprising called WOWSlider.com – pretty lucky that the company has the same name as the product! What are the chances of that happening?

The software was downloaded from their website and surprising installed onto my PC – without the aid of CICT assistance – previously I had ADMIN privileges but since having a new PC that luxury had been long withdrawn and I dreaded the prospect of having to enlist the help of our IT professionals to simply evaluate whether the software would fulfil my self-imposed brief. I need not have feared the worst as for some strange reason I had managed to get round any such restriction and without sounding smug the installation was successful. Little did I know the fun was about to begin…or the nightmare to commence! 

On opening the program you are faced with a rather amateur looking control panel:

Having said that the lack of options at the top ensure that the user has less to worry about rather than having numerous button/options which would only confuse users perhaps.

While the program supports ‘Drag & Drop’ functionality I preferred to use the + button and merely browsed to the folder in which the images were stored and selected them from there. Once loaded in the program the control panel looked like this:

You can add a title and description if need be. By adding this information you can display it on the actual image (see bottom left below) while it is being shown – however I decided against this as I didn’t have enough descriptions to place upon each image.

Once the images are loaded by clicking on the spanner icon you can decide on a number of display options (auto play once loaded, descriptions to appear, thumbnail images to appear, navigational buttons to appear). All fairly straightforward by clicking in boxes to select the feature concerned.

The images icon is where all the magic takes place. Or were you can get your hands dirty and get “under the bonnet” so to speak. There are various effects too numerous to mention. Every individual will like different effects so you can let your creative juices run wild….well within the constraints of the options that is. I adopted a more conservative approach and selected a simple slide in and out effect. But I was tempted to incorporate an effect called “Kenburns” – slow zoom in while slight movement to one side.  Very arty I think.

The final part of this process is to create the finished WOWslider and where to store it. To do this the aptly named Publish icon is chosen:

The above panel is displayed and by selecting the ‘Publish to folder’ option you can browse to a location on your PC and insert a name of the file.

You can even create a WordPress friendly version which will sit on our blog – however when I went to do this our WordPress interface didn’t show the option to select a “Plug-in” and hence I have been unable to produce this. 

Here is a link to the one I created and you never know it may see the light of day again in a different disguise on one of our webpages.

While the creation is the first part, the real challenge starts when you try to recreate the same path structure on the web server so the feature will actual run and display all the chosen images once selected. Not a mean task as that structure has to be retained precisely. The creation of new directories on the webserver took place and once all relevant files had been uploaded to the correct location I was ready to enjoy the fruits of my labour…..not.  However nothing worked first time of testing. After a sleepless night and much hair pulling (that explains a lack of my hair coverage then) the feature worked.

The joys of formatting  the page was undertaken to ensure the feature would display properly (Alignment issues. Thanks to Lee for the testing) and I included a border round it to help make it easier on the eye. Hooray it worked and after a long three days of blood, sweat and tears…..not to mention less hair, the first WOWslider had been delivered to a proud father. Yes it was a difficult birth and the initial parenting experience with me trying to coax it to run first time was stressful to say the least. However those first few moments when it took its first tentative steps in the HTML world I had tears in my eye….or was that my bad eye watering again.

Since then I can report that father and WOWslider are doing well. Now is that a ‘twinkle’ in the eye of father again….stay tuned for further ‘off-spring’ from the daddy of the eLibrary Team.

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s