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:#00FFFF; } /*.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"> <img src="images/front_images_rotator/algonquin-lake- anneprior.jpg" title="Artist #1 name" alt="Artist #1 name" /> <img src="images/front_images_rotator/doreenrenner.jpg" title="Artist #1 name" alt="Artist #1 name" /> <img src="images/front_images_rotator/elephant07.jpg" title="Artist #1 name" alt="Artist #1 name" /> <img src="images/front_images_rotator/embossing07.jpg" title="Artist #1 name" alt="Artist #1 name" /> </div> </div> </body>
