bmwboarder

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

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)?

Were you ever able to get this fixed? I am having the exact same error with the same file ??

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.

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