Hello!
I’m looking to create Parallax rows as part of my Theme, in the header/footer areas for example. I don’t want the clients to need to create new rows in the content area for this purpose & in most cases the rows will not feature in the main content area anyway.
Rather than install an additional parallax system to achieve this, I’d rather use the perfect nice PageBuilder Parallax script already in place! What would I need to add to my Theme divs to have them trigger the existing parallax script, is it even possible? I have had a play with adding in the custom data attributes that are in space on actual PageBuilder parallax rows, but I was only hacking around with no clear idea of what I was doing. It didn’t work obviously :D
If there is an additional method I could use to do this, I’m open to suggestions!
Many thanks in advance!
Mat
Hi Mat
This might be fairly complex, but it’s definitely doable. So the first thing you’d need to do is enqueue the parallax script using something along the lines of
wp_enqueue_script('siteorigin-parallax')It’s always registered, so this should work.
The next part is the really technical part though, and it’s not that well documented because I didn’t really expect anything outside of Page Builder to use it.
The JS looks for any elements with the attribute data-siteorigin-parallax, that data attribute needs to have a JSON encoded array with keys that define the motion. These are all the keys that you’d need to specify:
https://github.com/siteorigin/siteorigin-panels/blob/develop/js/siteorigin-parallax.js#L16-L28
Hopefully that points you in the right direction.
Hi Greg,
Many thanks for the help. I think I have that working now. It was a little more complex, as I’m also calling in the extra parallax images from ACF image fields (Advanced Custom Fields plugin). Once I had things working with hardcoded image data, I figured out a way to populate the JSON array from the ACF info (For ACF users, you need to set your image type to Array, so you can grab the sizes). For anyone else who may want to do this, I’ve got to this point, which is working for me. I’ve stripped this all back for clarity.
<?php $bgimage = get_field('page_background'); $url = $bgimage['url']; $width = $bgimage['width']; $height = $bgimage['height']; ?> <div data-siteorigin-parallax='{"backgroundUrl":"<?php echo $url; ?>","backgroundSize":[<?php echo $width; ?>,<?php echo $height; ?>],"backgroundSizing":"scaled","limitMotion":"auto"}'></div> </div>Also, it didn’t want to call the parallax script by just enqueuing it in functions.php. I needed to actually register it as well. It only worked by enqueuing only, if I was using actual PageBuilder parallax elsewhere on the page. If you can think of any way for me to simplify this stage, that would be great! At the moment, I’m reliant on the paths to the .js script staying the same.
in functions.php:
<?php if( !is_admin()){ function load_scripts() { wp_register_script( 'siteorigin-parallax', get_site_url() . '/wp-content/plugins/siteorigin-panels/js/siteorigin-parallax.min.js', array('jquery'), null, true ); wp_enqueue_script('siteorigin-parallax'); add_action('init', 'load_scripts'); } ?>Thanks again for the help!
Mat
BTW there is a stray closing in that first code section. I can’t figure out how to edit it!