WebCenter Content & Sites Dynamic Parameter Image URLs FancyBox Fix

WebCenter Content & Sites Dynamic Parameter Image URLs FancyBox Fix

You are finally ready to add that great JQuery powered image gallery or slideshow to your site when you hit a snag – some existing JQuery plugins may not behave as you would expect with dynamic URLs for your media assets (this applies to any platform that uses URLs with arguments to request these assets). For instance, clicking on a thumbnail in an image gallery to show a larger view – may just show encoded text as if the browsed did not understand the MIME type!

After running into this issue last week in a new project, I spent a good amount of time brainstorming various workarounds, then stumbled onto a simple fix!

The FancyBox plugin can help create engaging user experiences and was used in the podcast E2.0 Workbench Podcast 5 – WebCenter Image Gallery with Content Presenter with a hardcoded the MIME type for the image as follows to get around the parameter / dynamic URL issue.

If a URL with parameters like “http://owcvm03/cs/idcplg?IdcService=GET_FILE&dID=#{node.propertyMap[‘dID’].value}&dDocName=OWCVM03_#{fn:toLowerCase(node.id.uid)}&allowInterrupt=1” was used in place of “http://owcvm03/cs/groups/public/documents/image/#{fn:toLowerCase(node.id.uid)}.jpg” the above code, you have hit this issue in the past you may have wondered if you had to change something server side or work some magic with URL encoding to get around this (the first two places I started my search).

By simply appending a “&ext=.jpg” to the end of your URL, your dynamic presentation will work as planned. The following code illustrates this for our image gallery sample

The above fix will apply equally to URLs coming from WebCenter Content, as well as WebCenter Sites.

Hope this helps to save some people time in their development!

2 comments
John Brunswick
John Brunswick

 @JurisMurziks Thanks Juris!   Do you know if that resolves the JS handling of the parameters?  The JS handling with parameterized URLs for binary assets impacts other plugins beyond FB.   I love Fancybox, but one reason that I did not use FB2 was due to the license change - http://creativecommons.org/licenses/by-nc/3.0/  - "You may not use this work for commercial purposes".  For the example I try to use ones that open with less restriction, as FB v1 was released under MIT and GPL licenses.   Cheers, John

JurisMurziks
JurisMurziks

If you would use fancybox v2 then you could simply use links like <a href=".." class="fancybox fancybox.image">