[Plugin: Meteor Slides] change overflow

Alright, I found that I could change the overflow in the slideshow.js file.

Now I just need to figure out how to keep the photo centered, so that the hidden parts overflow on both sides of the div. I’d like to see the middle part of the photo, no matter what size the browser screen is. Will I have to change it from being positioned absolutely? Thanks.

Brandon

Hi Brandon, a few of the jQuery settings are tricky to override, but you should be able to use a custom stylesheet. Could you post a link to the page you are working on so that I can see exactly what you are trying to do?

Hi JLeuze,

I don’t have a link to give yet, sorry. I’ve got the slider working the way I want to in firefox, but I get a javascript error thrown in IE that says invalid argument, line 116, char 165 on jquery.js.

Any ideas what that could be? I’m getting close, but this one is baffling me. I will send you a link to the site when I get all done, because it is looking quite good (just not in internet explorer yet…)

Thanks for this plugin, it is quite flexible really.

Ah, I think I see the problem Brandon. The jQuery that you are referring to is before the jQuery Cycle settings and is being overridden.

If you take this code from slideshow.js:

$j(document).ready(function() {

	$j('.meteor-slides,.slides,.meteor-nav a').css('height', $slideheight);

	$j('.meteor-slides,.slide,.meteor-nav').css('width', $slidewidth);

	$j('.slides').css('overflow', 'visible');

    $j('.slides').cycle({

		height: $slideheight,
		width: $slidewidth,
		fit: '1',
		fx: $slidetransition,
		speed: $slidespeed,
		timeout: $slidetimeout,
		pause: '1',
		prev: '#meteor-prev',
		next: '#meteor-next',
		pager: '#meteor-buttons',
		pagerEvent: 'click',
		cleartypeNoBg: 'true'

	});

});

And rearrange it like this:

$j(document).ready(function() {

    $j('.slides').cycle({

		height: $slideheight,
		width: $slidewidth,
		fit: '1',
		fx: $slidetransition,
		speed: $slidespeed,
		timeout: $slidetimeout,
		pause: '1',
		prev: '#meteor-prev',
		next: '#meteor-next',
		pager: '#meteor-buttons',
		pagerEvent: 'click',
		cleartypeNoBg: 'true'

	});

	$j('.meteor-slides,.slides,.meteor-nav a').css('height', $slideheight);

	$j('.meteor-slides,.slide,.meteor-nav').css('width', $slidewidth);

	$j('.slides').css('overflow', 'visible');

});

That should cause the overflow to be visible, but this depends on the transition that you have chosen, some need the overflow hidden to work and override this.

Thanks Jleuze!

I got the overflow working now, and I have everything pretty much working in firefox, but the transitions look terrible in IE (6, 7 and 8).

To get the desired effect, I gave the slide a margin-left: 50%, and a left: -650px (1/2 the max width of the photo in the slide). Here is a test I made up to demonstrate what I’m trying to get: https://www.mybikespot.com/test_for_rana.php

I got the effect working, but in IE the images show up in the .slide div first (over left: 50%) and then fill in the whole parent div.

Maybe this is stretching for the plugin. Could there be a way to fix the transitions for internet explorer? Or could there be another way to center the bigger child div within the smaller parent div (at least when the browser width is smaller than the 1250px images I want to use)?

I’m slowly getting where I want to be, but every time I fix something, I think something else breaks…

I figured out that the jquery was changing the opacity of the div, and in internet explorer half of the image would show up once the .slide div was fully opaque. So I switched the 50% and negative margin to the img instead of the parent div. Everything is positioned correctly now, even in internet explorer.

Somehow though, the transition across all browsers became a lot more flashy. It seems it is fading out the slide correctly, but instead of fading in the new one, it just loads without any fading in.

I changed some of the css:

#meteor-slideshow .slide {
	display: none;
	margin: 0 auto;
	height: 421px;
	padding: 0;
	position: relative;
}

#meteor-slideshow #slide-1 {
	display: block;
}

#meteor-slideshow .slide a {
	border: 0;
	margin: 0;
	padding: 0;
}

#meteor-slideshow .slide img {
	border: 0;
	left: 50%;
	margin: 0 0 0 -616px;
	padding: 0;
	width: 1232px;
	position: absolute;
}

I also changed line 260 of jquery.cycle.all.js to position the slides with relative instead of absolute. Thanks for the help with this so far.

Brandon

Ah, that graphic helps a lot Brandon. So you are trying to make a slideshow that is fluid and fits with width of the site? But you want the images “cropped”, not resized when the slideshow shrinks in width right?

That will be pretty tricky to pull off, but jQuery Cycle is pretty powerful. I would be someone has done this with the jQuery plugin, I would figure out that part first then get it working in WordPress. A search for “jquery cycle fluid width” brings some leads on that front.

I’ll do some tests of my own and see if I can get something to work. If you can get your demo online, I could give you some more detailed help for your IE issues.

Thanks JLeuze,

I’ve got the fluid layout working great now in all browsers. The only thing left is that the transitions don’t seem to be as good as they were before. Not unbearable, but not like the jquery cycle example page at all. Thanks for looking at this with me ??

Brandon

That’s good to hear! You could try adjusting the transition speed, I have found that certain transitions look better at certain speeds.

You could also try adding easing, this could make the transitions smoother, but I haven’t dug into this plugin yet.