Integrating JQuery + other Javascript Effects into WB Pages

[vizmotion]

Hey Chris,

Just want to say I like the effects. I don't have any use for them right now but it is great to know about them. Thanks.

VizMotion

[chris_s]

I am sharing this in case it helps someone else with the same sort of need. It may also trigger other ideas on better ways to handle this sort of thing.

I am working on a proof-of-concept for a site using WB 2.8 that will replace an existing site developed in Flash. The Flash site uses a number of different effects and I'm trying to see if I can duplicate them. As these are effects built into the pages, it isn't a matter of customizing a template. I'm sure that other people have dealt with this (even before JQuery was added into the WB distribution) but I couldn't find examples or anything suggesting a standard way to implement this sort of thing. I will share the way I have approached it.

For at least some of the effects, I suppose that someone could build a module with the effect built in and a front-end control panel to specify the parms. That could probably be done for something like a an accordion where there are multiple panels that can be opened / closed by clicking on the header. From what I can see, there isn't anything like this available yet. For some effects, it may be challenging to even use a module approach because there is a need to customize the use of the effect to the specific page design. 

I have implemented two specific types of effects so far:

• "zoom-on-hover" that provides an enlarged view of an object when you hover over it   
• "hotspot-exploded-view" where clicking on a hotspot in a graphic brings up a (smaller) popup graphic over the first one (that can be an exploded view of one part of the first graphic but could also be something else).

"
I provided a link below to my proof-of-concept site so you can see what these look like. Both effects work pretty well and the results are very similar to the Flash effect.

In the first case, I found some custom code that uses JQuery (not a plugin) that creates the effect I was looking for. In the second case, I explored a number of the JQuery lightbox plugins. I found that none of them seems to be capable of working with a <map> hotspot. I did find a non-JQuery javascript routine that could do it and I was successful in implementing that. One remaining difference is that the original uses a flash animation (for the popup) where mine uses a static graphic. I guess I still need to see if I can take it that extra step.

The implementation approach that I have used for now is to create a code section for the page. It "includes" a PHP module that does most of the real work from a folder that I created to store such modules. The included module itself includes/accesses the JQuery module and any plugins, css modules or graphics that are needed. I did some work in one of the included modules to parameterize values used by that module. The next step would be to move the setting of the parms into the code section to make the included module somewhat reusable. In this case, it is probably the short-cut version to creating a module (but that would be extra work). It may not fit within any existing standard architecture within WB but if nothing else, a small library of include modules like these for different effects (with some parms) would make it relatively easy to add some js effects to a WB page. There may be a better or more standard way and, if so, someone will probably suggest it.

My proof-of-concept site is at http://wb2.innovationsdesign.net/

Chris