Fancybox Z-index Issue ???

Q&A about the latest versions
User avatar
DDewey
Posts: 14
Joined: Mon Aug 18, 2014 10:19 pm
Location: Norman, OK
Contact:

Tue Aug 19, 2014 6:25 am

I created a virtual tour of the Nesbitt Gallery at USAO using the latest Pano2VR 4.5.1 (10655) and was having an issue with my Fancybox popups not dismissing. You can press the "ESC" key to dismiss them but cannot close them using the button. I thought maybe it was a z-index issue, but now I'm not so sure because the z-index of the Fancybox is greater than anything else in the DOM.

Here is a link : http://deweyartdesign.com/nesbitt1/index.html

I took the photos using a Ricoh Theta that the school purchased so they're a little bit grainy and low resolution. It's a pretty good camera for the price, though. I'm sure they'll eventually improve the optics with subsequent releases.

I thought maybe the problem is that the tour is using 3d css space so I needed to break out of that using "transform-style : flat" but I don't know what to apply that to.

Any help would be greatly appreciated. I'm going to experiment with different lightbox scripts to see if I can solve the problem. I did a slight modification to the pano2vr_player.js by referencing my function to open the fancybox. This was so that the gallery people could eventually do everything themselves without having to reference complicated urls within the Pano2VR software.
User avatar
DDewey
Posts: 14
Joined: Mon Aug 18, 2014 10:19 pm
Location: Norman, OK
Contact:

Tue Aug 19, 2014 7:04 am

This is very similar to the problem found here : viewtopic.php?f=6&t=9473&p=37588&hilit=z+index#p37588

I'm having the issue with the latest chrome and safari/mobile safari, but not with firefox. I'm going to tinker with it and post my findings here.

On a side note, I learned that the temporary web server that is generated by Pano2VR somehow blocks my fancybox windows from displaying at all. I've tested this with colorbox and fancybox 2 and 3 beta. This was a source of great frustration and confusion because I could see that the windows were appearing in the code (using the web inspector) but they were somehow blocked from showing on the screen. This is just an FYI to anyone doing this sort of custom implementation.
User avatar
DDewey
Posts: 14
Joined: Mon Aug 18, 2014 10:19 pm
Location: Norman, OK
Contact:

Tue Aug 19, 2014 7:20 am

I figured it out by simply applying ...

Code: Select all

position:absolute;z-index:1000
... to the container for the tour. I'm glad to finally have that working right!
User avatar
Hopki
Gnome
Posts: 10183
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Tue Aug 19, 2014 12:10 pm

Hi,
Thanks for sharing the information with the forum.
Have not used Fancy box myself, but if I ever did this is good to know.
Regards,
Hopki
Hopki
Garden Gnome Software Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
User avatar
Chu
Posts: 89
Joined: Tue Jan 10, 2012 1:59 pm
Location: London, UK
Contact:

Thu Aug 21, 2014 2:58 pm

Hey DD Working with the Theta right now, it certainly has its uses and that's a clean site you made - just a pity (as you said) about the noise. If you updated to the latest firmware (v1.30) and the latest APP from Ricoh, you can now fire the Theta with shutter priority or ISO priority. This is really useful for indoor shooting at shorter exposure or lower ISO as this reduces the grain.
DDewey wrote:I did a slight modification to the pano2vr_player.js by referencing my function to open the fancybox
Could you enlighten how one goes about integrating Fancybox into P2VR? I, too have the latest stable build (4.5.1) and I am experiencing great difficulty connecting hotspots/skin/fancybox. I chose fancybox as it gives ability to reveal basic HTML or images as an overlay, both in Flash & HTML5.

Whatever you could share would be greatly appreciated.
Using:
Pano2VR PRO 6.1.5 pro 64bit
build 17926/5.12.2

Windows 10 x64
Human Brain v1.0

Image

Artwork
  • Aerosol
  • Design
  • Screen
Specialist
  • 360°
  • Stereoscopy
  • Illusions
Concept
  • Consultancy
  • Campaigns
  • Data
  • Education
est.1971
User avatar
DDewey
Posts: 14
Joined: Mon Aug 18, 2014 10:19 pm
Location: Norman, OK
Contact:

Thu Aug 21, 2014 6:16 pm

Hello Chu,

Thanks for the update on the Theta. I updated the firmware yesterday and have noticed significantly less noise in the output. My firmware was actually 0.10 or something like that so it had not been updated at all since leaving the factory. It's definitely going to help with the subsequent virtual tours I'm doing for the gallery!

As for adding fancybox support, I did it in such a way where the user would not have to enter any javascript in the hotspots. It'll have to be updated with every new release or else I'm just going to have to tell them not to upgrade their Pano2VR software until I can determine if this approach will need to be updated as well. I did it by examining the pano2vr_player.js and finding the openURL functions and the functions that reference it in order to pass the title parameter from the xml file.

First off, I "beautified" the compiled javascript file so that I can better read what's going on. I found all instances of openUrl and added the title attribute to them.

For instance, I replaced...

Code: Select all

openUrl(a.url,a.target
with

Code: Select all

openUrl(a.url,a.target,a.title
There are a couple of references to the function that I added the title attribute to. I then added the title attribute to the beginning of the openUrl function as well as a reference to my function at the end...

Code: Select all

openUrl=function(a,b,c){0<a.length&&(".xml"==a.substr(a.length-4)||".swf"==a.substr(a.length-4)||"{"==a.charAt(0)?Eb.openNext($(a),b):myfancybox(a,b,c))}
If you want, you can just download my modded file :
http://deweyartdesign.com/nesbitt1/pano ... yer_mod.js

Finally, I added a new template with my function embedded in it...

Code: Select all

<?ggf
/*
	Create the form in the HTML dialog box
*/
	form.addCheckBox("parseanchor","Direct node access",false);
	form.addLine();
	form.addCheckBox("gyro","Include gyroscope control",false);
	form.addCheckBox("gyrodisable","     Disable on startup",false);
	form.addCheckBox("gyronorth",  "     Use true north",false);
	form.addLine();
	form.addCheckBox("swfgeneric","Flash fallback player",true);
	form.addFileNameInput("swf","Flash fallback file","Flash Panorama","Flash (*.swf)");
	form.addCheckBox("swffirst","Prefer Flash if available",false);
	form.addLine();
	form.addCheckBox("jsxml","Embedded XML",false);
	form.addFileNameInput("touchicon","iOS Device Webpage Icon","Webpage Icon","Image (*.jpg *.png)");
	form.addCheckBox("manifest","Create HTML5 Cache Manifest",false);
	form.addCheckBox("test123","This is a test to see if I can add my own form elements - Dennis M Dewey",true);
	
	// define possible output formats
	form.addOutputFormat("HTML (.html)","html");
	form.addOutputFormat("HTML (.htm)","htm");
?>
<?ggs 
// Functions to write out HTML5 and Flash code
	function addHtml5Code() {
?>	
			// create the panorama player with the container
			pano=new pano2vrPlayer("container");
<?ggs if (formvalue["parseanchor"]=="true") {  ?>
			pano.startNode=startNode;
<?ggs }  ?>
<?ggs if (output.skinFile!="") { ?>
			// add the skin object
			skin=new pano2vrSkin(pano);
			// load the configuration
<?ggs } ?>
<?ggs
	if ((formvalue["jsxml"]=="true") && (formvalue["_gg_panorama"])) {
			panostr=document.encode(formvalue["_gg_panorama"].toString(),true);
			panostr=panostr.split("'").join("'"); // workaround for .replace
			panostr=panostr.split("\n").join("';\n\t\t\tpanorama+='");
?>
			panorama='<?ggs document.write(panostr); ?>';
			pano.readConfigString(panorama);
<?ggs
	} else {
?>
			pano.readConfigUrl("<?ggs document.write(outputfile); ?>");
<?ggs
	}
?>
			// hide the URL bar on the iPhone
			setTimeout(function() { hideUrlBar(); }, 10);
<?ggs if (formvalue["gyro"]=="true") { ?>
			// add gyroscope controller
			gyro=new pano2vrGyro(pano,"container");
	<?ggs if (formvalue["gyrodisable"]=="true") { ?>
			gyro.disable(); // disable on startup
	<?ggs } ?>
	<?ggs if (formvalue["gyronorth"]=="true") { ?>
			gyro.setTrueNorth(true); // set to true north
	<?ggs } ?>
<?ggs } ?>
<?ggs if (formvalue["maps"]=="true") { ?>
			window.addEventListener("load", function() { initMap(); });
<?ggs } ?>
<?ggs
	}
	function addFlashCode() {
?>
			var flashvars = {};
			var params = {};
<?ggs if (formvalue["maps"]=="true") { 
	if (formvalue['swf']!='') { 
?>
			function ggSwfReady() { initMap(); }
<?ggs } else { ?>
			function ggXmlReady() { initMap(); }
<?ggs } ?>
<?ggs } ?>
			// enable javascript interface
			flashvars.externalinterface="1";
			params.quality = "high";
			params.bgcolor = "<?ggs document.write(formvalue["bgcolor"]); ?>";
			params.allowscriptaccess = "sameDomain";
			params.allowfullscreen = "true";
			var attributes = {};
			attributes.id = "pano";
			attributes.name = "pano";
			attributes.align = "middle";
<?ggs if (formvalue["parseanchor"]=="true") {  ?>
			if (startNode.length>0) {
				flashvars.startnode=startNode;
			}
<?ggs }  ?>
<?ggs
		if (formvalue['swf']=='') {
			addGenericFlashCode();
		} else {
			addFileFlashCode();
		}
			
	}
	function addFileFlashCode() {
?>
			swfobject.embedSWF(
				"<?ggs 
					var swffn=document.expandVariables(formvalue['swf']); // replace placeholders
					swffn=document.expandFilename(swffn); // absolute path
					swffn=document.relativeOutputFilename(swffn); // relative to HTML file
					document.write(document.encodeUrl(swffn)); 
				?>", "container", 
				"100%", "100%",
				"9.0.0", "", 
				flashvars, params, attributes);
<?ggs
	}
	function addGenericFlashCode() {
?>
<?ggs
	document.addfile("../html5/pano2vr_player.swf","pano2vr_player.swf");
	if (formvalue["_gg_skin"]) {
			skinstr=formvalue["_gg_skin"].toString();
			document.createfile('skin.xml',skinstr);
?>
			flashvars.skinxml="skin.xml";
<?ggs
	}
?>
			flashvars.panoxml="<?ggs document.write(outputfile); ?>";
			params.base="<?ggs document.write(outputbase); ?>";
			swfobject.embedSWF(
				"pano2vr_player.swf", "container", 
				"100%", "100%",
				"9.0.0", "", 
				flashvars, params, attributes);
<?ggs
	}
	
	function writeUserdata(v) 
	{
		var s;
		s=document.expandVariables(v);
		document.write(document.encode(document.removeTags(s),true));
	}
?>
<!DOCTYPE html>
<?ggs 
var manifest;
if (formvalue["manifest"]=="true") {
	// create a HTML5 Offline Application Cache
	manifestfile=document.expandVariables("$n.manifest");
	d=new Date();
	manifest="CACHE MANIFEST\n";
	manifest+="# created with Pano2VR, " + d.toLocaleString() + "\n"; // make sure the file updates
	for(var key in formvalue["_gg_filelist"]) {
		manifest+=formvalue["_gg_filelist"][key] + "\n";
	}
	document.writeln('<html manifest="' + manifestfile + '">');	
} else {  ?>
<html>
<?ggs }  ?>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
		<title><?ggs document.write(document.encode(document.removeTags(document.expandVariables(config.userdata.title)))); ?></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<?ggs		
	if (formvalue["touchicon"]!="") {
		// absolut path to the file
		var touchicon=document.expandFilename(formvalue["touchicon"]);
		// extract just the name part
		id=touchicon.lastIndexOf('/');
		touchiconname=touchicon.substring(id+1);
		document.addfile(touchicon,touchiconname);
?>
		<link rel="apple-touch-icon" href="<?ggs document.write(touchiconname); ?>" />
<?ggs } ?>		
<?ggs
	addFlashFallback=(formvalue['swf']!='') || (formvalue["swfgeneric"]=="true");
	if (addFlashFallback) {
		document.addfile("../3rdparty/swfobject/swfobject.js","swfobject.js");
		manifest+="swfobject.js\n";
		document.writeln('\t\t<script type="text/javascript" src="swfobject.js">');
		document.writeln('\t\t</script>');
	}
	if (output.skinFile!="") {
			manifest+="skin.js\n";
	}
?>
		<style type="text/css" title="Default">
			body, div, h1, h2, h3, span, p {
				font-family: Verdana,Arial,Helvetica,sans-serif;
				color: <?ggs document.write(formvalue["textcolor"]); ?>; 
			}
			/* fullscreen */
			html {
				height:100%;
			}
			body {
				height:100%;
				margin: 0px;
				overflow:hidden; /* disable scrollbars */
			}
			/* fix for scroll bars on webkit & Mac OS X Lion */ 
			::-webkit-scrollbar {
				background-color: rgba(0,0,0,0.5);
				width: 0.75em;
			}
			::-webkit-scrollbar-thumb {
    			background-color:  rgba(255,255,255,0.5);
			}
		</style>	
	</head>
	<body>

		<div id="container" style="position:absolute;width:100%;height:100%;z-index:1000;">This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 9 or higher.</div>



		<link rel="stylesheet" type="text/css" href="jquery.fancybox.css" media="screen" />

		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="jquery.fancybox.js"></script>


		<script type="text/javascript" src="pano2vr_player_mod.js"></script>

<?ggs if (output.skinFile!="") { ?>
		<script type="text/javascript" src="skin.js"></script>
<?ggs } ?>

<?ggs if (formvalue["gyro"]=="true") { 
		document.addfile("../common/pano2vrgyro.js","pano2vrgyro.js");
		manifest+="pano2vrgyro.js\n";
?>
		<script type="text/javascript" src="pano2vrgyro.js"></script>
<?ggs } ?>


		<script type="text/javascript">
			function myfancybox(a, c, x) {
				$.fancybox({
					href : a,
					title : x,
					beforeShow : function () {
						$( ".ggskin" ).hide();
    				},
    				beforeClose : function () {
    					$( ".ggskin" ).show();
					}
 				});
 			}
			function hideUrlBar() {
				// hide URL field on the iPhone/iPod touch
				var p = String(navigator.platform);
	
				container = document.getElementById("container");
				if( p === 'iPad' || p === 'iPhone' || p === 'iPod touch' ){
					var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
					if (parseInt(v[1], 10)>=7) {
						// iOS >=7
						if (container) {
							container.style.top=(0) + "px";
							container.style.left=(0) + "px";
							container.style.width=(window.innerWidth) + "px";
							container.style.height=(window.innerHeight) + "px";
							if (pano) {
								pano.setViewerSize(window.innerWidth, window.innerHeight);
							}						}
						window.scrollTo(0, 0);
					} else {
						if (container) {
							var cheight;
							switch(window.innerHeight) {
								case 208:cheight=268; break; // landscape
								case 260:cheight=320; break; // landscape, fullscreen
								case 336:cheight=396; break; // portrait, in call status bar
								case 356:cheight=416; break; // portrait 
								case 424:cheight=484; break; // portrait iPhone5, in call status bar
								case 444:cheight=504; break; // portrait iPhone5 
								default: cheight=window.innerHeight;
							}
							if ((cheight) && ((container.offsetHeight!=cheight) || (window.innerHeight!=cheight))) {
								container.style.height=cheight + "px";
							}
						}
						document.getElementsByTagName("body")[0].style.marginTop="1px";
						window.scrollTo(0, 1);
					}					
				}
			}    
			if (window.addEventListener) {
				window.addEventListener("load", hideUrlBar);
				window.addEventListener("resize", hideUrlBar);
				window.addEventListener("orientationchange", hideUrlBar);
			}

<?ggs if (formvalue["parseanchor"]=="true") {  ?>
		var startNode=document.location.hash.substring(1);

		if (("onhashchange" in window) && (!(/MSIE (\d+\.\d+);/.test(navigator.userAgent)))) {
			window.onhashchange = function () {
				pano.openNext('{' + window.location.hash.substring(1) + '}');
         	}
	    } else {
        	var lastHash = window.location.hash;
        	window.setInterval(function () {
	           	if (window.location.hash != lastHash) {
   	        		lastHash = window.location.hash;
					pano.openNext('{' + window.location.hash.substring(1) + '}');
        	   	}
        	}, 100);
		}
<?ggs } ?>	
<?ggs if (addFlashFallback) { 
	if (formvalue["swffirst"]=="true") {  
?>
		if (swfobject.hasFlashPlayerVersion("10.0.0")) {
<?ggs addFlashCode(); ?>			
		} else 
		// check for CSS3 3D transformations and WebGL
		if (ggHasHtml5Css3D() || ggHasWebGL()) {
<?ggs addHtml5Code(); ?>
<?ggs } else { // swf first ?>
		// check for CSS3 3D transformations and WebGL
		if (ggHasHtml5Css3D() || ggHasWebGL()) {
		// use HTML5 panorama
<?ggs addHtml5Code(); ?>
		} else 
		if (swfobject.hasFlashPlayerVersion("10.0.0")) {
<?ggs addFlashCode(); ?>
			
<?ggs } // swf first  ?>
		}
<?ggs } else {
		addHtml5Code();
	  }
?>
		</script>


		<noscript>
			<p><b>Please enable Javascript!</b></p>
		</noscript>

	</body>
</html>

I saved that file in the html5 folder in Pano2vr's application files. For a mac, those are found in :

Code: Select all

~/Library/Application Support/GardenGnomeSoftware/Pano2VR/HtmlTemplates/html5
With every new pano I save that is using this feature, I just make sure and choose the html5 "fancybox" template and save a copy of the modded javascript in the output directory as "pano2vr_player_mod.js". The different file name is better to do so that it does not get overwritten whenever you update the pano. I also add jquery and the fancybox files of course. I'm using 1.8.3 just saved as jquery. You could probably use the CDN version of jquery too if you wanted. The version of fancybox I'm using is the Beta 3 version here :
http://fancyapps.com/fancybox/beta/

I'm still having issues with fullscreen and my skin is malfunctioning on the iphone whenever I flip the orientation from vertical to horizontal but that is not related to the fancybox integration.

I hope to get more time in the future to troubleshoot the fullscreen problem but I'm pretty inundated lately with my two jobs and other side work. Hope this helps!
User avatar
Chu
Posts: 89
Joined: Tue Jan 10, 2012 1:59 pm
Location: London, UK
Contact:

Thu Aug 21, 2014 6:23 pm

DDewey wrote:My firmware was actually 0.10 or something like that so it had not been updated at all since leaving the factory
Glad the updated firmware has noticeable results, the stitching algorithm was also updated so you will hopefully notice that too.
DDewey wrote:I hope to get more time in the future to troubleshoot the fullscreen problem but I'm pretty inundated lately with my two jobs and other side work. Hope this helps!
This most certainly does - on the surface at least (not being a first degree coder). I shall report back to this topic once I've also found time to 'beautify' and hopefully i'll have most of my hair left!

Cheers DD
Using:
Pano2VR PRO 6.1.5 pro 64bit
build 17926/5.12.2

Windows 10 x64
Human Brain v1.0

Image

Artwork
  • Aerosol
  • Design
  • Screen
Specialist
  • 360°
  • Stereoscopy
  • Illusions
Concept
  • Consultancy
  • Campaigns
  • Data
  • Education
est.1971
User avatar
DDewey
Posts: 14
Joined: Mon Aug 18, 2014 10:19 pm
Location: Norman, OK
Contact:

Mon Sep 15, 2014 1:16 am

I figured it out using my own fullscreen function that uses the entire body of the page. Here is a demo file with everything you need including instructions on where to put the template "fancybox.ggt" file.

http://deweyartdesign.com/_downloads/pa ... screen.zip

Here is the demo online so you can see how it works :

http://deweyartdesign.com/_downloads/pa ... index.html
Vitaly
Posts: 34
Joined: Thu Oct 06, 2011 9:12 pm
Location: Ukraine
Contact:

Mon Sep 15, 2014 11:04 am

About 8:00 (UTC+2) I visited your demo panorama and Fancybox worked in fullscreen. But now it doesn't.
Did you change something at your demo site?
User avatar
Chu
Posts: 89
Joined: Tue Jan 10, 2012 1:59 pm
Location: London, UK
Contact:

Fri Nov 14, 2014 1:10 pm

DDewey wrote:I figured it out using my own fullscreen function...
This seems to work in HTML5 but not in flash, any chance we can reignite some workflow discussion?
Vitaly wrote:About 8:00 (UTC+2) I visited your demo panorama and Fancybox worked in fullscreen. But now it doesn't.
Did you change something at your demo site?
i see the gallery image pop up in a fancybox, in fullscreen.

really would appreciate some assistance getting this to work fully
thanks
Using:
Pano2VR PRO 6.1.5 pro 64bit
build 17926/5.12.2

Windows 10 x64
Human Brain v1.0

Image

Artwork
  • Aerosol
  • Design
  • Screen
Specialist
  • 360°
  • Stereoscopy
  • Illusions
Concept
  • Consultancy
  • Campaigns
  • Data
  • Education
est.1971
User avatar
Chu
Posts: 89
Joined: Tue Jan 10, 2012 1:59 pm
Location: London, UK
Contact:

Sun Nov 16, 2014 11:01 pm

This is what I've achieved so far, limited results with both flash and html5. Please permit me to get as detailed as I fear I might...

@Ddewey - I am using your pano2vr_player_mod.js file and called it your way in the html templates:

Code: Select all

<script type="text/javascript">
        function myfancybox(a, c, x) {
				$.fancybox({
					href : a,
					title : x,
					beforeShow : function () {
						$( ".ggskin" ).hide();
    				},
    				beforeClose : function () {
    					$( ".ggskin" ).show();
					}
 				});
 			}
		</script>
...and in my HTML5 skin, the hotspots have this action on click:

Code: Select all

javascript:parent.$.fancybox.open({href:'$hu',title:'$hs',type:'iframe',openEffect : 'elastic',closeEffect : 'fade',prevEffect : 'none',nextEffect : 'none',fitToView  : true,helpers : {media : {},buttons : {},title: {type: 'inside'},overlay : {opacity: 0.8}}});
and the Flash skin:

Code: Select all

javascript:parent.$.fancybox.open({href:'$hu',title:'$hs',type:'iframe',openEffect : 'elastic',closeEffect : 'fade',prevEffect : 'none',nextEffect : 'none',autoSize   : true,fixed : true,arrows : false,helpers : {media : {},buttons : {},title: {type: 'inside'},overlay : {opacity: 0.8,css : {'background-color' : '#000'}}}});
The flash skin works with the following extra values:
  • autoSize:true (in place of fitToView)
  • fixed:true
  • arrows:false
  • helpers : {overlay : {css : {'background-color' : '#000'}}
I'm quite happy with the results as I can have hotspot links for images/text/video embeds and webpages - all with the same hotspot skin design. This has varying results for the fancybox behaviour, I have written notes for the attached images below:

HTML5
HTML5<br />Google Chrome v39.0.2171.59<br />Android 4.4.2 Samsung Note 3<br />Note the grey blocks where the scrollbars should be<br />---
HTML5
Google Chrome v39.0.2171.59
Android 4.4.2 Samsung Note 3
Note the grey blocks where the scrollbars should be
---
android.png (816.27 KiB) Viewed 7499 times
HTML5<br />Google Chrome v37 / Firefox v31<br />Windows Vista<br />Works as expected, including opening, closing and scrolling<br />---
HTML5
Google Chrome v37 / Firefox v31
Windows Vista
Works as expected, including opening, closing and scrolling
---
html5.jpg (211.99 KiB) Viewed 7499 times
HTML5<br />Apple Safari<br />ios7.1 iPhone 5s<br />Fancybox appears behind hotspots and other skin elements of the tour. The fancybox content can be scrolled and be closed by clicking its X<br />---
HTML5
Apple Safari
ios7.1 iPhone 5s
Fancybox appears behind hotspots and other skin elements of the tour. The fancybox content can be scrolled and be closed by clicking its X
---
ios.png (296.46 KiB) Viewed 7499 times
FLASH
FLASH<br /><br />Google Chrome v37 /Firefox v31<br />Note the lack of background opacity<br />---
FLASH

Google Chrome v37 /Firefox v31
Note the lack of background opacity
---
flash2.jpg (214.9 KiB) Viewed 7499 times
Q1. How do i position the fancybox elements in front of the skin elements in iOS?
Q2. Why did the scrollbars and styling vanish from Chrome on Android?
Q3. How do I make fancybox show when viewed in fullscreen? The fancybox also vanishes when flipping browser into fullscreen view.
Q4. Any way to define galleries (rel tag) within the hotspot values (target perhaps)?

As far as showing an operational url, the meaningful hotspots live at www.raw360.net, Enter the kitchen and Go to the trick Top Hat.

Thanks in advance for helping to get to the bottom of this. In a lot of ways this shouldn't replace the current workflow for media elements, but in addition this is a very valuable script for associating rich media content with tours.

Cheers gnomes
Using:
Pano2VR PRO 6.1.5 pro 64bit
build 17926/5.12.2

Windows 10 x64
Human Brain v1.0

Image

Artwork
  • Aerosol
  • Design
  • Screen
Specialist
  • 360°
  • Stereoscopy
  • Illusions
Concept
  • Consultancy
  • Campaigns
  • Data
  • Education
est.1971
User avatar
DDewey
Posts: 14
Joined: Mon Aug 18, 2014 10:19 pm
Location: Norman, OK
Contact:

Mon Nov 24, 2014 5:48 pm

I'm sorry my notifications for this post were disabled. "Answers" to questions above :

Q1 : I'm not sure how to get the fancybox elements positioned above the skin elements. I originally thought maybe z-index but could never get it to work using z-index. I finally solved this by hiding the elements using jQuery and then showing them again whenever the fancybox is closed.

Q2 : Unfortunately I'm unable to test in Android devices at this time because I don't own anything running Android.

Q3 : The fullscreen issue only occurred for me on external screens and I haven't had time to troubleshoot this further. Until I've had a chance to figure out what the problem is, I've just been doing a pseudo "full-screen" where the pano fills the whole body of the browser window.

Q4 : It might be possible to do a gallery view with previous and next links, but I haven't gotten it to work yet. The other fancyboxes are not going to be visible in the DOM because I'm calling fancybox arbitrarily within a function instead of finding all links within a page that have a class of "fancybox". That is how it is able to see the other links. In order for this to work like that, it would probably require a function that searches the "skin.js" file for the fancybox links. This is a little over my head though. I'm more creatively inclined than anything and don't get a lot of time to tinker with the code much unless it is paying the bills.

Most of the work I did to Pano2VR was done when I was unemployed a few months ago and have just been too tied up with the day job to do much of anything else.

BTW... I really like the raw360.net site. Did you render that with toon effects or is it just textured that way? Really nice work!
User avatar
Chu
Posts: 89
Joined: Tue Jan 10, 2012 1:59 pm
Location: London, UK
Contact:

Tue Dec 02, 2014 5:57 pm

Ok, this is the second time I have written a response... restarts of the browser and going 'back' without realising. tut tut

So, I've sorted a couple of the aboves:

Q1, edited pano2vr_player_mod.js as suggested by Dhogg here
Q2 is indeed a styling issue, but now I only see the scrollbars when their invisible containers are first clicked on, well weird.
Q3, I just don't include the double-click to fullscreen in settings
Q4, your response reads well complicated from my perspective!

With raw360, the equirectangular images are from drawings that are then mapped in Sketchup and rendered with Kerkythea, thanks a lot for the comments!

There's another issue this has created with a demonstration of an exhibition where my work is showing. I hope to use the fancybox image popups but when I create the html with the fancybox script links etc, the page simply doesn't want to play good.

The first load asks to click a CONTINUE arrow, but it simply wont register a click on the iPhone...
It could be styling, I tried loads of alterations.
Could it be the javascript itself?

I am pulling my hair out... any help at all greatly appreciated. It doesn't help that I cant actually diagnose issues on the actual iPhone cos there's no developer option...

Any pointers?
Here's the live demo
Using:
Pano2VR PRO 6.1.5 pro 64bit
build 17926/5.12.2

Windows 10 x64
Human Brain v1.0

Image

Artwork
  • Aerosol
  • Design
  • Screen
Specialist
  • 360°
  • Stereoscopy
  • Illusions
Concept
  • Consultancy
  • Campaigns
  • Data
  • Education
est.1971
User avatar
DDewey
Posts: 14
Joined: Mon Aug 18, 2014 10:19 pm
Location: Norman, OK
Contact:

Tue Dec 02, 2014 8:21 pm

So you're trying to open up a fancybox view to an html page when you click on the "?" in the top right corner? I did something similar to that on this gallery here :

http://deweyartdesign.com/_development/nesbitt2/
User avatar
DDewey
Posts: 14
Joined: Mon Aug 18, 2014 10:19 pm
Location: Norman, OK
Contact:

Tue Dec 02, 2014 8:28 pm

For that use case, I changed the function so that it searches for the presence of an ".html" in the url and triggers iframe mode for the fancybox. It's not very elegant solution but it works:

Code: Select all

function myfancybox(a, c, x) {
    // check to see if fancybox is going to be an image or an iframe
    var n = a.indexOf(".html");
    if (n != -1) {
        $.fancybox({
        href : a,
        type : 'iframe',
        width: "100%",
        margin: [0,0,0,0],
        beforeShow : function () {
            $( ".ggskin" ).hide();
        },
        beforeClose : function () {
            $( ".ggskin" ).show();
        }
        });
    } else {
        $.fancybox({
        href : a,
        title : x,
        beforeShow : function () {
            $( ".ggskin" ).hide();
        },
        beforeClose : function () {
        $( ".ggskin" ).show();
        }
        });
    }
}
Post Reply