WordPress.org

Ready to get started?Download WordPress

Forums

Meta Slider
[resolved] Meta Slider and WPTouch Pro3 (11 posts)

  1. xmarksthespot
    Member
    Posted 1 year ago #

    I'm new to wordpress. I'm using WordPress 3.5.1 and the Twenty Ten theme.

    My initial aim is to get a mobile-friendly website up and running using WPTouch Pro3 - a paid for version of their free plug in WPTouch.

    I've recently inserted Metaslider 2.1.4 onto my mobile home page and although the end result is great and the slider works perfectly, the page seems to load and then the slider gets added at the end. So the result is a bit of a jump when the page loads. In fact, you get a glimpse of the caption and pager dots first and finally the first image in the slider

    I've contacted the helpful support at WPTouch. They see the issue but believe there's a fault with the slider - as when the site is viewed on a smartphone in desktop mode the same issue occurs.

    The site is http://m.xmarksthespot.co.uk. You'll need a smartphone or safari browser with user agent iphone to see it.

    The only other active plug-ins I have are contact7 and capthcha.

    Any ideas please? Feel free to ask for more info, I'll do my novice best to help!

    http://wordpress.org/extend/plugins/ml-slider/

  2. Matcha Labs
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  3. xmarksthespot
    Member
    Posted 1 year ago #

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

  4. Matcha Labs
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    Take a look at this thread http://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

  5. xmarksthespot
    Member
    Posted 1 year ago #

    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

  6. Matcha Labs
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  7. xmarksthespot
    Member
    Posted 1 year ago #

    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?

  8. Matcha Labs
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  9. xmarksthespot
    Member
    Posted 1 year ago #

    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.

  10. xmarksthespot
    Member
    Posted 1 year ago #

    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.

  11. Matcha Labs
    Member
    Plugin Author

    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic