Sie sind nicht angemeldet.

1

Mittwoch, 24. April 2013, 17:32

Open external HTML pages in a lightbox window from a tour?

I am wondering if anybody can share an example for the code to be used for a hotspot by clicking on which a new window with external HTML page would open in a lightbox window?
Like for example on the site http://altbier.com.ua/walk.php?pano=3221_7&lang=1#3221_7 - if you hover a table you will see a plate. If you click on the plate there is a pop-up - a lightbox window with a form (that is external HTML page). Any help will be highly appreciated!

reza_shnia

Fortgeschrittener

Beiträge: 169

Beruf: krpano freelancer || creating ideas & coding them || krpano developer

  • Nachricht senden

2

Freitag, 26. April 2013, 06:45

you should use JQuery for this job.
1.make a function in your html page to build lightbox window.
2.call this function in krpano by this command : js( ...Javascript code... )
http://krpano.com/docu/actions/#js


sampel :
+ fist of all import FancyBox library to your html page.
http://fancybox.net/howto

+ then use this function to build lightbox window :

Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function popup()
{
	$.fancybox(
    	'YOUR-HTML-ADDRESS/FILENAME.html',
    	{
        	'width'            	: '100%',
        	'height'        	: '100%',
        	'autoScale'     	: false,
        	'transitionIn'    	: 'none',
        	'transitionOut'    	: 'none',
        	'type'            	: 'iframe'
    	}
	);
};


+ and call the popup function in krpano by this code :

Quellcode

1
onclick="js( popup() );"


NOTE:
Flashplayer Notes - this action requires the External Interface of the Flashplayer! This means the action will
work offline/locally only when the security settings of the Flashplayer were adjusted.
See here for more detatils - Local / Offline Usage.

3

Montag, 21. April 2014, 01:53

Hi thanks, i have try to open my page with the testing server of krpano, but the fancybox is not working.

In html page i have added this code:
########################################################
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
function popup()
{
$.fancybox(
'http://www.mywebsite.it',
{
'width' : '100%',
'height' : '100%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
}
);
};
</script>
</head>
<body>
########################################################

in xml file this code:

<hotspot name="q2" url="JP/JP_info-icon.png" ath="-42.032" atv="31.684" scale="1" onhover="showtext(Info sul Virtual Tour, style1);" onclick="js( popup() );" />

#######################################################

Where is the problem?
Thanks.