Support » Plugin: WP Photo Album Plus » $.GET wwppa

  • In order to reduce loadtime on mobile I do not want to load an wppa-album on initial pageload but I want to put it ‘behind’ a button. So on buttonclick I execute “$.get({url: ‘https://www.magoster.nl/php/photo.php?func=wppa_slide&albumnr=1’, cache: false })”.

    It returns the text ‘[wppa type=”slide” album=”1″ size=”auto”][/wppa]’ as could be expected. But is does not load/show the album itself. Can anyone help me how to then execute this wppa-code? The relevant javascriptcode is below.

    Cheers, Rudolph Smits

    In webpage javascript:
    $.get({url: ‘https://www.magoster.nl/php/photo.php?func=wppa_slide&albumnr=1’, cache: false })
    .done(function( resultaat_get ) {
    PhoneBlock.innerHTML = resultaat_get;
    })
    .fail(function( err ){
    PhoneBlock.innerHTML = ‘<hr>Sorry, get failed…<hr>’;;
    });

    In photo.php:
    $function = $_GET[‘func’];
    $variables = $_GET[‘albumno’];
    $function($variables);
    function wppa_slide($albumnr) // $albumnr = not yet used
    {echo ‘[wppa type=”slide” album=”1″ size=”auto”][/wppa]’;}

    The page I need help with: [log in to see the link]

Viewing 11 replies - 16 through 26 (of 26 total)
  • I have no doubt that you will succeed but just take your time! By the way, thanks that you will do this all.

    On buttonclick my first statement checks wheather the content hasn’t already loaded after an earlyer buttonclick before so that the content can be shown right away. No doubt that you were already aware of such a check. 😉

    Plugin Author Jacob N. Breetvelt

    (@opajaap)

    Currently i have this working:

    
    [wppa type="slide" album="24" photo="143" button="TestButton"][/wppa]

    A slideshow of album 24, starting with photo id 143 hidden under button with text TestButton.
    This is a safer solution than i suggested before: the internal counters are automatically correct and there are no duplicate html tag id’s.
    See near the bottom of https://beta.opajaap.nl/testpage/

    The button is the content of the wppa conainer, when you press it, it is replaced by the slideshow, fetched by ajax, even if ajax is not enabled.

    Still working on a way to keep the button and replace its functionality in hide/show the existing content after the first action i.e. the only real download.

    To be continued…

    Plugin Author Jacob N. Breetvelt

    (@opajaap)

    Got it working, see https://beta.opajaap.nl/testpage/

    The show/hide buttons are below the actual slideshow. Pls tell me if you want them this way or you want them above the slideshow.

    Rudolph Smits

    (@rudolph-smits)

    Do I get this right? The only command I would have to use is this one:
    [wppa type=”slide” album=”24″ photo=”143″ button=”Diavoorstelling”][/wppa].

    As I understand this solution requires a new button and I have already an own submenu choice. Please check my site http://www.magoster.nl and you’ll see what I mean by clicking twice on Foto’s.

    I should want a similar solution with that difference that on button click a shortcode command i.e. ‘[wppa type=”slide” album=”24″ photo=”143″ button=”Diavoorstelling”][/wppa]??‘ is send to a particular division.

    I already have my own ajax-coding to show or hide this division ($function to .show or .hide blocks).

    But the feeling is now growing that what I want isn’t very general. And I can fully understand that your solution only can be generic. So, will my wishes ever be possible?

    Plugin Author Jacob N. Breetvelt

    (@opajaap)

    This is to do with hiding my slideshow buttons (initial and subsequent) by on the page css:

    
    <style>#wppa-button-initial-1, #wppa-button-show-1 { visibility:hidden; }</style>

    and transferring the menuclick to the click on my buttons, using on the menu item:

    
    onclick="jQuery('#wppa-button-initial-1').click();jQuery('#wppa-button-show-1').click();

    On any moment there exists only one activating button, either the initial or the subsequent (show) button.

    Rudolph Smits

    (@rudolph-smits)

    I got this working, thanks!

    <input type=’button’ value=’MyButton’ onclick=’wppaDoAjaxRender( 1,”https://www.magoster.nl/wp/wp-content/plugins/wp-photo-album-plus/wppa-ajax-front.php?action=wppa&wppa-action=render&wppa-size=640&wppa-moccur=1&wppa-fromp=6730&wppa-album=1&wppa-slide&wppa-occur=1″)’ />
    <br />
    landing after this:<br /><br />
    <div id=’wppa-container-1′></div>
    landing before this:

    The initial purpose to do this was to load less html on pageload and load (some/most) of the wppa-html on-button-click. But I see no difference in html-size before and after button-clicking. That is no surprise for you?

    If so, does this solution reduce execution time on pageload? On smartphone that would be worth while enough!

    Rudolph Smits

    (@rudolph-smits)

    Besides my questions above there is this:

    &wppa-size=640.
    The size 640 is too small for desktop and too large for smartphone. Size “auto” does not work. Can this be changed?

    Plugin Author Jacob N. Breetvelt

    (@opajaap)

    The feature has now been implemented inside wppa. See the changelog of version 6.7.07:

    New shortcode attribute button for type=”slide” only. Example:
    [wppa type=”slide” album=”13″ button=”Show me the slideshow”][/wppa]
    This will hide the slideshow behind a button. Clicking the button will download the slideshow code to the browser. This is to reduce and speedup loading pages with slideshow(s).

    If you use the embedded version – that i explicitly created for you – size=”auto” will work like it does in ‘normal’ shortcodes.

    The html that is loaded after the button click is processed by javascript. You do not see that in the page source display in the browser.

    Plugin Author Jacob N. Breetvelt

    (@opajaap)

    To measure the effect, compare the page sources of the two cases where you have either button="My Button" or not in the shortcode.

    A full example of the way you should do this follows. Asuming ‘your’ button/menuitem – where you want to work it on – is a textlink with content ‘MyMenuItem’:

    Menu item code:

    
    <a onclick="jQuery('#wppa-button-initial-1').click();jQuery('#wppa-button-show-1').click();" >MyMenuItem</a>

    Page content:

    
    <style type="text/css" >#wppa-button-initial-1, #wppa-button-show-1{display:none !important;}</style>
    [wppa type="slide" album="1" button="MyButton"][/wppa]

    You can see this exact example (with album="19") here: https://beta.opajaap.nl/test-hidden-slideshow/

    The ‘generic’ buttons to initially fetch the slideshow and subsequently re-display – after having it clicked away by the hide button – are now hidden by the on-page <style> tag; the functionality has been taken over by the textual ‘menu’-item. You can use anything else for this, as long as it supports the onclick="" attribute.

    The pageloads in the example on my dev site are: 2.54 MB with the button=".." attribute, and 3.89 MB without the button attribute.

    You will need to update to the current release version 6.7.07 or later to get this working as showen.

    Yeah, I will certainly do so but I a am away now for a few days.

    size=”auto”; stupid me, I tried size=auto ;-(

    Last question, repeatedly pressing the button, does that invoke every time the album to be loaded, or is it loaded only on first button click and is it shown immedeately the second time and more. If so, I do not have to check an “album is already loaded” myself.

    Thanks a lot for this feature by the way!!!

    Plugin Author Jacob N. Breetvelt

    (@opajaap)

    size="auto" will not work either, because the manually created <div id=’wppa-container-1′></div> is far from complete to be responsive. Try the ‘official’ version like explained above.

    Only the first time the slideshow will be loaded and it is shown immedeately the second time and more. It is simply hidden and shown by jQuery().hide() and jQuery.show(); in fact, the ‘real’ download (hidden) button is overwritten by the slideshow itsself and replaced by a (hidden) button that simply .show() the existing slideshow. So, you do not need to check for already loaded. The second etc time you show the slideshow is because of jQuery('#wppa-button-show-1').click(); in the onclick attribute of your menu item simulates the click on the (hidden) button that shws the slideshow by .show()

Viewing 11 replies - 16 through 26 (of 26 total)
  • The topic ‘$.GET wwppa’ is closed to new replies.