Solved

jQuery Slideshow with Relative Postioning

Posted on 2011-09-15
10
361 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
 
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

708 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now