[jQuery] Re: jquery.cycle centering image
Its working perfectly on my page right now: http://john1.netfirms.com/VAM/template.html but. I know I hate the damn but too.. :confused: on a MAC in both firefox and safari it seems that the cycle using div #s1 seems to change the color of other text on the page and make it bold as the image fades out. (text under the our mandate image as well as text in the other jquery.cycle function in the whats new section. NOTE: those divs are not in the same containers as any of the elements that use the jquery.cycle function. It works perfectly now in Opera, firefox, IE 7 and Safari for Windows. When I take out the image cycle functions, then it seems to work fine. Is there any known issues like this on MAC browsers? malsup wrote: I'm aware that Cycle does not always work well in IE8 standards mode and I've submitted a error report to the IE team. We'll see what happens when the next beta comes out. -- View this message in context: http://www.nabble.com/jquery.cycle-centering-image-tp20604074s27240p20702160.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] jquery.cycle centering image
Hey, I'm fairly new to JQuery so pardon my ignorence. I've been working on trying to get an image rotator that fades a number of images in an out using the jquery.cycle plugin. It works fine, however the images that will be displaying are different in height and width. I need to fade the images in and out and ensure that they are always in the center of the div and do not exceed a maximum height or width. I got it rotating, however I cant get the images to stay in the middle of the div. If I add position: relative !important; top: 50%; left: 50%; to the image class when being displayed it centers horizontally but not vertically, but it also breaks the fade transition by displaying the new image below then placing it up once the image before has been removed. I'm not sure if I'm explaining this correctly, but here is the html and a link to my sample. Any help would be appreciated!! http://john1.netfirms.com/VAM/image_test.html Oh and dont mind the colors, for now. I use them to find out where everything is being positioned. script language=javascript type=text/javascript src=js/jquery-1.2.6.js/script script language=javascript type=text/javascript src=js/jquery.cycle.all.js/script script language=javascript type=text/javascript $(document).ready(function() { // front image rotator $('#s1').cycle({ fx: 'fade', timeout: 4000, delay: -2000, }); }); /script style type=text/css #front_image_container { text-align:center; width: 510px; height: 510px; display: table-cell; vertical-align: middle; /* used to center vertically */ background-color:#00; } /*.rotater_image img{ max-width:280px; width: expression(this.width 280 ? 280: true); } */ / css from jquery image rotator / /*#s1 { margin: auto; height: 405px; width: 380px; text-align:center; }*/ #s1 { position:relative; margin-left: auto; margin-right: auto; margin-top:auto; margin-bottom:auto; height: 415px; width: 380px; text-align:center; background-color:#FF33CC; } .pics img { position: relative !important; top: 50%; left: 50%; padding: 4px; border: 1px solid #ccc; background-color: #eee; max-width:370px; width: expression(this.width 370 ? 370: true);max-height:406px; height: expression(this.width 406 ? 406: true); } / css from jquery image rotator / /style /head body div id=front_image_container div id=s1 class=pics images/front_images_rotator/algonquin-lake-anneprior.jpg images/front_images_rotator/doreenrenner.jpg images/front_images_rotator/elephant07.jpg images/front_images_rotator/embossing07.jpg /div /div /body -- View this message in context: http://www.nabble.com/jquery.cycle-centering-image-tp20604074s27240p20604074.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: jquery.cycle centering image
Hey Mike! That works great in firefox, Opera and Safari and it is exactly what I'm looking for. But when testing it in IE 7.0 it doesn't show anything except for the background colors. Any suggestions with that? John malsup wrote: I got it rotating, however I cant get the images to stay in the middle of the div. If I add position: relative !important; top: 50%; left: 50%; to the image class when being displayed it centers horizontally but not vertically, but it also breaks the fade transition by displaying the new image below then placing it up once the image before has been removed. You need to get a little bit sneaky to get the images centering properly. Here's an example using your markup: http://jquery.malsup.com/cycle/test/nov20.html Note that since your markup does not include size info on the tags I'm delaying the start of cycle until the window load event fires, rather than using the ready event. That way sizing info can be calculated accurately. Then I calculate the size of the slide in a 'before' callback and update the margins based on the diff with the container's size. Mike -- View this message in context: http://www.nabble.com/jquery.cycle-centering-image-tp20604074s27240p20610493.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: jquery.cycle centering image
I installed ie 8 and it seems to work now, however for one of the images, the positioning is off. It seems as if the top/left corner is being positioned instead of the actual image. Screenshot here: http://john1.netfirms.com/VAM/screenshot-1.png Also I installed developer toolbar but it shows me no errors when running in IE7 mode. I also have firebug for firefox and no warnings or errors show. I think it may be happening here: var $slide = $(next) in this function - function onBefore(curr,next,opts) { var $slide = $(next); var w = $slide.outerWidth(); var h = $slide.outerHeight(); $slide.css({ marginTop: (415 - h) / 2, marginLeft: (380 - w) / 2, }); }; since technically there is no next element, it goes back to the front? Still strange why it doesnt work on IE 7 from home or work. I checked it on another system here at home too with vista and ie 7.0 and it did not load. I'll see if I can get an error message from work tomorrow morning. malsup wrote: That works great in firefox, Opera and Safari and it is exactly what I'm looking for. But when testing it in IE 7.0 it doesn't show anything except for the background colors. Interesting. I'm running IE8 and it looks ok when running in IE7 Browser Mode as well as Compatibility Mode. Can you use the Developer Toolbar to get a fix on what's going wrong in IE? -- View this message in context: http://www.nabble.com/jquery.cycle-centering-image-tp20604074s27240p20615371.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.