call a thickbox from the xml file

michel

Professional

Posts: 1,151

Location: ANDORRA

Occupation: TV

21

Monday, November 9th 2009, 9:01pm

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:

Source code

<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:

Source 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:

	Source code
1	so.addParam("wmode","opaque");

This post has been edited 2 times, last edit by "michel" (Nov 9th 2009, 9:25pm)

Go to the top of the page

viewinz

Intermediate

Posts: 145

Location: Wellington, New Zealand

Occupation: Trying to build an entire walkthrough of NZ for tourists

22

Monday, November 9th 2009, 11:49pm

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!

Go to the top of the page

michel

Professional

Posts: 1,151

Location: ANDORRA

Occupation: TV

23

Wednesday, November 11th 2009, 11:15am

Hi viewinz,

Quoted

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:

Source code

/*
 * Thickbox 3.1 - One Box To Rule Them All.
 * By Cody Lindley (http://www.codylindley.com)
 * Copyright (c) 2007 cody lindley
 * Licensed under the MIT License: http://www.opensource.org/licenses/mit-license.php
*/
		  
var tb_pathToImage = "thickbox/images/loadingAnimation.gif";

/***** BEGINNING - Code added to switch krpano to fullscreen or normalscreen *****/

var krpano_state_FS;
	
	function krpano() 	{
		return document.getElementById("krpanoSWFObject");
	}
	
	function switch_Krpano_FS() { 
		krpano().call("switch(fullscreen)");
	}

	function is_Krpano_FS() { 	
		krpano_state_FS = krpano().get("fullscreen"); 
		if ( krpano_state_FS == true ) { krpano().call("switch(fullscreen);");  }
	}

	function was_Krpano_FS() { 
		if ( krpano_state_FS == true ) { setTimeout ('krpano().call("switch(fullscreen);");', 1000);  } 
		//if ( krpano_state_FS == true ) { krpano().call("delayedcall(1,switch(fullscreen));");  }	
	}
/***** END - Code added to switch krpano to fullscreen or normalscreen *****/
.............

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

	Source code
1 2 3 4 5	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:

Source code

function tb_remove() {
	
 	$("#TB_imageOff").unbind("click");
	$("#TB_closeWindowButton").unbind("click");
	$("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();});
	$("#TB_load").remove();
	if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
		$("body","html").css({height: "auto", width: "auto"});
		$("html").css("overflow","");
	}
	document.onkeydown = "";
	document.onkeyup = "";	

	was_Krpano_FS();  // added for when krpano is FullScreen
	return false;
}

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.

This post has been edited 1 times, last edit by "michel" (Nov 21st 2010, 2:26am)

Go to the top of the page

juliorosq

Beginner

Posts: 7

Location: tenerife, spain

Occupation: turism

24

Tuesday, December 1st 2009, 1:21pm

Problem to activate thickbox on-line

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

Go to the top of the page

Marty McFly

Beginner

Posts: 12

25

Friday, April 23rd 2010, 11:05am

Hi,
now in the version krpano-1.0.8-beta9

Quoted

<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", "krpano.xml");
swf.embed("krpanoDIV");

// ]]>
</script>

where i put ----> *blink*

Quoted

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

Could you help me Please Thanks

Salut *cry*

Go to the top of the page

michel

Professional

Posts: 1,151

Location: ANDORRA

Occupation: TV

26

Friday, April 23rd 2010, 11:20am

Hi Marty McFly,

I think is in this way ;-)

:

	Source code
1 2 3 4	var swf = createswf("krpano.swf", "krpanoSWFObject", "100%", "100%"); swf.addVariable("xml", "krpano.xml"); swf.addParam("wmode","opaque"); swf.embed("krpanoDIV");

SAlut.

Go to the top of the page

Marty McFly

Beginner

Posts: 12

27

Friday, April 23rd 2010, 11:37am

Work perfectly you are *thumbsup*

!!! Michel
Encore merci
Salut

Go to the top of the page

Yomas

Intermediate

Posts: 190

Location: Anglet, France

28

Wednesday, June 9th 2010, 3:53pm

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:



<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);" />

....



<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>

<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> 
</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"); 
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 !

My website: www.eboovisite.com, See me also on www.Viewat.com, Facebook and Twitter

Go to the top of the page

Yomas

Intermediate

Posts: 190

Location: Anglet, France

29

Thursday, June 10th 2010, 10:43am

Résolu ^^

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&TB_iframe=true&height=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!

My website: www.eboovisite.com, See me also on www.Viewat.com, Facebook and Twitter

Go to the top of the page

Yomas

Intermediate

Posts: 190

Location: Anglet, France

30

Friday, June 11th 2010, 3:29pm

Hi again ^^

What an nag am I, you should think ^^

I have now another problem showing pdfs with thickbox ^^
Works fine on chrome, but doesn't on other browsers :'(

An idea ?

Working on it, I let you know if I get a solution ^^

See ya !!

My website: www.eboovisite.com, See me also on www.Viewat.com, Facebook and Twitter

Go to the top of the page

rbudnikas

Intermediate

Posts: 142

31

Tuesday, November 16th 2010, 8:29pm

Can't get it to work.

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.

Quoted

/*
* Thickbox 3.1 - One Box To Rule Them All.
* By Cody Lindley (http://www.codylindley.com)
* Copyright (c) 2007 cody lindley
* Licensed under the MIT License: http://www.opensource.org/licenses/mit-license.php
*/

var tb_pathToImage = "images/loadingAnimation.gif";

/***** BEGINNING - Code added to switch krpano to fullscreen or normalscreen *****/

var krpano_state_FS;

function krpano() {
return document.getElementById("krpanoSWFObject");
}

function switch_Krpano_FS() {
krpano().call("switch(fullscreen)");
}

function is_Krpano_FS() {
krpano_state_FS = krpano().get("fullscreen");
if ( krpano_state_FS == true ) { krpano().call("switch(fullscreen);"); }
}

function was_Krpano_FS() {
if ( krpano_state_FS == true ) { setTimeout ('krpano().call("switch(fullscreen);");', 1000); }
//if ( krpano_state_FS == true ) { krpano().call("delayedcall(1,switch(fullscreen));"); }
}
/***** END - Code added to switch krpano to fullscreen or normalscreen *****/

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

try {
if (typeof document.body.style.maxHeight === "undefined") {//if IE 6
$("body","html").css({height: "100%", width: "100%"});
$("html").css("overflow","hidden");
if (document.getElementById("TB_HideSelect") === null) {//iframe to hide select elements in ie6
$("body").append("<iframe id='TB_HideSelect'></iframe><div id='TB_overlay'></div><div id='TB_window'></div>");
$("#TB_overlay").click(tb_remove);
}
}else{//all others
if(document.getElementById("TB_overlay") === null){
$("body").append("<div id='TB_overlay'></div><div id='TB_window'></div>");
$("#TB_overlay").click(tb_remove);
}
}

function tb_remove() {
$("#TB_imageOff").unbind("click");
$("#TB_closeWindowButton").unbind("click");
$("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();});
$("#TB_load").remove();
if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
$("body","html").css({height: "auto", width: "auto"});
$("html").css("overflow","");
}
document.onkeydown = "";
document.onkeyup = "";
return false;

was_Krpano_FS(); // added for when krpano is FullScreen
return false;

}

Go to the top of the page

michel

Professional

Posts: 1,151

Location: ANDORRA

Occupation: TV

32

Saturday, November 20th 2010, 7:28pm

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.

michel has attached the following file:

_Thickbox_Fullscreen_Workaround.zip (37.66 kB - 94 times downloaded - latest: Apr 16th 2013, 12:15pm)

This post has been edited 1 times, last edit by "michel" (Nov 20th 2010, 7:44pm)

Go to the top of the page

rbudnikas

Intermediate

Posts: 142

33

Tuesday, November 23rd 2010, 1:30am

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

Go to the top of the page

ciul

Trainee

Posts: 144

Location: Colombia

Occupation: Creative developer guy

34

Wednesday, December 8th 2010, 6:44pm

For easy javascript interface

Hi pals.

For hose interested on an easy to use interface between javascript and Krpano, you may see what I'm creating, the MooKrpano script also posted here.

http://www.krpano.com/forum/wbb/index.ph…d&threadID=3953

Go to the top of the page

crom1

Beginner

Posts: 32

35

Friday, December 17th 2010, 12:34pm

hello
when i used script thickbox the mousewheel not work .
how to reactivate it
thank you

Go to the top of the page

Daniel25

Beginner

Posts: 20

Location: london

Occupation: photographer

36

Thursday, January 6th 2011, 3:13pm

xml plugin seams not to work?????????

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

	Source code
1 2 3	<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

Source 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

	Source code
1	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

Go to the top of the page

Source code

Source code

Source code

Quoted

Source code

Source code

Source code

Problem to activate thickbox on-line

Quoted

Quoted

Source code

Résolu ^^

Can't get it to work.

Quoted

For easy javascript interface

xml plugin seams not to work?????????

Source code

Source code

Source code

Similar threads