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."
Thanks for this and sorry to be lazy ... 
Cheers,
Servaas
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.
nice site, i love it!
Great!
Thanx for the tip!
Tuur 
somewhat dated list of lightbox clones here -
http://planetozh.com/projects/lightbox-clones/
many support swf, iframe, etc
sam
Look at this, http://fancybox.net/ good tool
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)
<!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 - Спасибо!
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.
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
Here below is my code.
Thanks
<!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
<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 
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
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!