Frame Theme on WP 5.6 – Home slider misaligned

Hello ??

Have You updated Rife Free and Apollo13 Framework extensions to the newest versions?

A live link would help a lot to check on the issue.

AS for screen shot, you can use some free service to upload such and link it here, or even upload it to your WordPress and link it here ??

With kind regards.
Air.

Hi Air,

Thanks for the response.

I did set up a live site to see if I could show you the issue, but it works perfectly on the live site – typical!

https://alpujarrahabitat.com/

I added the screenshot of the error just below the slider on the home page so you can see it, but you are probably not going to be able to recreate it.

I normally develop using XAMPP on a few different virtual machines (with different versions of PHP etc). I created a brand new install with PHP 7.4.13 (same as the live site), and I still get the error – so I am guessing that it is something to do with the default XAMPP dev setup.

As this is not showing on the live site, and is only showing on FF on the development environment, I think it best to just mark it as resolved.

Best wishes,

Mark

Hello ??

I could see this issue on your website, but only on the first load on firefox.

I believe this is something related to a very specific situation, and it is rather a problem in the slider script than in the version of WordPress.

Someone reported this a long time ago, but as you said it is very hard to replicate in a consistent manner.

Even on your page, clearing the cache of the browser does not bring the issue back.

It can be related in “some” way to what is happening on the server, but ultimately it will be an issue in calculations in the script for the slider.

With kind regards.
Air.

Hi Air,

Thanks for the reply.

I had another look at this and was able to see that FireFox is returning an incorrect (and inconsistent) width for the slider container. I am guessing that this might be based on the time to load before it gets the width. On a fast server, it seems to work better than on a slow one… I have only tested the “fit_cover” option as this is the one I was using and the one that is broken for me.

The way that I fixed (bodged) this was to change what is being used to generate the slider width in the a13-slider.js file.

//  Resize each image
 elem.each(function(){
     var this_image = $(this),
     image_height  	= this_image.data('origHeight'),
     image_width  	= this_image.data('origWidth'),
     //space_width    	= $slides_list.width(),
     space_width    	= $window.width(),
     space_height   	= $slides_list.height(),
     image_ratio 	= (image_height/image_width).toFixed(4),
     space_ratio 	= (space_height/space_width).toFixed(4),
     resize_width	= 0,
     resize_height	= 0,

I simply swapped out using $slides_list for $window. Watching the results, with this change in place the width was consistent every time and therefore the image was correctly sized and positioned each time.

I could not see any downside of this nor a situation where the slider container would not be the same size as the window…but I might be wrong.

Anyway, thanks for the input and this workaround seems to fix it for me!

Regards,

Mark.

• This reply was modified 4 years, 2 months ago by markc369.

Hi there. I’ve got the same problem, I would like to try to fix it your way, but… can’t find a13-slider.js file. Where did you get this file from?

Hi Bartek,

There are a couple of things to consider…

Firstly, this is only my workaround – it is not fully tested and I only made the change that worked when you select the “Cover the whole screen” option in the home page album. Note that the changes are within the apollo-framework-extensions plugin so any updates to this plugin will probably remove your updates to it – there was an update today that did exactly that ….

Secondly, the plugin calls the minified version of the a13-slider.js, so you either have to change it to call the non-minified version or you have to make the changes and create a new minified version to replace the existing one – which is what I did.

The details:

1. To get the plugin to use the non-minified version (for testing) I added this line to the wp-config file:

define( 'SCRIPT_DEBUG', true );

Once testing was completed and I had a new minfied version, I removed/commented this.

2. I edited the following file:

wp-content\plugins\apollo13-framework-extensions\assets\js\a13-slider.js

My previous entry above has the details of the fix, but also, when compiling the minified version, I got an error due to an empty if statement (around line 1170). I just commented this out.

            //load native video API
            //if(loadNativeVideoAPI === true){
                //load mediaElement API
                //loaded already
            //}

3. I then minifed the updated file, replacing the original, and all works fine (I use Google Closure within Visual Studio Code).

Alternatively…

4. If you prefer to use the non-minified version, you can either leave the script_debug line in place (not very good), or you can edit the Assets.php file: :

wp-content\plugins\apollo13-framework-extensions\features\assets.php

Just change ‘js/a13-slider’ . $suffix . ‘.js’ to ‘js/a13-slider.js’

Again, not really the best thing to do.

Hope that helps.

Mark.

Hey @markc369

Thanks for so many details about the case and so much for in-depth debugging.

I will take a look at this soon, and check why it is behaving like that.

Thanks to your information I will be able to focus better on where this tricky issue is happening ??

Will keep you informed!

With kind regards.
Air.