Jump to content

Archived

This topic is now archived and is closed to further replies.

flourishdesignstudio

Lax Section Controls and Image Stretching

By flourishdesignstudio+, in Platform 5

Recommended Posts

flourishdesignstudio+    10

flourishdesignstudio
Posted

Hi,

I am having an issue with the Lax sections on Platform 5. I can embed a widget or text box into a Lax section which is really neat, but the image in the background (the parallax image) seems to get stretched and doesn't scale in an attractive way.  For example, the page http://ed6.61e.myftpupload.com/#clients has a parallax section with a woman's face  and I thought is would scale as the browser window gets smaller but the zoom-level never changes. Also, the amount of parallax shift seems more dramatic than what we want. I thought that if I uploaded a shorter image it would scan/scroll less since the height from the image's top to bottom would be less. However, that doesn't seem to have any effect and I am at a loss of how to properly control the way the image is displayed within that box. Any thoughts, tips, or suggestions to get me pointed in the right direction?

Thanks so much for the help!

Share this post

Link to post
Share on other sites

flourishdesignstudio+    10

flourishdesignstudio
Posted

As a follow-up, I wanted to note that the parallax section (Lax) are loading strangely on everything below the Our Clients section. I think this has to do with the Essential Grid that loads and displays the logos but if there is a script or anything I can do to make this load properly please let me know and I can implement that too. As soon as you resize the browser's the background on the Lax section show up but until you resize the look offset slightly.

Thanks! 

Share this post

Link to post
Share on other sites

Andrew    207

Andrew
Posted

I couldn't see the issue, as far as i can see LAX is working as designed on your site (which looks great btw)

can you provide screenshots or whatever if you have issues?

Share this post

Link to post
Share on other sites

flourishdesignstudio+    10

flourishdesignstudio
Posted

Thanks @Andrew! The problem that I seem to have is that the page is built with various Lax and non-lax sections. I resolved my issue of the image stretching, etc. but the persisting issue is the loading. For example, any Lax section that is located beneath the Our Clients section doesn't load the image at the top of the section. I suspect this is because there is an Essential Grid gallery of the client logos that is animated and therefore pushes down all the sections that are under it. So, is there any way to control the load order to that the grid gets loaded and then the Lax sections load their photos? 

The problem corrects itself as soon as you change the browser width but until you do that it appears partially empty. I will attach a screenshot that shows how it load (blank white space) and how is should load/how it does look once you just resize the browser window slightly. If you need any other information please just let me know.

Thanks so much!

Screen_Shot_2017-02-21_at_1_37.06_PM.png

Screen Shot 2017-02-21 at 1.36.57 PM.png

Share this post

Link to post
Share on other sites

Andrew    207

Andrew
Posted

This is related to the way that LAX (which uses a jquery plugin) calculates image  position... you throw all this off with the 'on scroll' or 'on view' animation's you're applying... 

 

my recommendation is to remove the on appearance animation on pages where you'd like to use parallax.

Share this post

Link to post
Share on other sites
Go To Topic Listing Platform 5

  • Similar Content

    • mtaus
      Lax Background Image Missing
      By mtaus
      I have added a Lax section on the footer of this site: http://www.ics-law.org.php72-38.lan3-1.websitetestlink.com/ but the background image is not displaying. When I first add the image it appears in the background, but then after saving and reloading it is gone even though the thumbnail indicates it's still there. Screenshot attached.
      Any suggestions?

    • sakkthi subramaniyam
      Pagelines Framework Section Plugin
      By sakkthi subramaniyam
      Working on a very old site which has  pagelines framework theme. I need section plugin. so i can install postpins section. I have lost backup copy.
      Thank you.
    • elementalkites
      [Solved] Impulse Section — Logo Not Showing
      By elementalkites+
      Good evening. I am attempting to use the Impulse section on a page I am working on (https://dev.elementalkites.com). The tool seems to have the ability to overlay a logo on top of the slider images but in my case it isn't working, even though I have added the logo file and given it a height to display at. I have attached a screenshot for reference. Any help would be appreciated.
       
       
    • jojoking
      Videobox section shortcode
      By jojoking+
      I have to admit to being baffled.
      I'm trying to embed a video (from my WP media library) within a WP post using the videobox section shortcode.
      The shortcode section popup only allows two items to be configured - the section type, in this case videobox - and a unique id. There's no URL or other parameters such as autoplay or loop which are available within the Pagelines editor.
      Whatever I put in the unique ID makes no difference to what is shown which seems to be a default video with stars or white noise on a black background.
      I assume I need to define this ID somewhere else, or maybe WP has done it for me?
      HELP!
       
      PS This is the page source generated when a shortcode is added within the WP post editor
      <!-- VideoBox | Section --> <section id="videobox_1675853156" class="pl-sn pl-col-sm-12 pl-col-sm-offset-0 pl-sn-videobox" data-object="PL_VideoBox" data-clone="1675853156" data-level="0"><div class="pl-sn-wrap"><div class="pl-sn-pad fix" data-bind="pledit: true" > <div class="video-highlight"><h3 class="video-title" data-bind="pltext: vb_title"></h3></div> <div class="pl-video-box" data-bind="plcallback: { vb_autoplay: vb_autoplay(), vb_loop: vb_loop(), vb_controls: vb_controls(), vb_video: vb_video()}" data-callback="videobox"> <video id="280414138" autoplay loop > <source src="https://www.handinhandmanchester.org.uk/wp-content/plugins/pl-section-videobox/default.mp4?r=280414138" type="video/mp4" /> No browser html5 video. </video> <script> jQuery('#280414138')[0].load(); </script> </div> </div></div></section> </div>  
      If I add a videobox section using the Pagelines page editor the page source generated includes my video:
      <!-- VideoBox | Section --> <section id="videobox_udvu4uz" class="pl-sn pl-col-sm-12 pl-col-sm-offset-0 pl-sn-videobox" data-object="PL_VideoBox" data-clone="udvu4uz" data-level="0"><div class="pl-sn-wrap"><div class="pl-sn-pad fix" data-bind="pledit: true" > <div class="video-highlight"><h3 class="video-title" data-bind="pltext: vb_title"></h3></div> <div class="pl-video-box" data-bind="plcallback: { vb_autoplay: vb_autoplay(), vb_loop: vb_loop(), vb_controls: vb_controls(), vb_video: vb_video()}" data-callback="videobox"> <video id="429558737" autoplay loop > <source src="https://www.handinhandmanchester.org.uk/wp-content/uploads/2017/04/HIHWelcome.mp4?r=429558737" type="video/mp4" /> No browser html5 video. </video> <script> jQuery('#429558737')[0].load(); </script> </div> </div></div></section>  
    • nadielp
      Lax section behavior
      By nadielp+
      So I have a question regarding Lax nested in a container. When I drop Lax into a container I get the sizing and scrolling behavior I am after but if I set a background color for the container that color subsequently "covers" the image in Lax. What am I missing? I have tried a exhaustive number of setting combinations but I just can't get this to show the Lax image "over" the background color of the container that Lax is nested in. Any help (even someone telling me it won't work like that) would be appreciated. Thanks!
      Daniel
×