You are not logged in.

tour in lightbox

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

servaas

Intermediate

  • "servaas" started this thread

Posts: 218

Location: Belgium

  • Send private message

1

Tuesday, January 11th 2011, 6:13pm

tour in lightbox

Hello all,

On this link you can see some pictures. When you click on a picture they appear 'in front' of the page.

Does anyone know how I can insert a virtual tour instead of the big pictures ?
It must something with a simple code I suppose but I can't find it...

Thanks for you help!
=servaas=
VAN BELLE IMAGE B3D

VN2009

Professional

Posts: 1,336

Location: Duluth MN

  • Send private message

2

Tuesday, January 11th 2011, 10:14pm

lightbox only does photos. you will have to use thickbox or another alternative.

From Lightbox website ---

"Can I display flash, video, or other content using the script?
Sorry, photos only. For other content, google for Lightbox modifications or try an alternative script such as Cody Lindley's ThickBox."

servaas

Intermediate

  • "servaas" started this thread

Posts: 218

Location: Belgium

  • Send private message

3

Tuesday, January 11th 2011, 10:21pm

Thanks for this and sorry to be lazy ... :-)

Cheers,
Servaas
VAN BELLE IMAGE B3D

Dr. Schneckem

Trainee

Posts: 162

  • Send private message

4

Wednesday, January 12th 2011, 11:14am

It works with Lightbox4ward, have a look at my website: http://panoptikum-berlin.de/index.php/panoramen.html

I've done this via my CMS, so I don't know any code. But it has to be an .swf file, so it won't work on mobile devices.
0100011101101100011001010110100101100011 0110100000100000011010110110110001100001 0111010001110011011000110110100001110100 0110010101110100001011000010000001001010 0111010101101110011001110110010100101110 0010000001000101011000110110100001110100 0010000001101010011001010111010001111010 0111010000101110

servaas

Intermediate

  • "servaas" started this thread

Posts: 218

Location: Belgium

  • Send private message

5

Wednesday, January 12th 2011, 5:31pm

Hello both,

Thanks for your advice !
In the meanwhile I had found the solution. http://colorpowered.com/colorbox/
You can check it on my site. (GOLDKUSTE)

Cheers,
=servaas=
VAN BELLE IMAGE B3D

sigmadfzb

Beginner

Posts: 11

  • Send private message

6

Tuesday, March 8th 2011, 2:45pm

nice site, i love it!

Tuur

Sage

Posts: 3,831

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

7

Tuesday, March 8th 2011, 3:02pm

Great!

Thanx for the tip!

Tuur *thumbsup*
https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos : https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Sam Rohn

Trainee

Posts: 110

Location: Brooklyn, New York

Occupation: 360° VR Photographer

  • Send private message

8

Tuesday, March 8th 2011, 10:25pm

somewhat dated list of lightbox clones here -

http://planetozh.com/projects/lightbox-clones/

many support swf, iframe, etc

sam
Sam Rohn :: 360° Panoramic Photography :: Location Scout :: New York City :: www.samrohn.com

PanoPress :: WordPress Plugin for 360° Panoramas in Flash & HTML5 :: www.panopress.org

mindlessboss

Professional

Posts: 1,082

Location: Russia, Kaliningrad

  • Send private message

9

Wednesday, March 9th 2011, 2:11am

Look at this, http://fancybox.net/ good tool
VRAP - desktop VR content player based on krpano.
Common tasks in one place in one click! Discussion thread
DOWNLOAD for MAC
DOWNLOAD for WIN

Krx

Beginner

Posts: 7

  • Send private message

10

Monday, March 21st 2011, 11:37am

Hello

You can also use shadowbox like I used it here in combo with google map.

606r

Beginner

Posts: 35

Occupation: Freelance

  • Send private message

11

Wednesday, April 13th 2011, 10:27pm

I spent some time with Fancybox(1 hour ;)) and it works great for me.
This might be helpful in this particular case(site full of pano)

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html>
<head>
<title>fsdfdsfs</title>
<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.easing-1.3.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script>
$(document).ready(function() {
$("a.iframe").fancybox({
'width' : 1000,
'height' : 500,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe' 
});
$("a.singleImage").fancybox({  

});
});
</script>
</head>
<body>
<a class="iframe" href="pano/1/index.html">
<img src="images/1.jpg" height="100" width="200"/>
</a>
<a class="singleImage" href="images/2.jpg">
<img src="images/2.jpg" height="100" width="200"/>
</a>
</body>
</html>


mindlessboss - Спасибо!

VN2011

Professional

Posts: 1,336

Location: Duluth MN

  • Send private message

12

Wednesday, April 13th 2011, 10:48pm

Quoted from "Krx"

Hello

You can also use shadowbox like I used it here in combo with google map.


krx have you tried to use % instead of pixels? on my 22" monitor the window is realtivly small. on 1024x768 it is right so must have created the windows size for the smallest monitor. using % you could go to 80% and 80% and it would fill out even larger monitors. jsut a thought.

Daniel25

Beginner

Posts: 20

Location: london

Occupation: photographer

  • Send private message

13

Friday, January 25th 2013, 1:00pm

PROBLEM CALLING THE i FRAME FROM THE XML?

Hi all,

I have manage to create a blinking hot spot for a picture that hangs on a wall in my virtual tour.

I can click it and it will open above my tour. so far so good.
I'm trying to make this photo to be opened in fancybox......

I have wrote my Html like in the sample of "606r" (sample code couple of entry above)

Still there must be something wrong with my code.
Could some one look at it?

Now if I take away from the Html code the tour.js, then all I see from the browser is the foto.pg and once clicked it will open in a fancybox way..... cool but how do I make this happen together with my Virtual tour?

It seams that my XML file is not calling the I frame function correctly and it is overwritten buy some other parameter.....

I hope this make sense to you *smile* *smile* *smile*

Here below is my code.

Thanks

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html>
<head>
	<title>me</title>
	<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<style>
		@media only screen and (min-device-width: 800px) { html { overflow:hidden; } }
		html { height:100%; }
		body { height:100%; overflow: hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }
		a{ color:#AAAAAA; text-decoration:underline; }
		a:hover{ color:#FFFFFF; text-decoration:underline; }
	</style>
	
	
	<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.easing-1.3.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />

<script>

$(document).ready(function() {
$("a.iframe").fancybox({
'width' : 1000,
'height' : 500,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe' 
});
$("a.singleImage").fancybox({  

});
});
</script>


</head>
<body>

<script src="tour.js"></script>

<div id="pano" style="width:100%; height:100%;">
	<noscript><table style="width:100%;height:100%;"><tr style="valign:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
	<script>
		embedpano({swf:"tour.swf", xml:"tour.xml", target:"pano", html5:"auto", passQueryParameters:true});
	</script>
</div>


<a class="singleImage" href="foto.jpg">
<img src="foto.jpg" height="100" width="200"/>
</a>

</body>
</html>


and here below my XML

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

<krpano version="1.0.8.15" title="my place" onstart="startup();">

	<include url="skin/vtourskin.xml" />

	<!-- set skin settings: bingmaps? gyro? -->
	<skin_settings bingmaps="false" bingmaps_key=""
	               gyro="true"
	               />

	<!-- set optional skin logo url -->
	<layer name="skin_logo" url="" scale="0.25" opened_onclick="openurl('...',_blank);" />


	<action name="startup">
		if(startscene === null, copy(startscene,scene[0].name));
		loadscene(get(startscene), null, MERGE);
	</action>
	
	<action name="calc_pos_from_hfov_yaw_pitch_roll">
  div(hfov,%1,57.295779);
  div(yaw,%2,-57.295779);
  div(pitch,%3,57.295779);
  div(roll,%4,-57.295779);
  mul(hfov,0.5);Math.tan(hfov);mul(width,hfov,1000);set(height,'prop');
  Math.cos(ch,yaw);Math.sin(sh,yaw);
  Math.cos(ca,pitch);Math.sin(sa,pitch);
  Math.cos(cb,roll);Math.sin(sb,roll);
  mul(m0,ca,ch);
  mul(tmp,cb,sa);mul(tmp,ch);mul(tmp2,sb,sh);add(m3,tmp,tmp2);
  mul(m4,cb,ca);
  mul(tmp,cb,sa);mul(tmp,sh);mul(tmp2,sb,ch);sub(m5n,tmp,tmp2);mul(m5n,-1);
  mul(tmp,sb,sa);mul(tmp,ch);mul(tmp2,cb,sh);sub(m6n,tmp,tmp2);mul(m6n,-1);
  Math.atan2(yaw,m6n,m0);
  Math.atan2(roll,m5n,m4);
  Math.asin(pitch,m3);
  mul(ath,yaw,57.295779);
  mul(atv,pitch,57.295779);
  mul(rotate,roll,57.295779);
</action>
	
	<autorotate enabled="true"
waittime="1"
accel="1"
speed="4.0"
horizon="0.0"
/> 
	<scene name="scene_pano2" title="Reception" onstart="" thumburl="panos/pano2.tiles/thumb.jpg" lat="" lng="" heading="">

		<view hlookat="0" vlookat="0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="range" vlookatmin="-46.819" vlookatmax="46.819" />

		<preview url="panos/pano2.tiles/preview.jpg" />

		<image>
			<cube url="panos/pano2.tiles/pano_%s.jpg" />
			<mobile>
				<cube url="panos/pano2.tiles/mobile_%s.jpg" />
			</mobile>
		</image>

		<!-- place your scene hotspots here -->
		<hotspot name="spot1" style="skin_hotspotstyledx" ath="-63.606" atv="14.502" linkedscene="scene_pano" />

<hotspot name="spotNNN"  url="quadro_hotspot.jpg" onclick="openurl('foto.jpg',_top),js(openPopup('a title', 'linkto foto.jpg', 500, 500, 'iframe'))" handcursor="true" distorted="true"  onloaded="calc_pos_from_hfov_yaw_pitch_roll(22, -79, 0, 0);animation()" enabled="true" alpha="0.0"
	 animation="sub(newalpha,1,alpha); tween(alpha,get(newalpha), 2.0, easeInSine, animation());" />


	</scene>

	
	<scene name="scene_pano" title="Bedroom" onstart="" thumburl="panos/pano.tiles/thumb.jpg" lat="" lng="" heading="">

		<view hlookat="0" vlookat="0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="range" vlookatmin="-47.021" vlookatmax="47.021" />

		<preview url="panos/pano.tiles/preview.jpg" />

		<image>
			<cube url="panos/pano.tiles/pano_%s.jpg" />
			<mobile>
				<cube url="panos/pano.tiles/mobile_%s.jpg" />
			</mobile>
		</image>

		<!-- place your scene hotspots here -->
		<hotspot name="spot1" style="skin_hotspotstyle" ath="122.405" atv="23.477" linkedscene="scene_pano2" />

	</scene>



</krpano>


thanks for your help ;-)

Daniel25

Beginner

Posts: 20

Location: london

Occupation: photographer

  • Send private message

14

Friday, January 25th 2013, 7:05pm

Maybe has something to do with the HTML?

Hi I just went back to the code I was writing (previous post)

just realize that I if I take away the tour.js nothing is left to be seen not even the foto.jpg.

However by playing a bit more with the code I took the style away from the head of the HTML with a different result:

This time what will happen is that I can see my Virtual tour in a much thinner strip, it is fully operational, and the hot spot work fine once clicked the foto.jpg will open above the whole page.

But just under the strip containing the Virtual Tour I can see my image foto.jpg sitting there. Now if I click it then it will open in the fancybox fashion.

Does this mean that I have to modify some code in the HTML and not in the Xml as previously thought?

I hope is all clear...


it may be something very silly I'm trying really hard but I'm not a great coder!

Thanks

Similar threads