call a thickbox from the xml file

  • Hi viewinz,

    Here what I get after some "scratching the head"...

    • you must download the jQuery.js library , the thickbox.js , the ThickBox.css, and the loading graphic (loadingAnimation.gif)... All this can be found here: http://jquery.com/demo/thickbox/ in the download part.
    • Into your html code, between <head>add this code:
      HTML
      <html>
      <head>
      <title>BlaBlaTitle</title>
      <script type="text/javascript" src="jquery.js"></script> 
      <script type="text/javascript" src="thickbox.js"></script>
      <style type="text/css" media="all">@import "thickbox.css";</style>
      </head>
      .....

      Be aware to give the correct path...

    • Into your xml, add a plugin button for example that makes the call to open the iframe:
      Code
      <plugin name="thickbox_button" keep="true" style="buttonstyle"
        html="[p]load thickbox[/p]"
        align="bottom" x="0" y="25"
        onclick="js(tb_show(A_Title_For_The_iFrame,krpano.com?keepThis=true&TB_iframe=true&height=550&width=800));"
        />

      note the url query ?keepThis=true&TB_iframe=true&height=550&width=800.. this is an important part... without this the thickbox does not display any content... you can change the height and width as you needs.


    For more references look into the thickbox page the following parts:

    * Download:
    * How to Implement ThickBox:
    * Examples: --> iFramed Content

    Hope this can help.

    SAlut.

    edited: I have forgotten... do not forget to add this flash parameter:

    Code
    so.addParam("wmode","opaque");

    2 Mal editiert, zuletzt von michel (9. November 2009 um 21:25)

  • Hi Michel,

    Thanks for that. I had got it working and forgot to update this post.

    The firefox problem was caused by an incorrect html doctype, which is worth noting. The other problem I was having that I was trying to get it to load over flash in fullscreen which it transpires, is not possible!

  • Hi viewinz,

    Zitat

    The other problem I was having that I was trying to get it to load over flash in fullscreen which it transpires, is not possible!

    I have tried about this... and you are right... It is not possible to call a thickbox when we are in Fullscreen...
    In fact the call to a thickbox is executed... if we come back to NormalScreen, here is the thickbox ... But it can not be displayed inside the Fullscreen...
    So, I was thinking on a way to return back to NormalScreen when we call a thickbox from Fullscreen, and return back to Fullscreen when we close the thickbox ...
    I have found a way to do the first thing *smile* , but I have problems in doing the second thing *sad* ...

    Here is how I do: inside the thickbox.js code I have added the following code at the beginning:


    Added a call to a is_Krpano_FS(); function inside the tb_show() function:

    Code
    function tb_show(caption, url, imageGroup) {//function called when the user clicks on a thickbox link
    
    
    	is_Krpano_FS();  // added for when krpano is FullScreen
    ........
    }


    and added a call to a was_Krpano_FS(); function inside the tb_remove() function:


    With this code, when we make a call to a thickbox from Krpano in Fullscreen, Krpano switch to normal screen and the thickbox is displayed *smile* ...
    But, when we close the thickbox, Krpano does not switch back to Fullscreen... The java console return this error:
    uncaught exception: Error calling method on NPObject! [plugin exception: Error in Actionscript. Use a try/catch block to find error.].
    I do not know what it mean *sad* ... At first I was thinking that the tb_remove() must have some time to be executed, so I added a setTimeout to the krpano().call("switch(fullscreen);") but this not solve the problem... I do not know how to do it works *confused* ...

    At least, the first part works and makes 'possible' the call to a thickbox from Krpano in Fullscreen...

    If some one can solve the second part *rolleyes* ...

    Edited: After thinking, return back to fullscreem must be impossible due to security limitation of flash...
    See here for a workaround from within Krpano.

    SAlut.

    Einmal editiert, zuletzt von michel (21. November 2010 um 02:26)

  • Hi

    Does anyone have problems when thickbox is on line?. i got it working on local, got it working on a server at home, but when i try to put it on server for client does not open the thickbox.

    I have check the permitions 777 for js files, but still not working.

    Regards

  • Hi,
    now in the version krpano-1.0.8-beta9

    where i put ----> *blink*

    Zitat

    so.addParam("wmode","opaque");

    Could you help me Please Thanks

    Salut *cry*

  • Hi Marty McFly,

    I think is in this way *wink* :

    Code
    var swf = createswf("krpano.swf", "krpanoSWFObject", "100%", "100%");
    swf.addVariable("xml", "krpano.xml");
    swf.addParam("wmode","opaque");
    swf.embed("krpanoDIV");

    SAlut.

  • hi guys !!

    I'm trying to use the shadowbox in my tour, and I'm just taking it to almost work ^^ lol !

    I'd like to launch shadowbox from a <a href></a> link.

    here is my code:

    <!-- Here is my buton -->


    <plugin name="info"
    align="top"
    x="-72"
    y="10"
    style="button"
    crop="0|0|36|32"
    onovercrop="0|32|36|32"
    onhover="showtext(Informations, boutonstyle);"
    visible="true"
    handcursor="false"
    onclick="action(show_text);" />

    ....

    <!-- Here is my html text -->


    <data name="html1">

    <br />
    <h2>Villa Contemporaine - 800 000€</h2>
    <br />
    <ul>
    <li>Commune : <a href="http://www.arcangues.fr/">Arcangues</a></li>
    <li>Surface Habitable : 220m²</li>
    <li>Surface Foncière : 3 200m²</li>
    </ul>
    <br />
    <p>
    <b><a href="event:action(hide_text);">Fermer la fenêtre</a></b>
    </p>
    <br />

    </data>


    My html code :


    <html>
    <head>
    <title>krpano.com - sejour</title>
    <!-- Here is my shadowbox rel -->
    <link rel="stylesheet" type="text/css" href="shadowbox-3.0.3/shadowbox.css">
    <script type="text/javascript" src="shadowbox-3.0.3/shadowbox.js"></script>
    <script type="text/javascript">
    Shadowbox.init();
    </script>
    </head>

    <body>
    <div>
    <a rel="shadowbox" href="http://www.arcangues.fr/accueil.php" >arcangues</a> <!--This works well -->
    </div>
    <div id="krpanoDIV">
    <noscript><table width="100%" height="100%"><tr valign="middle"><td><center>ERROR:<br><br>Javascript not activated<br><br></center></td></tr></table></noscript>
    </div>

    <script type="text/javascript" src="swfkrpano.js"></script>

    <script type="text/javascript">
    // <![CDATA[

    var swf = createswf("krpano.swf", "krpanoSWFObject", "100%", "100%");
    swf.addVariable("xml", "defaultskin.xml");
    swf.addParam("wmode","opaque"); <!-- This is for overlaying the tour-->
    swf.embed("krpanoDIV");

    // ]]>
    </script>
    </body>
    </html>
    I've tried to change in xml code this:

    onclick="action(show_text);"
    by
    onclick="js(Shadowbox.open(http://www.arcangues.fr/));"


    This is openning the shadowbox but doesn't display the html page

    But at least what i'd like to get is on the
    <a href="http://www.arcangues.fr/">Arcangues</a> in the xml

    work the same as:

    <a href="js(Shadowbox.open(http://www.arcangues.fr/));">Arcangues</a>


    Is this possible?
    Cause this second way doesn't opers anything :'(

    Thanks in advance for tips ^^

    Best regards !

  • Hi !!
    I chose the thickbox at least cause it works now,
    next step is to use lightbox, fancybox or any other box ^^

    I've found a solution to my problem:

    <style name="button" url="%SWFPATH%/images/boutons.png"
    keep="true"
    />
    <plugin name="info" style="button" onhover="showtext(Informations, boutonstyle);" visible="true"
    handcursor="false" onclick="action(show_text);" />

    <data name="html1">
    <br />
    <h2>Villa Contemporaine - 800 000€</h2>
    <br />
    <ul>
    My problem here is that I wasn't able to use onclick="js(tb_show(Site de la mairie, http://www.arcangues.fr?keepThis=true&TB_iframe=true&height=500&width=1000));" cause my buton launches first the action(show_text);

    <li>Commune : <a href="event:action(open_thickbox);">arcangues</a></li>
    <li>Surface Habitable : 220m²</li>
    <li>Surface Foncière : 3 200m²</li>
    </ul>
    <br />
    <p>
    <b><a href="event:action(hide_text);">Fermer la fenêtre</a></b>
    </p>
    <br />

    </data>

    <action name="open_thickbox">
    js(tb_show(Site de la mairie,http://www.arcangues.fr?keepThis=true&…=500&width=1000));
    </action>

    <plugin name="text1"
    url="%SWFPATH%/plugins/textfield.swf"
    html="data:html1"
    css="data:css1"
    keep="true"
    visible="false"
    width="250"
    height="200"
    backgroundcolor="0x3b3b3b"
    roundedge="5"
    shadow="4"
    borderwidth="0"
    glow="4"
    align="center"
    x="0"
    y="0"
    autosize="center"
    />


    <action name="show_text">
    set(plugin[text1].alpha,0);
    set(plugin[text1].textblur,15);
    set(plugin[text1].blur,15);
    set(plugin[text1].visible,true);
    tween(plugin[text1].alpha,1,0.3);
    tween(plugin[text1].textblur,0,0.3);
    tween(plugin[text1].blur,0,0.3);
    </action>

    <action name="hide_text">
    tween(plugin[text1].alpha,0,0.3,null,set(plugin[text1].visible,false));
    tween(plugin[text1].textblur,20,0.3);
    tween(plugin[text1].blur,20,0.3);
    </action>

    By creating an action I was able to make the a href linkable with the thickbox ^^

    Hope it could help!

    See you!

  • Hello, Could some please look at this and let me know if I am missing something. I'm going based on the example provided. I've only included the pertinent information. Thanks in advance.

  • Hi,

    Do not use this code... It was not a good attempt to modify the source to reach the goal... Instead is better to do the stuff inside Krpano itself...
    The problem:
    Thickbox (and other boxes) can not be displayed over Krpano when it is in Fullscreen... In fact, the box pops up but behind Krpano...
    Solution:
    Before calling a Thickbox, check if is Krpano Fullscreen?

    • true: set Krpano to Normalscreen, show the Thickbox , after closing Thickbox ask for going back to Fullscreem or not.
    • false: show the Thickbox.

    Following, an attached zip file example using Thickbox... After downloading, copy the folder _Thickbox_Fullscreen inside the krpano-1.0.8.12-2010-11-09\examples\xml-usage folder...

    Hope this help...

    SAlut.

  • Hi Michel,

    Thanks for your assistance. Interestingly as you know I'm not a programmer but found out the very hard way that this is simply an issue with any type of popup box and flash fullscreen. Even though lacking in the development department I am actually getting some where with it. Thing was I got thickbox and greybox to work and will probably go with greybox as it is still supported.

    With greybox I have setup an action and prior to opening the greybox it returns the fullscreen to normal screen. If I can make a similar call using the info you provided I should be able to go back to fullscreen when the greybox is closed. Although not perfect it will suffice for now.

    I'm travelling on business and when I get back I will post what I have learned so that all can see it. Ultimately I would love to see a solution from Klaus to do it correctly within krpano using something like a textfield.swf

    Thanks again.

    Robert

  • Hi Michel, and all of you out there,

    I'm trying to implement the thickbox code sample to my tour but I cannot manage to make it work.

    I did download all the css and js script from the web site I have added this code into tp the heas of my html file

    Code
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript" src="thickbox.js"></script>
    <style type="text/css" media="all">@import "thickbox.css";</style>

    and also the following code to the xml file

    Code
    <plugin name="thickbox_button" keep="true" style="buttonstyle"
      html="[p]load thickbox[/p]"
      align="bottom" x="0" y="25"
    
    
      onclick="js(tb_show(A_Title_For_The_iFrame,krpano.com?keepThis=true&TB_iframe=true&height=550&width=800));"
    />

    I did check that the paths are ok now I have 2 big problem the first one is where shall I put the

    Code
    so.addParam("wmode","opaque");

    part of the code

    and second when I add the plugin in the xml file the onclick line is marked red telling me that there is a problem.

    off course I'm lost.

    Does any one knows where I'm wrong?

    Thanks

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!