Lightquick Web Design - High Quality, Low Cost

I have just created the JFotostack Portfolio module for Joomla 1.0 module basing it on a module originally created by Shaon Bahadur called JPhotostack. The reason I have done this is to quickly knock together a pretty portfolio tool under Joomla 1.0.15 that is easily configurable and quick to display/operate.

The resulting new JFotostack Portfolio module provides gallery functionality but with a difference - as per the original the images are shown as a series of clickable photographs stacked on top of each other. Images are easily grouped under a specific album by simply uploading images into the appropriate album folder. A maximum of ten albums can be added to the slideshow. You can enable or disable each album as you require. I have called the new version JFotostack Portfolio to draw attention to the differences between the new portfolio version and the old gallery.

What are the differences? The original was simply a very pretty image gallery but this version has been modified to provide more configuration options so you can now specify the thumbnail size, the placement, width and number of galleries shown as well as the size of the stacked images in the gallery. The module also provides a configurable pop-up when you hover over the thumbnail complete with image and you can alter the position of the navigation buttons. The latest version will also allow you to link each gallery to an internal/external page allowing the module to act as a linking portfolio as well as an image gallery.

When completed I will make it available for download on the downloads page.

You can see an example of it working on the front page of this site. It has always worked well on Firefox and IE right from the beginning but in Opera and Safari it has required some serious tweaking to get it working as the navigation buttons were displaying correctly but for some reason, disabled.

A log of head-scratching and midnight-oil-burning and I eventually found the problem, it was obscure and quite hard to find. It turns out that yet another inconsistency in the way the Webkit-based browsers interpret Javascript code meant that binding the click event to the images just wasn't working. The offending line of code is this:

$ps_slider.find('.prev').bind('click',function(){ 

Which I simply changed to this:

$ps_slider.child('.prev').bind('click',function(){ 

A really easy change to fix it but a very hard problem to find when searching amongst many lines of code, especially when the offending code is actually meant to work. The new inconsistencies that the newer webkit-based browsers are introducing, means that "us poor old web-devs" have to code and test the code on four browser types when coming up with new code. It also means that good-old solid code that has always worked, now may not work at all. The problem is you only find out as the new browsers become more popular and only when someone complains...

The Joomla 1.0.15 /Joostina version is complete now and can be downloaded here. I have also created a J1.5 version but it is 90% complete. The slider works as it should as does the linking functionality. The only thing that does not work fully so far is the pop up image. This functionality was provided by the overlib function that is not present in Joomla 1.5. The tooltip functionality that J1.5 provides does not allow an image to appear in the tooltip. Instead of the overlib I am using the javascript  mouseover event to trigger an element to appear. It is working but the pop up image is not yet following the mouse. I'll have it fixed soon but I need the time... If you are keen on having it, leave a comment below. See it in action on the frontpage here:

Comments (0)

Subscribe to this comment's feed

Name

Email

Title

Comment

smaller | bigger

Subscribe via email (registered users only)

I have read and agree to the Terms of Usage.

Add Comment