iframe in highslide

Thursday 25 March 2010 11:50:33 am

Hi,

I would like to put an iframe in a highslide. I think I'm very near to find the solution, but the frame still doesn't pop-up. Let me explain what I did.

First, I went to http://highslide.com/editor/ to have a nice configuration of what I wanted. I dowloaded it to my computer, and in pure html, everything is fine.

In extension/my_extention/design/my_design/javascript, I copied highslide-with-html.js and highslide.config.js. In extension/my_extention/design/my_design/stylesheets, I copied highslide.css and the folder named gaphics with all graphic element for HighSlide.

In extension/my_extention/design/my_design/override/embed, I created external_page.tpl with

{* External page (iframe) - Embed view *}
{section name=JavaScript}    
<script language="JavaScript" type="text/javascript" 
src={concat( 'javascript/highslide-with-html.js')|ezdesign}></script>
<script language="JavaScript" type="text/javascript" 
src={concat( 'javascript/highslide.config.js')|ezdesign}></script>
{/section}
<div class="content-view-embed">
<h2>{$object.data_map.title.content|wash}</h2>
<p>
<a href="{$object.data_map.url.content}" 
{literal}onclick="return hs.htmlExpand(this, 
{ objectType: 'iframe', width: '800' } ){/literal}">
Iframe</a><span> 
</span></p>        
</div>

(of course, no line return inside the js, that's just for presentation here)

Content of highslide.config.js is (exept language strings, not very intersting here)

hs.graphicsDir = '/extension/my_extention/design/my_design/stylesheets/graphics/';
hs.showCredits = false;
hs.creditsPosition = 'bottom left';
hs.outlineType = 'custom';
hs.registerOverlay({html: '<div class="closebutton" onclick="return hs.close(this)" 
title="Fermer"></div>', position: 'top right', useOnHtml: true, 
fade: 2 // fading the semi-transparent overlay looks bad in IE});

Update of the css list, update fo the override.ini, creation of a new class in the backend, insertion of a new object with this class on a test page, everything looks great.

Testing the page, code seems OK :

<div class="content-view-embed">
<h2>Google</h2>
<script language="JavaScript" type="text/javascript" 
src="/my_site/extension/my_extension/design/my_design/javascript/highslide-with-html.js">
</script>
<script language="JavaScript" type="text/javascript" 
src="/my_site/extension/my_extension/design/my_design/javascript/highslide.config.js">
</script>
<p><a href="http://www.google.com" onclick="return hs.htmlExpand(this, 
{ objectType: 'iframe', width: '800' } )">Iframe</a></p>
</div>

But when I'm clicking on the link, only "Loading" is showing, the highslide doesn't pop up. All files are loaded, js and css, and checking with Firebug, it seems that something is getting wrong and that table initialization is freezed somewhere.

Look at the normal condition here : http://img691.imageshack.us/img691/3397/normalcondition.png

Look at what I'm getting in eZ : http://img689.imageshack.us/img689/296/withez.png

Does someone ever tried to put html highslide in eZ ? Does anyone have an idea of what is going on and where I'm mistaking ?

Thank you in advance.