Results 1 to 7 of 7

Thread: Automated Panoramic DHTML

  1. #1
    Join Date
    Jan 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Automated Panoramic DHTML

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jan 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jan 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •