Sie sind nicht angemeldet.

tour in lightbox

servaas

Fortgeschrittener

  • »servaas« ist der Autor dieses Themas

Beiträge: 218

Wohnort: Belgium

  • Nachricht senden

1

Dienstag, 11. Januar 2011, 18:13

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

Profi

Beiträge: 1 336

Wohnort: Duluth MN

  • Nachricht senden

2

Dienstag, 11. Januar 2011, 22:14

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

Fortgeschrittener

  • »servaas« ist der Autor dieses Themas

Beiträge: 218

Wohnort: Belgium

  • Nachricht senden

3

Dienstag, 11. Januar 2011, 22:21

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

Cheers,
Servaas
VAN BELLE IMAGE B3D

Dr. Schneckem

Schüler

Beiträge: 162

  • Nachricht senden

4

Mittwoch, 12. Januar 2011, 11:14

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

Fortgeschrittener

  • »servaas« ist der Autor dieses Themas

Beiträge: 218

Wohnort: Belgium

  • Nachricht senden

5

Mittwoch, 12. Januar 2011, 17:31

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

Anfänger

Beiträge: 11

  • Nachricht senden

6

Dienstag, 8. März 2011, 14:45

nice site, i love it!

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

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

  • Nachricht senden

7

Dienstag, 8. März 2011, 15:02

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

Schüler

Beiträge: 110

Wohnort: Brooklyn, New York

Beruf: 360° VR Photographer

  • Nachricht senden

8

Dienstag, 8. März 2011, 22:25

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

Profi

Beiträge: 1 082

Wohnort: Russia, Kaliningrad

  • Nachricht senden

9

Mittwoch, 9. März 2011, 02:11

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

Anfänger

Beiträge: 7

  • Nachricht senden

10

Montag, 21. März 2011, 11:37

Hello

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

606r

Anfänger

Beiträge: 35

Beruf: Freelance

  • Nachricht senden

11

Mittwoch, 13. April 2011, 22:27

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)

Quellcode

 
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

Profi

Beiträge: 1 336

Wohnort: Duluth MN

  • Nachricht senden

12

Mittwoch, 13. April 2011, 22:48

Zitat von »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

Anfänger

Beiträge: 20

Wohnort: london

Beruf: photographer

  • Nachricht senden

13

Freitag, 25. Januar 2013, 13:00

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

Quellcode

 
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

Quellcode

 
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

Anfänger

Beiträge: 20

Wohnort: london

Beruf: photographer

  • Nachricht senden

14

Freitag, 25. Januar 2013, 19:05

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

Ähnliche Themen