Page 1 of 1
Use of ShadowBox from inside panoramas
Posted: Thu Nov 18, 2010 5:26 pm
by anahum
I'm doing some tests using ShadowBox from inside panoramas. So far, some things work nice and some don't.
You can see a demo here
http://demo.360panotours.com/sb
What is working:
- Great to open many types of media from a pano button (other panos, pictures, web pages, swf videos)
What is not working (hints and tips are welcome):
- manage the size of the box opened
- manage the transparency of the grey border to see through the original pano behind the box
- box launched behind the pano if the box is triggered while in fullscreen mode
To do your own xperiments you must download ShadowBox from
http://www.shadowbox-js.com/
Also you need to add the following code to your html head:
Code: Select all
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
language: "en",
resizeDuration: "1.0",
fadeDuration: "1.0",
players: ["html" , "swf" , "iframe"]
});
</script>
...and within your panos you need to assign "mouse click" + "Go To URL" + javascript:Shadowbox.open({ content: 'greenpano.swf', player: "iframe", title: "Green pano in a shadowbox" }); changing "greenpano.swf" and "Green pano in a shadowbox" by the media file and the title shown in a box.
Re: Use of ShadowBox from inside panoramas
Posted: Thu Nov 18, 2010 10:47 pm
by visual360media
You've lost me a little bit, what are you trying to do? It looks like you are opening a pano in a shadowbox, but your post says, you are opening a shadowbox within a pano ! or am i missing something?
Re: Use of ShadowBox from inside panoramas
Posted: Thu Nov 18, 2010 10:58 pm
by anahum
webworld360 wrote:You've lost me a little bit, what are you trying to do? It looks like you are opening a pano in a shadowbox, but your post says, you are opening a shadowbox within a pano ! or am i missing something?
It is both things
Re: Use of ShadowBox from inside panoramas
Posted: Fri Nov 19, 2010 9:02 am
by hum@no.id
For clarity, better show motherpano to fixed frame (eg. 800x500) for a complete visual understanding... not FF
Re: Use of ShadowBox from inside panoramas
Posted: Fri Nov 19, 2010 12:59 pm
by hum@no.id
sorry... not FF this "not FS (full screen)"
Re: Use of ShadowBox from inside panoramas
Posted: Fri Nov 19, 2010 1:11 pm
by anahum
hum@no.id wrote:For clarity, better show motherpano to fixed frame (eg. 800x500) for a complete visual understanding... not FF
You are right. It's done. Thanks.
Re: Use of ShadowBox from inside panoramas
Posted: Fri Feb 11, 2011 9:03 pm
by hum@no.id
Hi,
anahum
Where do you want to assign this option in any box for a button into Skin Editor?
"mouse click" + "Go To URL" + javascript:Shadowbox.open({ content: 'greenpano.swf', player: "iframe", title: "Green pano in a shadowbox" });
from
http://demo.360panotours.com/sb/
Please send detail an example...
and work or not this parameter? eg. javascript:onclick = function()
many thanx for big example with Shadowbox
Re: Use of ShadowBox from inside panoramas
Posted: Fri Feb 11, 2011 9:27 pm
by 360Texas
IE 8 version 8.0.6001.19019ic
Java 6 update 18, Adobe Flash viewer version 10.2.152.26 current versions
--
Firefox 3.6.13
Java 6.0.15, Shockwave Flash 10.1.85.3
I tried to 'click to view source' but it seems WHOLE PAGE is flash object
Full frame icon top left - worked
ALL WORKED
HAPPY DANCE !!!
Re: Use of ShadowBox from inside panoramas
Posted: Mon Feb 14, 2011 11:57 am
by sportsnapper
Hi,
I spent a long time getting this to work - I've managed to call both shadowbox and fancybox from within a panorama.
I've now got a live example:
http://www.snowcoach.co.uk/page.php?id= ... 0&mpg=home
In this case the pano is first shown in a shadowbox, then the panorama calls fancybox from within. It's not possible to make a recursive shadowbox call, or I can't make it work at least.
Key to getting all of this to work is inserting the correct init call into html
Code: Select all
Shadowbox.init({
skipSetup: true
});
,
and then ensuring that shadowbox has the correct base path eg.
Code: Select all
Shadowbox.setup("a.valc", {
overlayOpacity: 0.75,
overlayColor: "#123456",
height: "420",
width: "620",
flashParams: {base:'/panovr/ValCenis/Tour/',
wmode: 'opaque'
}
}) ;
Calling either fancy or shadowbox from within the Pano uses a javascript call as mentioned above eg
Code: Select all
javascript:callFancy3('snow_garden','''',"");
then there is a matching function in the html:
Code: Select all
function callFancy3(album, linkurl, title) {
$('a.'+album).fancybox({
'cyclic': true,
'overlayColor': '#123456',
'padding' : 5
});
$('a.'+album).eq(0).trigger('click');
}
I've not tried a javascript onclick event. It's easier to user the Jquery trigger(click);
The original plan was to use slideshowpro to show the internal albums - but this was not possible as I couldn't work out how to set either the basepath within the panorama or set the flashparams - so there was no flexibility to show different albums. See
http://gardengnomesoftware.com/forum/vi ... =13&t=5763
If you only want to call one or the other from within the pano it's much much easier.
Re: Use of ShadowBox from inside panoramas
Posted: Wed Jul 18, 2012 4:42 am
by bedigs
since I was helped greatly by seeing working code examples -- here is mine..
flash side:
pano2 vr hotspot in the URL: field:
javascript:openShadowbox('../conant/rm1.jpg', 'img', 'left');
javascript:openShadowbox('../conant/rm2.jpg', 'img', 'center');
javascript:openShadowbox('../conant/rm3.jpg', 'img', 'right');
html side:
<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({
handleOversize: "resize",
modal: false,
overlayColor: "#000",
overlayOpacity: "0.7",
continuous: "true",
slideshowDelay: "7"
});
</script>
<script type="text/javascript">
/* this script is used to see the openshadowbox pass from flash */
/* see instructions here http://www.shadowbox-js.com/faq.html */
function openShadowbox(content, player, title){
Shadowbox.open({
content: content,
player: player,
title: title
});
}
</script>
/*For my info this is the flash command(in Pano hotspot)
getURL("javascript:openShadowbox('movie.swf', 'swf', 'Title')");*/
/* you need to remove the getURL and outside quotes ("") for pano2vr and javascript:openShadowbox('../conant/rm1.jpg', 'img', 'left') */
Note: it only works published online- not locally.
Woot!
here's the example web page:
http://www.bedigs.com/conant/conant.html
Re: Use of ShadowBox from inside panoramas
Posted: Wed Jul 18, 2012 6:02 pm
by RBrooks
I have tried to do this (see richhippie.themabreyproject.com/pano/?pano=7) the top left most pano hotspot on a pair of jeans has this code setup. the current iframe popup is show as well when you hover. what am I doing wrong? I've called the player as html...
Re: Use of ShadowBox from inside panoramas
Posted: Wed Jul 18, 2012 6:50 pm
by RBrooks
all fixed. Some notes for anyone generating the XML config file.
<hotspot id="4" skinid="" pan="145.551" tilt="-0.823537" title="Product" url="javascript:openShadowbox('get_product.php?id=42', 'iframe', 'left');" target="_self" />
the code only works in the HTML5 player if you give it a target of _self and a player of iframe (NOT HTML).
also, remember to encode all the special characters...I forgot to, hence the not working....
Re: Use of ShadowBox from inside panoramas
Posted: Wed Jul 18, 2012 7:20 pm
by bedigs
RBrooks, wow what a cool web site.. I got strange behaviours trying to move the pano-- in IE8 - but the iframe popup and shadowbox worked. I wonder if changing the player to img would give you a bigger picture- it seems to be in the iframe (of your pop-up ) now. There is also a way to keep the background from dissapearing when the shadowbox opens-- looking into that next.
heres 2 links for more shadowbox info
http://www.shadowbox-js.com/faq.html
http://shadowbox.1309102.n2.nabble.com/ ... 10806.html
Re: Use of ShadowBox from inside panoramas
Posted: Fri Jul 20, 2012 12:59 am
by RBrooks
It's a WiP. and IE8-10 are so buggy with HTML5 stuff (a lack of WEBGL doesn't help) that I'm going to be using a flash fallback. Has anyone else noticed that the hotspots don't appear to work on android using the HTML5 runtime?