• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 207
  • Last Modified:

how to make this jquery slideshow work?

this is the concept of it

1. Stack the images on top of each other, so that the picture with the highest z-index
will be showing.
2. Fade out the top image so that the next image appears to fade in.
3. Once the fade has completed, reorder the z-indexof the images so that the current
image is on top.
4. Repeat steps 2 and 3.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<script src="http://code.jquery.com/jquery-1.3.js"></script>
  
 <script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script> 
  
  <script src="http://plugins.jquery.com/files/jquery.color.js" > </script>

   
  
  
  
  
  
  
  
  
  
  
  
  
<style type="text/css">

img { width: 300px; height:120px; xposition:absolute;}



</style>
</head>



<body>
<div id="photos">
 
 <img alt="Glendatronix" class="show"
 
src="http://www.rswallpapers.com/Clouds/Heaven's%20Rays.jpg" />
 
 <img alt="Darth Fader" src="http://www.rswallpapers.com/Clouds/Cloudscape,%20New%20Zealand.jpg" />
 
 <img alt="Beau Dandy" src="http://www.rswallpapers.com/Clouds/Formations,%20Laguna%20Beach,%20California.jpg" />
 
 <img alt="Johnny Stardust" src="http://www.rswallpapers.com/Clouds/Cloud%20Break,%20Columbus,%20Indiana.jpg" />
 
 <img alt="Mo' Fat" src="http://www.rswallpapers.com/Clouds/Orographic%20Stratiform%20Cloud,%20Mount%20Baker,%20Washington.jpg" />

 
</div>
 
  
  
  
  
  <script>
  
 $(document).ready(function(){

 rotatePics(1);
    
    
function rotatePics(currentPhoto) {
var numberOfPhotos = $('#photos img').length;
currentPhoto = currentPhoto % numberOfPhotos;
 
}
 
 


 
$('#photos img').eq(currentPhoto).fadeOut(function() {


	$('#photos img').each(function(i) {
							$(this).css('zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos );
										});

										
	$(this).show();
		
		
	setTimeout(function() {rotatePics(++currentPhoto);}, 4000);

														});
 























});
</script>

 
</body>
</html>

Open in new window

0
charmingduck
Asked:
charmingduck
  • 4
  • 2
2 Solutions
 
HainKurtSr. System AnalystCommented:
no need to play with Z-Index :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.3.js"></script>
  <script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script> 
  <script src="http://plugins.jquery.com/files/jquery.color.js" > </script>
  <style type="text/css">
    img { width: 300px; height:120px; xposition:absolute;}
  </style>
</head>

<body>
<div id="photos">
 <img alt="Glendatronix" class="show" src="http://www.rswallpapers.com/Clouds/Heaven's%20Rays.jpg" />
 <img alt="Darth Fader" src="http://www.rswallpapers.com/Clouds/Cloudscape,%20New%20Zealand.jpg" />
 <img alt="Beau Dandy" src="http://www.rswallpapers.com/Clouds/Formations,%20Laguna%20Beach,%20California.jpg" />
 <img alt="Johnny Stardust" src="http://www.rswallpapers.com/Clouds/Cloud%20Break,%20Columbus,%20Indiana.jpg" />
 <img alt="Mo' Fat" src="http://www.rswallpapers.com/Clouds/Orographic%20Stratiform%20Cloud,%20Mount%20Baker,%20Washington.jpg" />
</div>

<script>
$(document).ready(function(){
  $("#photos img").hide();
  $($("#photos img")[0]).show();
  var currentPhoto = 0;
  var numberOfPhotos=$("#photos img").length;

  function rotatePics() {
    var cImg = $("#photos img")[currentPhoto];//alert(cImg.alt);
    currentPhoto = (currentPhoto==numberOfPhotos-1)?0:currentPhoto+1;
    var nImg = $("#photos img")[currentPhoto];//alert(nImg.alt);
    $(cImg).fadeOut(1000, function(){$(nImg).fadeIn(1000)});
    setTimeout(function() {rotatePics();}, 4000);
  };

  setTimeout(function() {rotatePics();}, 4000);
});
</script>
</body>
</html>

Open in new window

0
 
charmingduckAuthor Commented:
sorry, the effect is not what I'm looking for, while the top img is fading out, the one below it needs to fadein at the same time, I need to do a cross-fading effect.
0
 
HainKurtSr. System AnalystCommented:
try this plugin then

http://www.malsup.com/jquery/cycle/

check fade option...
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
charmingduckAuthor Commented:
i just wanted to make that code work, I'm aware of the plugins.
0
 
HainKurtSr. System AnalystCommented:
try this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.3.js"></script>
  <script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script> 
  <script src="http://plugins.jquery.com/files/jquery.color.js" > </script>
  <style type="text/css">
    img { width: 300px; height:120px; position:absolute;}
  </style>
</head>

<body>
<div id="photos">
 <img class="show" alt="Glendatronix" src="http://www.rswallpapers.com/Clouds/Heaven's%20Rays.jpg" />
 <img class="show" alt="Darth Fader" src="http://www.rswallpapers.com/Clouds/Cloudscape,%20New%20Zealand.jpg" />
 <img class="show" alt="Beau Dandy" src="http://www.rswallpapers.com/Clouds/Formations,%20Laguna%20Beach,%20California.jpg" />
 <img class="show" alt="Johnny Stardust" src="http://www.rswallpapers.com/Clouds/Cloud%20Break,%20Columbus,%20Indiana.jpg" />
 <img class="show" alt="Mo' Fat" src="http://www.rswallpapers.com/Clouds/Orographic%20Stratiform%20Cloud,%20Mount%20Baker,%20Washington.jpg" />
</div>

<script>
$(document).ready(function(){
  $("#photos img").hide();
  $($("#photos img")[0]).show();
  var currentPhoto = 0;
  var numberOfPhotos=$("#photos img").length;

  function rotatePics() {
    var cImg = $("#photos img")[currentPhoto];//alert(cImg.alt);
    currentPhoto = (currentPhoto==numberOfPhotos-1)?0:currentPhoto+1;
    var nImg = $("#photos img")[currentPhoto];//alert(nImg.alt);
    //$(cImg).fadeOut(1000, function(){$(nImg).fadeIn(1000,'swing')});
    $(cImg).css('z-index',"2");
    $(nImg).css('z-index',"1");
    $(nImg).show();
    $(cImg).fadeOut(1000,'swing');
    //$(nImg).fadeIn(1000,'swing');
    setTimeout(function() {rotatePics();}, 4000);
  };

  setTimeout(function() {rotatePics();}, 4000);
});
</script>
</body>
</html>

Open in new window

0
 
HainKurtSr. System AnalystCommented:
Line 36-37 can be switched with

    $(nImg).fadeIn(1000);
    $(cImg).fadeOut(1000);

or you can give different numbers like

    $(nImg).fadeIn(3000);
    $(cImg).fadeOut(1000);

or

    $(nImg).fadeIn(1000);
    $(cImg).fadeOut(3000);
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now