$.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]
-
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…
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.
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.
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 theonclick=""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.
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()andjQuery.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 ofjQuery('#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()
- The topic ‘$.GET wwppa’ is closed to new replies.
