This site has been archived and you can no longer log in or post new messages. For up-to-date community resources please visit ezplatform.com

eZ Community » Forums » Setup & design » iframe in highslide
expandshrink

iframe in highslide

iframe in highslide

Thursday 25 March 2010 7:50:33 pm - 2 replies

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.

Modified on Thursday 25 March 2010 7:55:19 pm by Catherine Mollet

Sunday 21 October 2012 2:35:53 am

Go to www.highslidejs.com and download the folder that contains js,css and other files and post them to your host..

then you add html link depends what you wanna put up if you want irame add this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Highslide JS</title><script type="text/javascript" src="../highslide/highslide-with-html.js"></script><link rel="stylesheet" type="text/css" href="../highslide/highslide.css" /><script type="text/javascript">hs.graphicsDir = 'http://affam.co/highslide/graphics/';hs.outlineType = 'rounded-white';hs.wrapperClassName = 'draggable-header';         </script>
</head>
<body><div>
<!-- 3) This is how you define the link opening the iframe popup.-->
<a href="../uploadyoutubevideoform.htm" onclick="return hs.htmlExpand(this, { objectType: 'iframe',          objectWidth: '700',         objectHeight: '900' } )"> <img src="../serbia.png"></a>
</div></body></html>

if you need help pm me im no export but i managed to make it work...

Sunday 21 October 2012 2:37:50 am

sorry its www.highslide.com

expandshrink

You must be logged in to post messages in this topic!

36 542 Users on board!

Forums menu

Proudly Developed with from