Automated Panoramic DHTML

**dotcomtim** · 01-11-2006, 01:29 AM

I have this DMHL Panoramic Script that I found at http://www.schillmania.com/ web site. I absolutely love it and was looking to see if I can get help modifying it. I don't know DHTML and Java Scripting well enough so I screwing up the entire script.

I am trying to play the panoramic images automatically and load them one after another, instead of looping the image, once it reaches the end of one pan it goes on to play the next one in the array by fading out and fading in.

And once the array is completed it then leaves the page and goes back to the default gallery page.

Here is the code:
http://www.schillmania.com/photos/panoramic/

As well as I attached it.

**jscheuer1** · 01-11-2006, 07:28 AM

That (the source script at http://www.schillmania.com/photos/panoramic/) is buggy. It seems that they are still working on it. I'd wait until they fix it or find another less buggy version elsewhere.

**dotcomtim** · 01-11-2006, 02:29 PM

I found another panoramic script, that is free to alter.

Playing with the script, I have the altered it to do the following so far.

1) I have it playing at a much larger scale. So I can do a full screen viewer.
2) I have it playing automatically with out the left and right arrows. By adding onload="scroll()"
3) I have it reloading the page once it completes playing the panoramic image.

The problems that I have solve with this viewer is to play the pans from an array. Currently it only plays one, and I am looking to play a series of images from a virtual tour with out reloading the page each time until it reaches the end of the array.

An example would be if the tour has 3 images, there would be 3 images in the array. Plays image one at the end of the image it fades out, fades in and plays image two .. this continues until the last image is played then reloads the page.

Here is his script: http://abhome.bretteleben.de/scripts.../panorama.html

This is what I have altered so far.
<html>
<head>
<title>Automated Panoramic Viewer</title>

<script language="javascript" type="text/javascript">
imname = 'pan.jpg';
imwidth = 2170;
imheight = 400;
posleft = 0;
postop = 0;
panwidth = 2170;
panheight = 400;

// setup movement
speed=60;
move=2;

tim=0;
imw=imwidth*panheight/imheight;imh=panheight;imstart=panwidth/2-imw*1.5;
jumpa=panwidth/2-imw*2.5;jumpwida=imw-move;
jumpb=panwidth/2-imw/2;jumpwidb=imw+move;

function scroll()
{
now=parseFloat(document.getElementById("pano").style.left);
if (now<=jumpa)
{
window.location.reload("panoramic.html");
}
else
{
now-=move;
}
document.getElementById("pano").style.left=now;
tim=setTimeout("scroll()",speed);
}

document.write("<div id='panorama'>");
document.write("<div id='pano' style='position:absolute; left:"+imstart+"px; top:0px; width:"+imw*3+"px; height:"+imh+"px; z-index:2; visibility:visible;'>");
document.write("<table><tr><td nowrap><img src='"+imname+"' width="+imw+"px height="+imh+"px><img src='"+imname+"' width="+imw+"px height="+imh+"px><img src='"+imname+"' width="+imw+"px height="+imh+"px></td></tr></table>");
document.write("</div></div>");
document.write("<style>");
document.write("body { margin-left:0; margin-right:0; margin-top:0; margin-bottom:0;overflow:hidden;}");
document.write("#panorama {position:absolute; left:"+posleft+"px; top:"+postop+"px; width:"+panwidth+"px; height:"+panheight+"px; z-index:1; clip:rect(0px,"+panwidth+"px,"+panheight+"px,0px); overflow:hidden;}");
document.write("</style>");
</script>

</head>

<body onload="scroll()" bgcolor="#04222F">

<div id="panotitle" style="position:absolute; left:0; top:400; z-index:2; visibility:visible;">

</body>
</html>

To make this work I am not worried about it being cross-browser, I am creating this to work as a local viewer to display my virtual tours from my office as a presentation system.

**jscheuer1** · 01-12-2006, 08:43 AM

Try this -

Make up an array of images and set the count to 0 at the beginning of the script:

Code:

var images=["pan.jpg", "pan2.jpg", 'pan3.jpg"]
var imgCount=0

Then add this (in red) to the scroll function:

Code:

function scroll()
{
now=parseFloat(document.getElementById("pano").style.left);
if (now<=jumpa)
{
if (imgCount<images.length-1){
var pani=document.images
for (var i_tem = 0; i_tem < pani.length; i_tem++)
if (pani[i_tem].src.indexof(imname)!==-1)
pani.src=images[imgCount+1]
imgCount++
imname=images[imgCount]
document.getElementById("pano").style.left=imstart+'px'
tim=setTimeout("scroll()",speed);
return;
}
else
window.location.reload("panoramic.html");
}
else
{
now-=move;
}
document.getElementById("pano").style.left=now;
tim=setTimeout("scroll()",speed);
}

Fading is a bit trickier, see how the above works first as, having no images to test on . . .

It would be best if you setup a demo page somewhere that I could see it in action.

**dotcomtim** · 01-12-2006, 02:25 PM

Wow that closer than what I did, I have been playing with the script myself last night. What you have done goes through the list of images in the array and once completed reloads the page. The only thing it doesn't do is show the images.

I did what you suggested and put it on the company web site in a test directory. http://www.thebluemountainlodge.com/test/

Locally it was doing everything except show the pictures, on the live web site it looks like it keeps try to reload the page window.location.reload("next.html"); but it can't as if it is looping.

Question: If each image is a different size could that be why it isn't show the image?

**jscheuer1** · 01-13-2006, 02:27 AM

I've got a version that is working very well here. It will only work in IE but, I got the idea that was all you wanted/needed:

Code:

<html>
<head>
<title>Automated Panoramic Viewer</title>
<style type="text/css">
#pano img {
filter:alpha(opacity=0);
}
</style>
</head>
<body onload="scroll()" bgcolor="#04222F">
<script type="text/javascript">

// load virtual tours
var images=new Array()
images[0]=["pan1.jpg", 2170]
images[1]=["pan2.jpg", 1970]
images[2]=["pan3.jpg", 1752]

var imgCount=0;

imname = 'pan1.jpg';
imwidth   = 2170;
imheight  = 400;
posleft   = 0;
postop    = 0;
panwidth  = 2170;
panheight = 400;
// setup movement
speed= 60;
move= 2;
tim= 0;
imw=imwidth*panheight/imheight;imh=panheight;imstart=panwidth/2-imw*1.5;
jumpa=panwidth/2-imw*2.5;jumpwida=imw-move;
jumpb=panwidth/2-imw/2;jumpwidb=imw+move;
function scroll(){
now=parseFloat(document.getElementById("pano").style.left);
if (now<=jumpa+100){
for (var j_tem = 0; j_tem < document.images.length; j_tem++)
if(document.images[j_tem].src.indexOf(imname)!==-1)
document.images[j_tem].filters[0].opacity=parseInt(document.images[j_tem].filters[0].opacity, 10)-2
}
else if (now>jumpa+100){
for (var j_tem = 0; j_tem < document.images.length; j_tem++)
if(document.images[j_tem].src.indexOf(imname)!==-1&&document.images[j_tem].filters[0].opacity<100)
document.images[j_tem].filters[0].opacity=parseInt(document.images[j_tem].filters[0].opacity, 10)+2
}
if (now<=jumpa)
{
imgCount++
imgCount=imgCount<images.length? imgCount : 0
var pani=document.images
for (var i_tem = 0; i_tem < pani.length; i_tem++)
if (pani[i_tem].src.indexOf(imname)!==-1){
pani[i_tem].src=images[imgCount][0]
panwidth=imwidth=pani[i_tem].width=images[imgCount][1]
}
imname=images[imgCount][0]
imw=imwidth*panheight/imheight;imh=panheight;imstart=panwidth/2-imw*1.5;
jumpa=panwidth/2-imw*2.5;jumpwida=imw-move;
jumpb=panwidth/2-imw/2;jumpwidb=imw+move;
document.getElementById("pano").style.left=imstart+'px'
tim=setTimeout("scroll()",speed);
return;
}
else{
now-=move;
}
document.getElementById("pano").style.left=now;
tim=setTimeout("scroll()",speed);
}
document.write("<div id='panorama'>");
document.write("<div id='pano' style='position:absolute; left:"+imstart+"px; top:0px; width:"+imw*3+"px; height:"+imh+"px; z-index:2; visibility:visible;'>");
document.write("<table><tr><td nowrap><img galleryimg='no' src='"+imname+"' width="+imw+"px height="+imh+"px><img galleryimg='no' src='"+imname+"' width="+imw+"px height="+imh+"px><img galleryimg='no' src='"+imname+"' width="+imw+"px height="+imh+"px><\/td><\/tr><\/table>");
document.write("<\/div><\/div>");
document.write("<style>");
document.write("body { margin-left:0; margin-right:0; margin-top:0; margin-bottom:0;overflow:hidden;}");
document.write("#panorama {position:absolute; left:"+posleft+"px; top:"+postop+"px; width:"+panwidth+"px; height:"+panheight+"px; z-index:1; clip:rect(0px,"+panwidth+"px,"+panheight+"px,0px); overflow:hidden;}");
document.write("<\/style>");
</script>
</body>
</html>

**dotcomtim** · 01-13-2006, 03:30 AM

That is actually neater looking than I thought it would be, as for the IE only that is fine with me seeing that I am only going to be using it in the front lobby of the motel playing tours of the cottage rentals we have.

Thank you very very much for your time.

Thread: Automated Panoramic DHTML

Thread Tools

Search Thread

Automated Panoramic DHTML

Bookmarks

Bookmarks

Posting Permissions