call a thickbox from the xml file

michel

Profi

Beiträge: 1 153

Wohnort: ANDORRA

Beruf: TV

21

Montag, 9. November 2009, 21:01

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:

Quellcode

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

Quellcode

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

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

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »michel« (9. November 2009, 21:25)

Zum Seitenanfang

viewinz

Fortgeschrittener

Beiträge: 145

Wohnort: Wellington, New Zealand

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

22

Montag, 9. November 2009, 23:49

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!

Zum Seitenanfang

michel

Profi

Beiträge: 1 153

Wohnort: ANDORRA

Beruf: TV

23

Mittwoch, 11. November 2009, 11:15

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:

Quellcode

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

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

Quellcode

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.

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »michel« (21. November 2010, 02:26)

Zum Seitenanfang

juliorosq

Anfänger

Beiträge: 7

Wohnort: tenerife, spain

Beruf: turism

24

Dienstag, 1. Dezember 2009, 13:21

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

Zum Seitenanfang

Marty McFly

Anfänger

Beiträge: 12

25

Freitag, 23. April 2010, 11:05

Hi,
now in the version krpano-1.0.8-beta9

Zitat

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

Zitat

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

Could you help me Please Thanks

Salut *cry*

Zum Seitenanfang

michel

Profi

Beiträge: 1 153

Wohnort: ANDORRA

Beruf: TV

26

Freitag, 23. April 2010, 11:20

Hi Marty McFly,

I think is in this way ;-)

:

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

Zum Seitenanfang

Marty McFly

Anfänger

Beiträge: 12

27

Freitag, 23. April 2010, 11:37

Work perfectly you are *thumbsup*

!!! Michel
Encore merci
Salut

Zum Seitenanfang

Yomas

Fortgeschrittener

Beiträge: 190

Wohnort: Anglet, France

28

Mittwoch, 9. Juni 2010, 15:53

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

Zum Seitenanfang

Yomas

Fortgeschrittener

Beiträge: 190

Wohnort: Anglet, France

29

Donnerstag, 10. Juni 2010, 10:43

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

Zum Seitenanfang

Yomas

Fortgeschrittener

Beiträge: 190

Wohnort: Anglet, France

30

Freitag, 11. Juni 2010, 15:29

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

Zum Seitenanfang

rbudnikas

Fortgeschrittener

Beiträge: 148

31

Dienstag, 16. November 2010, 20:29

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.

Zitat

/*
* 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;

}

Zum Seitenanfang

michel

Profi

Beiträge: 1 153

Wohnort: ANDORRA

Beruf: TV

32

Samstag, 20. November 2010, 19:28

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« hat folgende Datei angehängt:

_Thickbox_Fullscreen_Workaround.zip (37,66 kB - 198 mal heruntergeladen - zuletzt: Heute, 10:55)

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »michel« (20. November 2010, 19:44)

Zum Seitenanfang

rbudnikas

Fortgeschrittener

Beiträge: 148

33

Dienstag, 23. November 2010, 01:30

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

Zum Seitenanfang

ciul

Schüler

Beiträge: 149

Wohnort: Colombia

Beruf: Creative developer guy

34

Mittwoch, 8. Dezember 2010, 18:44

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

Zum Seitenanfang

crom1

Anfänger

Beiträge: 35

35

Freitag, 17. Dezember 2010, 12:34

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

Zum Seitenanfang

Daniel25

Anfänger

Beiträge: 20

Wohnort: london

Beruf: photographer

36

Donnerstag, 6. Januar 2011, 15:13

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

	Quellcode
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

Quellcode

<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

	Quellcode
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

Zum Seitenanfang

Quellcode

Quellcode

Quellcode

Zitat

Quellcode

Quellcode

Quellcode

Problem to activate thickbox on-line

Zitat

Zitat

Quellcode

Résolu ^^

Can't get it to work.

Zitat

For easy javascript interface

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

Quellcode

Quellcode

Quellcode

Ähnliche Themen