[Plugin: Meteor Slides] broken slide transition

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="https://www.ranacreek.com/dev/wp-content/themes/ranacreek/scripts/projects.js"></script>
    <script type="text/javascript" src="https://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.

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:
https://www.ranacreek.com/dev/

And one of my smaller ones (which there are many of):
https://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!

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.

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?

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

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

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

I will definitely do that this time. Thanks!

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

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.

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

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.

Alright. Thanks JLeuze. I appreciate all your help.