PDA

View Full Version : jQuery / CSS slideshow. Images jump when not Absolute Positioned.


tux
05-27-2010, 11:02 AM
Hi guys,

Not sure if this is a jQuery issue or a CSS issue.

I am using a jQuery slideshow script and want the images to be centered in a div. The images will be different widths.

The script gives CSS with absolute positioning and works great, but when I alter the CSS to center the images they start to jump when they change.

Could someone put me right on this and get the images to center without jumping.

I've put 2 test pages up for you to see one that jumps and one that is absolute positioned and changes smoothly. Check the source for the code.

Heres the links.....

AP Smooth change. (http://www.atmplumbingandheating.co.uk/slideshow_test_apdiv.html)

Centered jumping change. (http://www.atmplumbingandheating.co.uk/slideshow_test.html)

Thanks guys, Paul

Corrosive
05-27-2010, 12:46 PM
Hmmm... Interesting effect. Practical solution is to make the images the same size by centreing them on a white background that fills the rest of the div and then rotating that. Bit of Photoshop work but it solves the issue without diving into the code.

tux
05-27-2010, 01:23 PM
Thanks for that Corrosive but the client will be uploading images eventually which will be different sizes. I will restrict the height to suit the layout but the widths will be different from image to image and whether portrait or landscape.

As you will see from the source codes if you use absolute positioning it works great but if not you get that jumping. I think its being caused by the div temporarily containing 2 images until the jQuery fades it out.

Therefore, I need a way to center the AB POS img element.

But how??

domedia
05-27-2010, 02:10 PM
tux the centering demo looks great here

tux
05-27-2010, 02:19 PM
Yeah Dom, I was just about to post as I just uploaded a sort of solution.

Its still not ideal but what I have done is set the fadeout to zero and the fadein to 2 secs.

Without setting a value they are 400 ms by default. So, the next image was taking up the space and pushing the previous image over momentarily.

It would be better if someone new how to stop the next image from displaying at all until the previous image fades to zero.

Anyone!!

old code....

<script type="text/javascript">
$(function(){
$('#fadein img:gt(0)').hide();
setInterval(function(){
$('#fadein :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('#fadein');},5000);
});
</script>

new version.....

<script type="text/javascript">
$(function(){
$('#fadein img:gt(0)').hide();
setInterval(function(){
$('#fadein :first-child').fadeOut(0)
.next('img').fadeIn(2000)
.end().appendTo('#fadein');},5000);
});
</script>

New version here. (http://www.atmplumbingandheating.co.uk/slideshow_test.html)

ranjan
05-27-2010, 09:22 PM
http://jsbin.com/idabo3 (click on "Edit using jsbin" to view the code)

1. To center i used the following CSS


position: absolute;
display: block;
margin: 0 auto;


2. Before appending, remove, this prevents dom just creating infinite images


.end().remove().appendTo('#fadein');}, 3000);