5 Replies - 1015 Views - Last Post: 05 August 2014 - 01:09 PM

#1 Liam O'Byrne  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 41
  • Joined: 02-April 13

<div> changes height during image slideshow transition

Posted 04 August 2014 - 06:28 AM

I am using jQuery to present a couple of images in the form of a slideshow.

The functionality of the slideshow works fine, but during the transition between one image to the other, the <div> in which the images are contained constantly changes height.

Please see the attached screen captures.

Here is my HTML:
<div id="slideshow">
<img class="img" src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
<img class="img" src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
</div>


Here is my CSS:
#slideshow {
text-align: center;
}
#slideshow .img {
}


Thank you in advance.

Attached image(s)

  • Attached Image
  • Attached Image
  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: <div> changes height during image slideshow transition

#2 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3608
  • View blog
  • Posts: 12,393
  • Joined: 12-December 12

Re: <div> changes height during image slideshow transition

Posted 04 August 2014 - 07:32 AM

You are missing something.. the JS/jQuery that does the transitioning. There is little that can be said from screenshots and two lines of html, apart from a guess that you should give the div a fixed height and width.

A link to the live site would be useful as well.

This post has been edited by andrewsw: 04 August 2014 - 07:33 AM

Was This Post Helpful? 0
  • +
  • -

#3 Liam O'Byrne  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 41
  • Joined: 02-April 13

Re: <div> changes height during image slideshow transition

Posted 04 August 2014 - 11:19 AM

andrewsw,

Thank you for your response.

I don't believe the jQuery to be the problem on this occasion. However, here it is:

jQuery(document).ready(function()
{
    jQuery('.img:gt(0)').hide();
    setInterval(function() {
        jQuery(".img:first-child").fadeOut(3000).next(".img").fadeIn(3000).end().appendTo("#slideshow")
}, 4000);
       
});


I would have provided a link but I am using Apache and MySQL via XAMPP to create a website using WordPress (locally). I hope this helps.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3608
  • View blog
  • Posts: 12,393
  • Joined: 12-December 12

Re: <div> changes height during image slideshow transition

Posted 04 August 2014 - 01:54 PM

I am not sure what you are trying to achieve.

If I use this css, based on the information I have, it prevents the image from jumping (horizontally or vertically):
#slideshow {
    text-align: center;
    width: 500px; 
    height: 332px; 
    overflow: hidden;
}

One issue is that the setInterval of 4-seconds is shorter than the combined length of animations, 6-seconds(+), causing an overlap.

Appending the element frequently is also part of the problem but, as I say, I am not sure what you are trying to achieve. That is, whether it is one image that is replaced in the same location, or there will be a (horizontal or vertical) gallery of images, with 2 (or more) visible at a time.

I have moved this to the jQuery forum anyway, as this seems to be the main issue.
Was This Post Helpful? 0
  • +
  • -

#5 Liam O'Byrne  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 41
  • Joined: 02-April 13

Re: <div> changes height during image slideshow transition

Posted 04 August 2014 - 03:16 PM

andrewsw,

Your CSS method does prevent the image transition from 'dropping' the previous image with the new image.

I apologise for not highlighting my primary intentions. My aim is to create a simple jQuery image slideshow. One image should be replaced by another image in the same location. By adding your CSS method, this can be achieved.

However, I failed to mention that my website is responsive. So when I add your CSS method I get the following (see images attached). As you can see, the images in the slideshow are non-responsive.

However, if I change the CSS to:

#slideshow {
}
#slideshow .img {
}


I get the following (see images attached). As you can see, the image in the slideshow are responsive but the transition problem is back.

Attached image(s)

  • Attached Image
  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#6 Liam O'Byrne  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 41
  • Joined: 02-April 13

Re: <div> changes height during image slideshow transition

Posted 05 August 2014 - 01:09 PM

I have successfully solved the issue concerning the transition glitch. As guessed, the problem was revolved around the CSS. I altered my CSS to read:

#slideshow {
 position: relative;
 width: 100%;
 height: 332px;
}
#slideshow .img {
 position: absolute;
}


> The position: absolute; property prevented the images from moving during transitions.
> The width: 100%; property allowed the images to be fully responsive.
> And using media queries, I altered the height property to accommodate a wide range of aspect ratios.

Admittedly, it was a long-winded way of resolving the problem, but at least it looks good and I didn't have to submit to using a plug-in.

Please see the attached screen captures of it in action. Thanks for your help, andrewsw.

Attached image(s)

  • Attached Image
  • Attached Image
  • Attached Image
  • Attached Image

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1