Solved

how to make this jquery slideshow work?

Posted on 2011-09-19
6
194 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
Comment Utility
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
Comment Utility
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
Comment Utility
try this plugin then

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

check fade option...
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

Author Comment

by:charmingduck
Comment Utility
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
Comment Utility
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
Comment Utility
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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Time picker 4 462
how to avoid duplicate value selection in drop down 18 1,334
Jquery Tree Grid 7 201
Problem with jscript mask. 3 70
Never store passwords in plain text or just their hash: it seems a no-brainier, but there are still plenty of people doing that. I present the why and how on this subject, offering my own real life solution that you can implement right away, bringin…
In this article, I will show you HOW TO: Create your first Windows Virtual Machine on a VMware vSphere Hypervisor 6.5 (ESXi 6.5) Host Server, the Windows OS we will install is Windows Server 2016.
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
This video shows how to remove a single email address from the Outlook 2010 Auto Suggestion memory. NOTE: For Outlook 2016 and 2013 perform the exact same steps. Open a new email: Click the New email button in Outlook. Start typing the address: …

744 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

18 Experts available now in Live!

Get 1:1 Help Now