Solved

how to make this jquery slideshow work?

Posted on 2011-09-19
6
195 Views
Last Modified: 2012-08-14
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
Comment
Question by:charmingduck
  • 4
  • 2
6 Comments
 
LVL 51

Expert Comment

by:HainKurt
ID: 36561150
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
 

Author Comment

by:charmingduck
ID: 36561617
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
 
LVL 51

Expert Comment

by:HainKurt
ID: 36561789
try this plugin then

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

check fade option...
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:charmingduck
ID: 36561818
i just wanted to make that code work, I'm aware of the plugins.
0
 
LVL 51

Assisted Solution

by:HainKurt
HainKurt earned 125 total points
ID: 36562570
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
 
LVL 51

Accepted Solution

by:
HainKurt earned 125 total points
ID: 36562599
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
DIV Panel Jumps to side when jQuery Sticky kicks in 2 374
Modifying My Json Race Series Page 2 120
Jquery height() issue 13 153
Export data and graph to excel 11 380
In the hope of saving someone else's sanity... About a year ago we bought a Cisco 1921 router with two ADSL/VDSL EHWIC cards to load balance local network traffic over the two broadband lines we have, but we couldn't get the routing to work consi…
In 2017, ransomware will become so virulent and widespread that if you aren’t a victim yourself, you will know someone who is.
This Micro Tutorial demonstrates using Microsoft Excel pivot tables, how to reverse engineer competitors' marketing strategies through backlinks.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

863 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

21 Experts available now in Live!

Get 1:1 Help Now