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!