WordPress.org

Ready to get started?Download WordPress

Forums

WP Orbit Slider
loading gif not showing (11 posts)

  1. glovep
    Member
    Posted 2 years ago #

    First of all: Excellent plugin! Thank you for putting in the effort, particularly making it work for mobile by keeping it fluid.

    I do have an issue with the initial loading.

    On a fresh pageload, the images appear briefly stacked (one image below another below another, etc.), then the script seems to kick in, the container resizes correctly and the slideshow starts to work as it should.

    The initial black background with the centered loading.gif does not appear. Using Firebug I cannot see the #orbit-wrap div being placed on the page, therefore the min-height fix from another post does not help in this situation.

    I am adding the orbit slider via [orbit-slider] in a page. I tried turning off all other plugins to avoid jquery conflicts but no success.

    This is a custom theme currently in development and private, I could send details via email if necessary.

    Any advice? Thanks in advance!

    http://wordpress.org/extend/plugins/wp-orbit-slider/

  2. protohominid
    Member
    Posted 2 years ago #

    I'm having this same issue. Flash of unstyled content, as they say. :-)
    Anyone have an idea of how to troubleshoot?

  3. virtualpudding
    Member
    Plugin Author

    Posted 2 years ago #

    Hey both,
    If you are referencing the plugin faqs from the Zurb site, please remember, Virtual Pudding are responsible for the WordPress plugin version and not Zurb.

    They have a 'achieving perfection' tab
    http://www.zurb.com/playground/orbit-jquery-image-slider

    This documentation was based on their original slider (that wasn't responsive) so it was a lot easier to keep things fixed using width/height.

    In the WordPress plugin, a little more markups was introduced that would enable the using to use css to style specific individual sliders set to a category.

    So, where they refer #featured, you'll need to be using .orbit-wrapper

    Try this...

    .orbit-wrapper { max-height:250px; overflow:hidden; background:#fff url('ajax-loader.gif') no-repeat center center; }
    .orbit-wrapper img { display:none; }

    Just tried it out and seems to create the desired result
    http://www.virtualpudding.co.uk/dev/playground/wp-orbit-slider/

    This all taken into account, setting fixed width/height dimensions will become problematic regarding 'responsive'. This can be corrected using media queries.

    In a nutshell, this slider will only act responively if the theme itself is responsive.
    I'm guessing many will have installed this plugin and are not using a responsive theme so the above will be a good fix.

    Hope this helps, report back so i can help further.

  4. protohominid
    Member
    Posted 2 years ago #

    Thanks for the response! I want to retain responsiveness, so what I'm wondering is if there is a way to modify the orbit jquery so that it hides the content divs until the images are loaded and the code has rendered everything...

  5. glovep
    Member
    Posted 2 years ago #

    Hey guys!

    Thanks virtualpudding for your feedback.

    From the url you provided, I cannot see the additions in the css file you gave us above. Just to clarify, did you just want us to add the above css at the bottom of default.css, or alter existing markup?
    For example, I see

    .orbit, .orbit-wrapper {
    	width: 100% !important; }

    which I probably need to alter as well?

    In any case, for testing purposes I added the 2 classes as you suggested. This does prevent the images being stacked up, but without adding a fixed height here:

    div.orbit-wrapper {
        height: 250px; /*original was 1px*/
        position: relative;
    }

    it still flashes (meaning the container size resizes and results in the content underneath suddenly moving down).

    So now in Chrome this seems to be the solution, but Firefox (v9.0.1) still flashes briefly.

    Is it possible that I have to set fixed height/width at a few other occasions, I do see quite a few height:1px and height:100% in the css, which I think might be the reason Firefox still doesn't act up as nice as Chrome.

    Please advice where/what needs to be altered. Thank you for your help!

  6. virtualpudding
    Member
    Plugin Author

    Posted 2 years ago #

    @protohominid
    Isn't that what the example above is doing?
    Then in the css for your responisve theme (that will have media queries within the css) adjust the max-height accordingly to fit.

    The savage approach would to display:none for the whole slider and show the slider only when the window (all images) are loaded.
    This could be hacked into the plugin code or a seperate jQuery trigger. That would offer no fallback for non-js users.

    Essentially, if you really (and feel capable) of getting your hands dirty with the jQuery code itself, I would bypass the plugin option altogether.

    Essentially, its the orbit slider jQuery and markup combined with a WordPress custom post type. There are tonnes of tuts for this.

  7. virtualpudding
    Member
    Plugin Author

    Posted 2 years ago #

    @glovep

    The CSS example I show above was pasted directly at the bottom of my main style.css (none of the plugin css files).

    It would really help if I could take a look.
    You can email access details to dev (at) virtualpudding (dot) com

  8. glovep
    Member
    Posted 2 years ago #

    @protohominid

    This is what you would need to do to keep it responsive:

    Example:

    .orbit-wrapper { max-height:400px;} /*height for e.g. desktop*/
    @media only screen and (max-device-width : 640px){
    .orbit-wrapper { max-height:200px;} /*height for smaller devices*/
    }
  9. luisotoni
    Member
    Posted 2 years ago #

    Hello folks!

    I'm with a similar problem.

    I'm using a responsive theme.
    I'm not having any problem with size or height in any screen.

    My problem is when the page loads the orbit slider shows all png images of each slider one after the other. But when the animation begins, all images behind desapear and the animation runs normally.

    In this site: http://www.millteksport.com/ this issue doesn't happen.

    Anyone could help me please?

    Thank you!

  10. keithdevon
    Member
    Posted 2 years ago #

    Same problem for me. I get a flash of all the slides stacked up, and then it starts working perfectly.

    This is because the orbit js code is only called after the page has loaded. So it's plain html/css up to that point.

    I've tried using the css provided, i.e.

    /* PUT IN YOUR SLIDER ID AND SIZE TO MAKE LOAD BEAUTIFULLY
       ================================================== */
    #caseStudies {
    	width: 1000px;
    	height: 210px;
    	background: #fff url('../images/orbit/loading.gif') no-repeat center center;
    	overflow: hidden; }
    #caseStudies>img,
    #caseStudies>div,
    #caseStudies>a { display: none; }

    I've changed #caseStudies to .orbit-wrapper and #featured, but these just both hide the slider altogether. The display:none rules are not being over-written by the js.

    Any help on this would be much appreciated.

    P.s. I also need to keep it all responsive!

  11. SonnyFl
    Member
    Posted 2 years ago #

    I too am having a similar issue with stacking and on any browser it seems
    besides Firefox a box behind with a question mark indicating click to load picture is present. I am not a programmer and the site is in test mode here:
    http://www.sarrahtest/wptest for the moment to debug. I do have a friend who can help me with this who is a programmer perhaps if you can help with instruction. Thank you in advance. It is a otherwise a very nice slider.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic