[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

jQuery Slideshow with Relative Postioning

Posted on 2011-09-15
10
Medium Priority
?
375 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

650 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