Solved

jQuery Slideshow with Relative Postioning

Posted on 2011-09-15
10
365 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 500 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

733 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