HomeForumsPanoPress SupportMake it to work with Ajax

Tagged: ,

This topic contains 4 replies, has 3 voices, and was last updated by  sting01 2 years, 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #3400

    oitoporoito
    Participant

    Hello, folks.

    I’m creating a new wordpress website and need to keep all my old stuff running.
    I bought a theme that makes panopress work in the page preview, but when I enter a specific part of the site that uses Ajax, the Panopress plugin is not loaded, only the background image. Can’t even see the play button.

    I contacted the theme developer and got this reply:

    “Please note that this is not something with our theme .
    It seems the panopress plugin is not ajax compatible.
    Please note that the units in course are loaded with the ajax and the page does not reloads at all .
    The panopress plugin is loading its scripts and styles in the page load but in course page does not loads at all .

    Please contact the panopress plugin author or support to run its script on a particular js even on which the units in our theme loads:

    Please refer : Run custom actions on unit load “

    Here’s the code from the referenced link above:
    $(‘.unit_content’).on(‘unit_traverse’,function(){

    //Your custom code

    });

    Is it possible to do? Can anyone help me (paid or not).
    Thanks a lot for reading till the end! 🙂

    #3401

    Sam Rohn
    Keymaster

    there was a similar ajax loading problem reported with another theme in the following topic –

    http://www.panopress.org/forums/topic/virtual-tour-only-appears-after-page-resfresh/

    the solution was to turn off ajax loading in the theme settings

    otherwise, @omer will have a look at this and see if there is a quick fix or we can otherwise provide better support for ajax loading in the next release of panopress

    thanks

    sam

    Sam Rohn :: New York City
    360° Panoramic Photography :: www.samrohn.com
    Location Scout :: www.nylocations.com

    #3402

    oitoporoito
    Participant

    Thanks, Sam.

    In my case I can’t disable AJAX. It’s the complete navigation mode for the private content.

    I hope to hear from @omer soon. I’m only waiting for this to release my new website.
    Or at least tell me if another programmer can do this, or if it should be done only by you guys.

    Thanks!

    #3418

    sting01
    Participant

    Not sure if that may help, but I can share what I do.

    First, I am a developper since late 1974 (started very young), mean I know javascript, Perl, php, Cobol, Lips and others, but I know nib about worpress particularities, or jquery, or shortcode.

    Our website was build by another team (not anymore in the company) and I get in-charge starting lastyear. Because our website is a commercial one, it was unacceptable to have to wait the 360 tour to be arrived for closing the DOM (for performance reasons), we are in a niche market (luxury real estate in Phuket thailand) with obviously high end customers who will not wait 20 secs for start browsing, on the other hand, said customers will be (or were, or will be) in thailand, with a slow internet (DSL mostly). So the need to trigger a late call to panopress (AFTER DOM is close), and AJAX should have been the obvious solution; alas no luck.

    Last bit of problem that showed up is when caching the pages with nginx (we do use php but most of the pages does not change), using the short code had the result to cache the first response (swf if it was from a desktop, or html5 if it was a mobile). So the vital need to allow panopress to recognize the origin every time it was called.

    But before Ajax, 20 years ago, we were using the ‘iframe trick’ with great success (for those who remeber). So here is a synopsis (moke code) of what I came with :

    1) You remote the short code, and place a div instead, to please the eye, you may place into the div the static image of your 360 tour.

    2) on an external file (or in the footer of the page), you create a javascript function, that will make sure the div will have the correct dimension for the 360, you will replace the current content (static image) by an iframe , said iframe calling the embeded version of your 360.

    3) using onload event, you will fire the function AFTER the close is close (so google analytic for exemple will not see said call; neither will your visitors; giving both of them the illusion of a fast website; futhermore it privilegiate the visible content as google expect us to do.

    Moke code :

    function insert360vt(widh,heigh) {
    if(!document.getElementById(‘outer_360Vt’)) { return null;}
    if(document.getElementById(‘outer_360Vt’).innerHTML != ” ) { return null;}
    var widh2 = widh || 629;
    var widh = widh || 650;
    var heigh2 = heigh || 400;
    var heigh = heigh || 400;
    document.getElementById(‘outer_360Vt’).style.display=’block’;
    document.getElementById(‘outer_360Vt’).style.width= widh + ‘px’;
    document.getElementById(‘outer_360Vt’).style.height= heigh + ‘px’;
    document.getElementById(‘outer_360Vt’).style.overflow=’hidden’;

    var d = new Date();
    var dated = d.getTime();
    document.getElementById(‘outer_360Vt’).innerHTML = ‘<iframe scrolling=”no” id=”myIframe” width=”100%” height=”410px” src=”‘ + globalObject.virtualTourProp.url + ‘?embed=true&width=’ + widh2 + ‘&height=400&style=light&dt=’ + dated + ‘” allowfullscreen=”true” mozallowfullscreen=”true” webkitallowfullscreen=”true” frameborder=”0″></iframe>’;

    }

    if( (globalObject.virtualTourProp) && (globalObject.virtualTourProp.autoStart) && (globalObject.virtualTourProp.autoStart == ‘yes’) ) {
    var widh = globalObject.virtualTourProp.custWidth || 400;
    var heigh = globalObject.virtualTourProp.custHeight || 250;
    window.onload = setTimeout(function(){insert360vt(widh, heigh);}, 10);
    }

    Obviously, all the global variable (globalObject methods) are declared in the header.php of your theme, so while it is OLD way to proceed, it is conform to the concept of ‘variables in time’ that imply of the needed variables to be ready at opening.

    The setTimeout(function(){…},10); is creating a closure (forcefully), allowing us to pass parameters to the function (normal syntax DOES NOT allow it), and make sure we will hang any action the visitor is doing.

    I hope it may help, or provide ideas.

    regards

    #3419

    sting01
    Participant

    Precision, I will gladly listen to any critic, or suggested improvement to that method by the maintener of panopress. Obviously, I post also with hope they may come with something better.

    Remember too, it is moke code (saved it 18 month ago as template code).

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.