• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 209
  • 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
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

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