jQuery Slideshow with Relative Postioning

Hi there i have 3 images setup that i want run through a jQuery slideshow. The images have been setup via relative positioning. It is important that they be positioned relatively rather than absolute. A lot of jQuery slideshow scripts out there require images to be positioned absolute for them to work as advertised.

The problem im facing with the current code is that the images jump and dont implement a smooth transistion between each image. Can anyone help me?




<div id="bg">
<img class="stretch" src="/images/slide-1.jpg" />
<img class="stretch" src="/images/slide-2.jpg" />
<img class="stretch" src="/images/slide-3.jpg" />
</div>

<style>
#bg { float: left; width: 100%;  clear: both; }
#bg img { position:relative; left:0px; top:0px; z-index:1; width: 100%; display:block; overflow: hidden;}
</style>

<script>
$(document).ready(function(){
  $('#bg img:gt(0)').hide();
    setInterval(function(){
      $('#bg :first-child').fadeOut()
         .next('img').fadeIn(2000)
         .end().appendTo('#bg');},5000);
 });
</script>

Open in new window

LVL 1
ACEAFTYAsked:
Who is Participating?
 
Kyle HamiltonConnect With a Mentor Data ScientistCommented:
Well... here are two possibilities:

1. As long as you're using JS, you could define width and height of the images dynamically according to screen size and resize. Then you could use position absolute and your favorite slideshow plugin.

2. Or, we can change the position to absolute in the script on the fly, but I haven't tried that and it might be finicky, cause you have to change it back to relative on completion to accomodate window resizing. Just thinking out loud here...

0
 
Kyle HamiltonData ScientistCommented:
Hide the image first, then you won't see it jump. That's the immediate solution. But do you want the images to fade in and out of each other?

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

Open in new window

0
 
Kyle HamiltonData ScientistCommented:
oops, sorry, typo..
<script>
$(function(){
  $('#bg img:gt(0)').hide();
    setInterval(function(){
      $('#bg :first-child').fadeOut()
         .next('img').fadeIn(2000)
         .end().hide().appendTo('#bg');},5000);
 });
</script>

Open in new window

0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
ACEAFTYAuthor Commented:
Hi Kozaiwaniec,

Yes i would like them to fade into one another. All the solutions for that kind of effect online require the images to be absolute positioned.

Hope you can help

Thanks
0
 
Kyle HamiltonData ScientistCommented:
Why tdo the images have to be positioned relative? Are you trying to accomodate non-javascript browsers? Because if so, you could just use different css for js and no-js. Let em know...
0
 
ACEAFTYAuthor Commented:
Hi Thanks for the response.

Im trying to accomodate the browser screen sizes. With position absoultes you have to define a height which is not fluid on different browser sizes hence the site background does not scale as i want it to in different screen sizes. Ive got it perfectly working with positioning the images relatively.
0
 
ACEAFTYAuthor Commented:
I like the first solution!!

How do i do that ? I mean even if there is a tutorial out there that you can point me to would be awesome. I can follow it on from there

Thank you for your advice on this
0
 
Kyle HamiltonData ScientistCommented:
Here's a simple image resize. IE and other browsers handle scrollbars differently, so in straight up javascript you have to write some stuff that excludes the scrollbars in various browsers. I don't know if jquery accommodates this issue, so I just subtracted 25px from the width for scrollbars on all browsers:

var w = $(window).width();
  $("img").width(w-25); // accomodate scrollbars
    
  $(window).resize(function() {
    var w = $(window).width();
    $("img").width(w-25);
    });

Open in new window


And here is some code to make your existing script work:

(note: you need to add position:relative to the bg div)

<style>
body, html{margin:0; padding: 0;}
   
#bg { float: left; width: 100%;  clear: both; position:relative;}
#bg img { position:relative; top:0; left:0; width: 100%; display:block; overflow: hidden;}
</style>


</head>

<body>

<div id="wrapper">

<div id="bg">
<img class="stretch" src="images/portfolio/pg_projects_fl.jpg" />
<img class="stretch" src="images/portfolio/pg_objects_fl.jpg" />
<img class="stretch" src="images/portfolio/pg_mobile_fl.jpg" />
</div>


</div><!-- #wrapper -->


<script src="js/jquery.tools.min.js"></script> 
<script src="js/jquery-ui-1.8.13.custom.min.js"></script> 
<script src="js/jquery.imageLoader.min.js"></script>
<script src="js/portfolio.js"></script> 

<script>
$(function(){
 
  var w = $(window).width();
  $("img").width(w-25); // accomodate scrollbars
    
  $(window).resize(function() {
    var w = $(window).width();
    $("img").width(w-25);
    });
    
  
  $('#bg img:gt(0)').css({opacity:0});
    setInterval(function(){
      $('#bg :first-child').animate({opacity:0}, {duration:2000, queue: false})
      .next('img').css({"position":"absolute"}).animate({opacity: 1}, 2000, function(){
         $('#bg :first-child').css({"opacity":"0", "position":"relative"}).appendTo('#bg'); 
         //alert("done!");
      });
      }, 3000);
      
      
 });
</script>

Open in new window

0
 
ACEAFTYAuthor Commented:
Thanks you are a star!!
0
 
Kyle HamiltonData ScientistCommented:
:)))))
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.