Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

how to make this jquery slideshow work?

Posted on 2011-09-19
6
Medium Priority
?
204 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
6 Comments
 
LVL 59

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 59

Expert Comment

by:HainKurt
ID: 36561789
try this plugin then

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

check fade option...
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

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

Assisted Solution

by:HainKurt
HainKurt earned 500 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 59

Accepted Solution

by:
HainKurt earned 500 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Are you an Exchange administrator employed with an organization? And, have you encountered a corrupt Exchange database due to which you are not able to open its EDB file. This article will explain all the steps to repair corrupt Exchange database.
The core idea of this article is to make you acquainted with the best way in which you can export Exchange mailbox to PST format.
In this video you will find out how to export Office 365 mailboxes using the built in eDiscovery tool. Bear in mind that although this method might be useful in some cases, using PST files as Office 365 backup is troublesome in a long run (more on t…
In response to a need for security and privacy, and to continue fostering an environment members can turn to for support, solutions, and education, Experts Exchange has created anonymous question capabilities. This new feature is available to our Pr…

722 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