[javascript] Panoramic Images with external js files

[LeightonJames]

The school I am at today require the use of 360 degree interactive panoramic images on their Website. this would not normally be an issue for me however I have 1 major constraint:

 

The site solutions provider will not give me access to the back end of the site so I cannot upload any javascript files

 

Anyone got any solutions for me?

 

I can use the WYSIWYG editor to add HTML code to the page that is not a problem but I'm having issues getting one solution I found to work using this method as the HTML added is only inserted into the body of the site:

 

360 panoramic javascript virtual tour - Free

 

I am at my wits end.

 

Thanks for looking

Edited September 22, 2014 by LeightonJames

[LosOjos]

What's stopping you from using the JS you posted above? It doesn't have to be in the head, you can put it in the body

[LeightonJames]

I tried it and it didn't work, there was just white space where the image should have been.

 

I have tried multiple methods of calling this code and I cannot get it to work. I suspect it is related to a restriction on the hoster's side of things. If that is the case does anyone have any other suggestions as to how I can get this to work?

[LosOjos]

I tried it and it didn't work, there was just white space where the image should have been.

 

I have tried multiple methods of calling this code and I cannot get it to work. I suspect it is related to a restriction on the hoster's side of things. If that is the case does anyone have any other suggestions as to how I can get this to work?

 

It may be that the code needs to be loaded before the image, which would of course happen if the script was in the head. If that is the case then you should be able to get around it by importing jQuery, then putting in a little script to add in the image when the page has finished loading (i.e. inside $(document).ready())

 

Something like this (untested, but should give you the idea)

 

<br />
	     // Author: Edvin Eshagh<br />
<br />
     function show360Simple( divContainerId, imageUrl )<br />
    {<br />
    show360( divContainerId, imageUrl , 200, 20 , 1);<br />
    }<br />
<br />
<br />
     function show360( divContainerId<br />
                             , imageUrl<br />
                             , imageWidthInPixels<br />
                             , moveIntervalInMS<br />
                             , moveSteps )<br />
<br />
    {<br />
<br />
     	 var o = document.getElementById( divContainerId );<br />
<br />
     o.style.backgroundImage = 'url'+'(' + imageUrl + ')';<br />
<br />
     o.style.position = "relative";<br />
<br />
     o.innerHTML = '<div style="width:20%; height:100%;position:absolute;"'<br />
      +   ' onmouseover="show360Direction(\'' + divContainerId + '\',-2);">'
     + '      +   ' onmouseover="show360Direction(\'' + divContainerId + '\',-1);">'
     + '      +   ' onmouseover="show360Direction(\'' + divContainerId + '\',0);">'
     + '      +   ' onmouseover="show360Direction(\'' + divContainerId + '\',1);">'
     + '      +   ' onmouseover="show360Direction(\'' + divContainerId + '\',2);">';

    show360Direction( divContainerId, 1 );

    setTimeout( "move360( '" + divContainerId  + "', " + moveSteps + ", 0, "
     + imageWidthInPixels + ", " + moveIntervalInMS +" );", moveIntervalInMS );

   } // show360()


    function show360Direction( divContainerId, iDirection ) {
    eval( "show360_" + divContainerId + " = " + iDirection ) ;
    }


    function move360( divContainerId
                           , iDirectionStep
                            , deltaX
                            , imageWidth
                            , refreshInterval )

   {

     //if( deltaX > imageWidth || deltaX<0) {iDirectionStep *= -1;}

     deltaX += eval( "show360_" + divContainerId ) * iDirectionStep;

     var o = document.getElementById( divContainerId );

     o.style.backgroundPosition = deltaX + "px 0px";

     var evalFunc = "move360( '" + divContainerId + "'"
                                        + ", " + iDirectionStep
                                        + ", " + deltaX
                                        + ", " + imageWidth
                                        + ", " + refreshInterval
                                        + ");";

     setTimeout( evalFunc, refreshInterval );

    } // move360()

    // here is where jQuery might save you
    $(document).ready(function(){
	show360Simple( "myhome", "/images/txb5_money.jpg");
});


Maybe put a loading gif here

 

EDIT: I changed it a bit based on the example in your link, so if you've already tried it I apologize but try this new version!

EDIT2: missed a bracket (I hate Javascript)

Edited September 22, 2014 by LosOjos

[spadam]

Also, have you checked that the Javascript is actually being saved to the page? Can you see it when you load the page and inspect the code in a browser? Some editors will strip out script to prevent users uploading malicious code inadvertently.

 

If this is happening and you can't turn this off then you most likely need to go back to the provider, explain to them what you need to do and determine the best way... Does the site use a particular CMS platform?

[LeightonJames]

It may be that the code needs to be loaded before the image, which would of course happen if the script was in the head. If that is the case then you should be able to get around it by importing jQuery, then putting in a little script to add in the image when the page has finished loading (i.e. inside $(document).ready())

 

Something like this (untested, but should give you the idea)

 

<br />
	     // Author: Edvin Eshagh<br />
<br />
     function show360Simple( divContainerId, imageUrl )<br />
    {<br />
    show360( divContainerId, imageUrl , 200, 20 , 1);<br />
    }<br />
<br />
<br />
     function show360( divContainerId<br />
                             , imageUrl<br />
                             , imageWidthInPixels<br />
                             , moveIntervalInMS<br />
                             , moveSteps )<br />
<br />
    {<br />
<br />
     	 var o = document.getElementById( divContainerId );<br />
<br />
     o.style.backgroundImage = 'url'+'(' + imageUrl + ')';<br />
<br />
     o.style.position = "relative";<br />
<br />
     o.innerHTML = '<div style="width:20%; height:100%;position:absolute;"'<br />
      +   ' onmouseover="show360Direction(\'' + divContainerId + '\',-2);">'
     + '      +   ' onmouseover="show360Direction(\'' + divContainerId + '\',-1);">'
     + '      +   ' onmouseover="show360Direction(\'' + divContainerId + '\',0);">'
     + '      +   ' onmouseover="show360Direction(\'' + divContainerId + '\',1);">'
     + '      +   ' onmouseover="show360Direction(\'' + divContainerId + '\',2);">';

    show360Direction( divContainerId, 1 );

    setTimeout( "move360( '" + divContainerId  + "', " + moveSteps + ", 0, "
     + imageWidthInPixels + ", " + moveIntervalInMS +" );", moveIntervalInMS );

   } // show360()


    function show360Direction( divContainerId, iDirection ) {
    eval( "show360_" + divContainerId + " = " + iDirection ) ;
    }


    function move360( divContainerId
                           , iDirectionStep
                            , deltaX
                            , imageWidth
                            , refreshInterval )

   {

     //if( deltaX > imageWidth || deltaX<0) {iDirectionStep *= -1;}

     deltaX += eval( "show360_" + divContainerId ) * iDirectionStep;

     var o = document.getElementById( divContainerId );

     o.style.backgroundPosition = deltaX + "px 0px";

     var evalFunc = "move360( '" + divContainerId + "'"
                                        + ", " + iDirectionStep
                                        + ", " + deltaX
                                        + ", " + imageWidth
                                        + ", " + refreshInterval
                                        + ");";

     setTimeout( evalFunc, refreshInterval );

    } // move360()

    // here is where jQuery might save you
    $(document).ready(function(){
	show360Simple( "myhome", "/images/txb5_money.jpg");
});


Maybe put a loading gif here

 

EDIT: I changed it a bit based on the example in your link, so if you've already tried it I apologize but try this new version!

EDIT2: missed a bracket (I hate Javascript)

 

YOU GENIUS!!! Thank you VERY much. This worked!! Absolutely amazing!! Have some rep/thanks what ever you want!!

[LosOjos]

YOU GENIUS!!! Thank you VERY much. This worked!! Absolutely amazing!! Have some rep/thanks what ever you want!!

 

Happy to help

[LeightonJames]

@LosOjos - I was wondering if you would be able to work your magic on this one??

 

(function(){ dmdEmbeds.push("cyRZLD");})();

 

I have tried copying and pasting this into the source as it should work directly but it doesn't. I can't figure out why and what I need to do to rectify it.

 

Thanks again

[LosOjos]

@LosOjos - I was wondering if you would be able to work your magic on this one??

 

 

 

I have tried copying and pasting this into the source as it should work directly but it doesn't. I can't figure out why and what I need to do to rectify it.

 

Thanks again

 

What is it supposed to achieve? It looks as though it just adds a string to the end of an array - is that happening? If you hit F12 in FF/Chrome, you should be able add a 'Watch' to that array (dmdEmbeds), then see if this value is actually getting added to it.

 

If it is, the problem lies elsewhere, if it's not then we can look at that code you posted

[LeightonJames]

Ok.............

 

I just tried it again this morning and it is working ok. Not sure what is going on. Wish I had access to the back end of the Site but that is never going to happen unfortunately.

 

I will leave you alone now. I promise