Meta Slider and WPTouch Pro3

Hi,

I know the issue you’re talking about, it’s not usually seen as the browser renders the page too quickly, but if the connection is slow you may see a flicker as the slideshow initiates.

Could you try installing the ‘plugin beta tester’ plugin and installing 2.1.5? (Currently unreleased), it should load the CSS before the slideshow is rendered, hopefully correcting the issue.

Regards,
Tom.

Tom, Thanks for the suggestions. I have installed both as suggested but the issue remains.

Hi,

Take a look at this thread https://stackoverflow.com/questions/12717097/flexslider-slow-image-load first, see if you can add the CSS from the first answer into your themes style.css file. If that fixes the problem I’ll look at adding that as inline CSS into Meta Slider.

Regards
Tom

Tom,
Thank you for your further suggestion. As I said before I’m new to all this and that includes editing CSS. However, I have looked at the first answer in the link you gave me and here’s what I’ve done.

There was already the following code in flexslider.css :

.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */

I left this as it was. As per the link I immediately followed it with:

.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;}

This has made no difference – the page footer, navigation arrows and pager dots all appear first on iphone way before the image loads.

This would make the slider unusable in my view, but hopefully you’ll see something wrong in what I’ve done or have another fix?
Regards,
Brian

Hi Brian,

Yes Meta Slider comes with the CSS, but my thinking is the CSS is loaded after the slideshow has loaded, which makes it useless. If the CSS loads before the slideshow, it should stop the flickering effect. I’ll try this myself soon, and get it into the next version of Meta Slider (if it works), just I’m incredibly busy with Meta Slider Pro at the moment!

Short version, try pasting this into your themes style.css file (go to appearance > editor and paste this at the top of the style.css file)

.flexslider .slides > li:first-child {display: block; -webkit-backface-visibility: visible;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;}

Regards,
Tom.

The CSS in WPTouch is loaded in the header and so should precede the slider load already.

Just to check my understanding – when you say “my theme’s style.css” do you mean twentyten or do you mean the wptouch plug in?

I assume I should be using a child version?

Hi, the theme CSS will be loaded in the header, but the Meta Slider CSS will be loading in the body (unless WPTouch is doing something magical with it!)

I’m not familiar with WPTouch (I thought it was a theme), but you just need to get the CSS into the same css file that is loaded in your header, by the sounds of it that would be the style.css file in the twentyten theme.

Regards,
Tom.

Sorry – I thought my first two paragraphs were clear in terms of theme versus plug in.

I’ll try as you suggest. Presumably, the outcome, if successful, will help your meta slider pro product anyway – so any diversion of your time here should be worthwhile. : )

Will get back to you.

I have added the two lines you suggested to a child version of the twentyten theme.

The problem remains.

I am still using the beta version you suggested. Will retaining that make any difference, given it only contained:
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */

Might this end up ‘overriding’ what you’ve asked me to put in twentyten?

And how do I roll back to the current stable version of meta slider? (without having to delete and reinstall)

Sorry for all the dumb questions but it’s just not clear as there seem to be differences as to what to add and where, when I compare:
1. what was originally suggested in your initial link
2. what’s in the beta version
3. your latest suggestion.

Suffice to say, it’s a tad confusing and as a novice I can’t any to work. Which is a real shame as once the slider is loaded it gives me all the functionality I need.

Hi, I’ll have to have another look at this for the next version I think.

2.1.5 is stable, it’s just not public yet, although it will be soon. If you want to download 2.1.4 the easiest way would be to delete the meta slider folder (you won’t lose your slideshows), and reinstall meta slider from your Plugins menu.

Regards,
Tom.