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