?
Solved

jQuery Slideshow with Relative Postioning

Posted on 2011-09-15
10
Medium Priority
?
377 Views
Last Modified: 2012-05-12
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

0
Comment
Question by:ACEAFTY
  • 6
  • 4
10 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 36546052
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 36546065
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
 
LVL 1

Author Comment

by:ACEAFTY
ID: 36548065
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 36548167
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
 
LVL 1

Author Comment

by:ACEAFTY
ID: 36548207
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
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 2000 total points
ID: 36548276
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
 
LVL 1

Author Comment

by:ACEAFTY
ID: 36548298
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 36548476
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
 
LVL 1

Author Comment

by:ACEAFTY
ID: 36548590
Thanks you are a star!!
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 36548702
:)))))
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Suggested Courses

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question