Pano inside Joomla Article

Q&A about the latest versions
Post Reply
User avatar
zap
Posts: 384
Joined: Thu May 29, 2008 12:13 pm
Contact:

Tue Aug 10, 2010 10:35 am

Hi
I got some errors and would like to have some hints on how to best implement a virtual tour inside a joomla article.

I tried

Code: Select all

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title>Parc Le&apos;h Adventures</title>
		<script type="text/javascript" src="http://www.luxmap.lu/scripts/p2q_embed_object.js">
		</script>
		<style type="text/css" title="Default">
			body, div, h1, h2, h3, span, p {
				font-family: Verdana,Arial,Helvetica,sans-serif;
				color: #000000; 
			}
			body {
			  font-size: 10pt;
			  background : #ffffff; 
			}
			table,tr,td {
				font-size: 10pt;
				border-color : #777777;
				background : #dddddd; 
				color: #000000; 
				border-style : solid;
				border-width : 1px;
			}
			h1 {
				font-size: 18pt;
			}
			h2 {
				font-size: 14pt;
			}
			.warning {
				font-weight: bold;
			}
		</style>	
	</head>
	<body>
		<h1>Parc Le&apos;h Adventures</h1>
		<p>
		<script type="text/javascript">
<!--
			if ((window.p2q_Version) && (window.p2q_Version>=2.0)) {
				var flashvars="";
				p2q_EmbedFlash('images/stories/videos/U1334-1.1.1_fs.swf','640','360','allowFullScreen','true','FlashVars',flashvars);
				
				// Check to see if the version meets the requirements for playback
				if (!DetectFlashVer(9,0,0)) {
					document.write('<p class="warning">This content requires Adobe Flash Player Version 9 or higher. '
								 + '<a href="http://www.adobe.com/go/getflash/">Get Flash<\/a><\/p>');
				}
			} else {
				document.writeln('<p class="warning">p2q_embed_object.js is not included or it is too old! Please copy this file into your html directory.<\/p>');
			}
//-->
		</script>
		<noscript>
			<p class="warning">Please enable Javascript!</p>
		</noscript>
		
<!--		<table cellpadding="5" cellspacing="0">
			<tr>
				<td><b>Description</b></td>
				<td>www.aventure.lu</td>
			</tr>
			<tr>
				<td><b>Author</b></td>
				<td>CTM S.A. [www.ctm.lu]</td>
			</tr>
			<tr>
				<td><b>Date/Time</b></td>
				<td>2010</td>
			</tr>
			<tr>
				<td><b>Copyright</b></td>
				<td>CTM S.A. [www.ctm.lu]</td>
			</tr>
		</table>  -->
	</body>
</html>
This is the normal template ggk File. the problem I ran into: The links inside the pano can't be followed.
The VT is defined without a path structure to allow finding independant of client directory structure.

It works here
http://aventure.lu/images/stories/video ... .1_fs.html

I already changed in the code in the joomla article to find the basic swf file

Code: Select all

p2q_EmbedFlash('images/stories/videos/U1334-1.1.1_fs.swf';
It works but he can't find my other panos if not inside a html body

How to get this result inside a joomla article.
I would really appreciate any support.

PS. the javascript is not a must have. Its just that I used the basic pano2vr template as a beginning point.

Thanks
360 Panorama Creators http://luxmap.com
Google Trusted Photographer
User avatar
zap
Posts: 384
Joined: Thu May 29, 2008 12:13 pm
Contact:

Tue Aug 10, 2010 2:59 pm

Hi back

Thanks for all those already having looked at this. Here my solution : IFRAMES

Code: Select all

<iframe src ="http://www.aventure.lu/images/stories/videos/U1334-1.1.1_fs.swf" width="100%" height="100%" SCROLLING=NO FRAMEBORDER=0>
  <p>Your browser does not support iframes.</p>
</iframe>
Alternatively on can input the html page

Code: Select all

<iframe src ="http://www.aventure.lu/images/stories/videos/U1334-1.1.1_fs.html" width="100%" height="100%" SCROLLING=NO FRAMEBORDER=0>
  <p>Your browser does not support iframes.</p>
</iframe>
But beside all
I needed to integrate the COMPLETE path, not just part of it.
Works now. http://www.aventure.lu

cheers
360 Panorama Creators http://luxmap.com
Google Trusted Photographer
Carl Lamb
Posts: 42
Joined: Wed Nov 04, 2009 6:00 pm

Tue Aug 10, 2010 4:19 pm

I use the following and ignore the script altogether

Code: Select all

<!--Begin Virtual Tour Code-->
<object id="unique_id" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="500" height="375" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" align="middle"> 
<param name="movie" value="http://www.linktoyourtour/tour.swf" /> 
<param name="quality" value="high" /> 
<param name="allowfullscreen" value="true" /> 
<!--[if !IE]>-->
<object id="unique_id" width="500" height="375" data="http://www.linktoyourtour/tour.swf" type="application/x-shockwave-flash" align="middle"> 
<param name="pluginurl" value="http://www.adobe.com/go/getflashplayer" /> 
<param name="quality" value="high" /> 
<param name="allowfullscreen" value="true" /> 
<!--<![endif]--> 
<img src="http://www.linktoyourtourimagefornonflash/tourpic.jpg" alt="Adobe Flash Required to view Tours" title="Adobe Flash Required to view Tours" />
<p style="text-align: center;">
<a href="http://www.adobe.com/go/getflashplayer" target="_blank">Adobe Flash required to view Tours - Download here</a>
<!--[if !IE]>--> </object> <!--<![endif]--> </object> 
<!--End Virtual Tour Code--> 
Change the width/height attributes to fit and use full paths within templates and links. The alternate image and link to flash download will be shown if there is no flash plugin in the browser.
Sicadera
Posts: 26
Joined: Tue Sep 02, 2008 11:24 pm

Tue Jul 05, 2011 1:53 am

iframe ladies and gentlemen....

Finally i have a vr in a joomla article.

But...

The full screen button is not functioning...

Any ideas on how is this sorted out?
Sicadera
User avatar
Hopki
Gnome
Posts: 11143
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Tue Jul 05, 2011 9:59 am

Hi
Try this:

Code: Select all

<iframe width="800" height="600" src="http://www.hopkimedia.co.uk/bis" frameborder="0" allowfullscreen>
	<p>Your browser does not support iframes.</p>
</iframe>
Replace the Url with your own and set the correct size for your panorama.
Regards
Hopki
Hopki
Garden Gnome 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/
Sicadera
Posts: 26
Joined: Tue Sep 02, 2008 11:24 pm

Wed Jul 06, 2011 3:41 am

Thank you for the replay Hopki.

It did not work. I also tried allowfullscreen="YES"
Sicadera
smooth
Posts: 1493
Joined: Sat Sep 09, 2006 7:30 pm

Wed Jul 06, 2011 11:09 am

allowfullscreen="true"

Regards, Smooth 8)
Image
Sicadera
Posts: 26
Joined: Tue Sep 02, 2008 11:24 pm

Wed Jul 06, 2011 3:15 pm

Not even with that
Sicadera
crcr
Posts: 30
Joined: Thu Nov 04, 2010 6:29 am

Fri Jan 13, 2012 5:07 pm

Has anyone had any success in trying to add HTML5 to a Joomla article? I've been pulling my hair out trying to get this to work.

I have tried the code from ambientlight which is great for a normal .swf but I'm wanting HTML5 and .swf so it can be viewed on PC and ipad/iphones.

I have also tried iFrames which work but have heard that ipads don't like iFrames.

Any help would be greatly appreciated.

Thanks,
Craig

Here is my html code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Hovsonville Point Virtual Tour</title>
<meta name="viewport" content="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 name="apple-mobile-web-app-status-bar-style" content="black" />
<script type="text/javascript" src="images/Gallery/360VirtualTours/Catalina_Cafe/swfobject.js">
</script>
<script type="text/javascript">
// hide URL field on the iPhone/iPod touch
function hideUrlBar() {

if (window.pageYOffset==0) {
window.scrollTo(0, 1);
// repeat every second for slow rendering pages
setTimeout(function() { hideUrlBar(); }, 3000);

}
}
</script>
<style type="text/css" title="Default">
body, div, h1, h2, h3, span, p {
font-family: Verdana,Arial,Helvetica,sans-serif;
color: #000000;
}
body {
font-size: 10pt;
background : #ffffff;
}
table,tr,td {
font-size: 10pt;
border-color : #777777;
background : #dddddd;
color: #000000;
border-style : solid;
border-width : 2px;
padding: 5px;
border-collapse:collapse;
}
h1 {
font-size: 18pt;
}
h2 {
font-size: 14pt;
}
.warning {
font-weight: bold;
}
</style>
</head>
<body onorientationchange="hideUrlBar();">
<h1>Hovsonville Point Virtual Tour</h1>
<br>
<script type="text/javascript" src="images/Gallery/360VirtualTours/Catalina_Cafe/pano2vr_player.js">
</script>
<script type="text/javascript" src="images/Gallery/360VirtualTours/Catalina_Cafe/skin.js">
</script>
<div id="container" style="width:640px;height:480px;">
This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 9 or higher.
</div>
<script type="text/javascript">
if (swfobject.hasFlashPlayerVersion("9.0.0")) {

var flashvars = {};
var params = {};
params.quality = "high";
params.bgcolor = "#ffffff";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "pano";
attributes.name = "pano";
attributes.align = "middle";
swfobject.embedSWF(
"images/Gallery/360VirtualTours/Catalina_Cafe/Catalina.swf", "container",
"640", "480",
"9.0.0", "expressInstall.swf",
flashvars, params, attributes);

} else
// check for CSS3 3D transformations and WebGL
if (ggHasHtml5Css3D() || ggHasWebGL()) {

// create the panorama player with the container
pano=new pano2vrPlayer("container");
// add the skin object
skin=new pano2vrSkin(pano);
// load the configuration
pano.readConfigUrl("images/Gallery/360VirtualTours/Catalina_Cafe/Catalina Cafe.xml");
// hide the URL bar on the iPhone
hideUrlBar();

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

<p>
<table>
<tr>
<td><b>Description</b></td>
<td>Catalina Cafe - Intrior</td>
</tr>
</table>
</body>
</html>
MOloff
Posts: 1
Joined: Fri Jul 12, 2013 1:31 pm

Mon Jul 22, 2013 1:36 pm

dear crcr,
i have the same problem like you!
viewtopic.php?f=6&t=4823#p26393
please, can you tell me how you solved it.
or someone else???
thanks a lot and greetings,
martin
User avatar
Hopki
Gnome
Posts: 11143
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Mon Jul 22, 2013 2:32 pm

Hi,
When using an iFrame use this:

Code: Select all

<iframe src="pano.html" name="panorama" width="640" height="480" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" style="float:left; margin-left:0px" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
Replace pano.html with your own html page and set the name and size.
The scrolling=no will stop the iPad iframe problem and the webkit fullscreen code will allow the panorama or Object to brake out of the webpage. Desktop only as iDevice does not support the fullscreen API.
Regards,
Hopki
Hopki
Garden Gnome 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/
Post Reply