Use of ShadowBox from inside panoramas

[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.

[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?

[anahum]

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

[hum@no.id]

For clarity, better show motherpano to fixed frame (eg. 800x500) for a complete visual understanding... not FF

[hum@no.id]

sorry... not FF this "not FS (full screen)"

[anahum]

For clarity, better show motherpano to fixed frame (eg. 800x500) for a complete visual understanding... not FF

You are right. It's done. Thanks.

[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

[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 !!!

[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.

[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

[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...

[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(&apos;get_product.php?id=42&apos;, &apos;iframe&apos;, &apos;left&apos;);" 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....

[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

[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?