WordPress.org

Ready to get started?Download WordPress

Forums

Meteor Slides
[resolved] broken slide transition (14 posts)

  1. bmwboarder
    Member
    Posted 3 years ago #

    Hi there,

    The Meteor Slides plugin is looking great, but I still have one problem left before I can call it complete. I am using the "fade" transition, and it does not work very well. The first image seems to fade out correctly, but the next image doesn't fade in at the same time. I've slowed it down for right now so it is easier to see, though still definitely a problem at higher speeds. Other transitions seem to be somewhat broken too.

    http://www.ranacreek.com/dev/

    I did adjust some styling things in the code to get it to center how I want it (somewhat flexible of a layout), so I'm not sure if something like the position could break it or not. Any help would be greatly appreciated. Thanks.

  2. Josh Leuze
    Member
    Plugin Author

    Posted 3 years ago #

    There are a couple of things that I would look into.

    These are the current slideshow settings:

    /* <![CDATA[ */
    var meteorslidessettings = {
    	meteorslideshowspeed: "1000",
    	meteorslideshowduration: "5000",
    	meteorslideshowheight: "",
    	meteorslideshowwidth: "",
    	meteorslideshowtransition: "fade"
    };
    /* ]]> */

    First off, you want to make sure that the height and width options are set. These dimensions aren't just to size the images, but are also used by the CSS and jQuery to layout the slideshow. Leaving them blank could cause some issues.

    Now for the speed, there are two settings to control the timing, the "Transition Speed" and the "Slide Duration". The slide duration controls how long each slide is paused on in the slideshow. The transition speed controls how fast the transition is. Right now the transition is set for one second, for the fade transition I would try slowing the transition speed down to 2 or 3 seconds.

    The last thing I would look into is this JavaScript that your theme is loading:

    <script type="text/javascript" src="http://www.ranacreek.com/dev/wp-content/themes/ranacreek/scripts/projects.js"></script>
        <script type="text/javascript" src="http://www.ranacreek.com/dev/wp-content/themes/ranacreek/scripts/jquery.easing.1.3.js"></script>

    It is possible this could be conflicting with the slideshow, because it should be fading from slide to slide smoothly without revealing the white background. I would try disabling this extra JavaScript to see if that changes the slideshow's behavior.

  3. bmwboarder
    Member
    Posted 3 years ago #

    Thanks for the response. I turned off the two extra javascript, and that hasn't changed anything. They are relatively small files I wrote for some of the pages on the site.

    I think you might be onto something with the missing height and width. I did change that, because I have two sets of meteor slides, and I wasn't able to get them to be different sizes apart from deleting those. Is there a way I can control that per page?

    Here is my big slider:
    http://www.ranacreek.com/dev/

    And one of my smaller ones (which there are many of):
    http://www.ranacreek.com/dev/projects/california-academy-of-science/

    I understand the speed controls, and will end up changing it back to about 400ms, but changed it so its easier to test. Thanks for the quick response!

  4. Josh Leuze
    Member
    Plugin Author

    Posted 3 years ago #

    That narrows it down, at least you can rule out a JavaScript conflict.

    Yes, you can setup multiple slideshows with different sizes. You need to use metadata to change the size of a specific slideshow. There's a little more info in this post.

    If you want to use different sized slideshows, I'd suggest using this development version of Meteor Slides.

  5. bmwboarder
    Member
    Posted 3 years ago #

    Thanks for your quick replies. I will make a donation for this great work when its finished.

    Should I just save my current meteor-slide files elsewhere and drop those new files in the plugin folder instead?

  6. Josh Leuze
    Member
    Plugin Author

    Posted 3 years ago #

    No problem, yes save a copy in case you have any troubles and replace those files with the dev version.

  7. bmwboarder
    Member
    Posted 3 years ago #

    Thanks for the assistance.

    With the new files, the flashing is gone, which is very nice to see. The css is broken a bit now, but it shouldn't take me too long to rebuild that. I'll post a link again when it is completely fixed, or I'll have more questions :) Many thanks, you support your plugin very well.

    Brandon

  8. Josh Leuze
    Member
    Plugin Author

    Posted 3 years ago #

    Glad to help Brandon, if you use a custom stylesheet, you won't have to redo the changes again.

  9. bmwboarder
    Member
    Posted 3 years ago #

    I will definitely do that this time. Thanks!

  10. bmwboarder
    Member
    Posted 3 years ago #

    I figured out that it breaks pretty bad when I add a height: 421px to #meteor-slideshow .slide for whatever reason.

    I've got it how I want it to look again, and the flicker is gone in firefox and chrome, but now IE goes completely white as a transition. Any ideas? I'll keep playing around with eliminating things, but I'm hoping it is something simple I accidentally added...

    Thanks,
    Brandon

  11. Josh Leuze
    Member
    Plugin Author

    Posted 3 years ago #

    If you set the dimensions in the settings and override them as needed with metadata, you shouldn't have to manually adjust the height or width.

  12. bmwboarder
    Member
    Posted 3 years ago #

    Ok, that is close. The fade is better now with height/width in the settings. (maybe even better than earlier today too). I have a semi fluid layout, but it doesn't work when I set a specific width. Is there anyway to set it to auto? I can have a constant height though.

    If needed I can kill the flexible layout though :( Thanks for all the support.

    Brandon

  13. Josh Leuze
    Member
    Plugin Author

    Posted 3 years ago #

    I'm afraid I haven't seen a jQuery Cycle slideshow that was fluid, I'm not sure if that is possible or not. I'd check out the jQuery Cycle demos and see if you can find something similar to that.

  14. bmwboarder
    Member
    Posted 3 years ago #

    Alright. Thanks JLeuze. I appreciate all your help.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic