CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kevin Doan
Kevin Doan

Reputation: 27

Creating a "Slideshow" effect using JS/jQuery

I'm trying to create a website that's going to be a presentation. I had this idea to make it a slideshow effect using JS. Right now I have some of the functions I want but It's not very clean. The general Idea is that you start the page on the first slide, and when you press space bar it will fade out the slide and fade in the next one. Then when you press space bar on the second page it moves on to the third. So on and so-forth.

I have an example below using JS BIN but the idea isn't implemented very well. If someone could help me flesh it out and make it more functional I would appreciate it very much. Ideally the code will allow me to easily add slides but I can't wrap my head around how to do so. I'm playing with the thought of having either a for loop, switch statement, or something similar that would allow me to do so but I can't nail down which one I need to use exactly. Thanks for taking the time to read this far.

JS BIN EXAMPLE

Upvotes: 1

Views: 187

Answers (3)

Rachel Gallen
Rachel Gallen

Reputation: 28563

I fiddled around with your jsbin and it seemed to work fine, although i did change the keycode to 13 (enter) instead of 32 (spacebar) - i find this varies from pc to mac. I adjusted the css a little, have a look at the updated code (snippet below). I did insert dummy text - maybe this may be an easier way to go? Unless you have pages already prepared? But either way, I would recommend verifying if the material fits on the screen before you give the presentation. All you have to do now is copy and paste the center divs and rename them center3, 4 etc. Your js loops through the pages at the moment, but you can see how to fix that - you managed to kill the first slide! And it is a WIP (work in progress).

A great start to your presentation.

Rach

var lastLoaded = "";

$(document).ready(function(){
	initIntro();
});

function initIntro(){
	$("#title");

$(document).keypress(function(e){    
  
  if (e.keyCode == 13) {           
               killIntro();
       }
});

}

function killIntro(){
	
	$("#title").fadeOut(1000, function(){
		$("body").remove("#title");
	});
	
    initPage0();
}


function initPage0(){
	$("#center").fadeIn(1000, function(){
		$("body");
	});

$(document).keypress(function(e){    
  
  if (e.keyCode == 13) {           
               killPage();
  		}
	});
}


function killPage(pg){
	$("#center").fadeOut(1000, function(){
		$("body").remove("#center");
		initPage1();
	});
}

function initPage1(){
	$("#center2").fadeIn(1000, function(){
		$("body").load("./pages/page1.php");
	});
}
body{
	font-family: 'apercuregular', arial, sans-serif;
	background-color: #96bff7;
    overflow:hidden;
	position: absolute;
	margin: 0px;
	top:     0px;
	left:    0px;
	width:  100%;
	height: 100%;
	z-index:  10;
}

h2, h3, h4{text-align:center;}

div section{text-align:justify;}
#title{
	position:absolute;
	width:100%;
    height:100%;
	top:5%;
	margin:0 auto;
	font-weight:300;
	line-height:1.1em;
	background-color:#96bff7;
  z-index: 10;
}

#center{
	position:relative;
	width:100%;
    height:100%;
	top:5%;
	margin:0 auto;
	font-weight:300;
	line-height:1.1em;
	background-color:#96bff7;
  z-index: 9;
}


#center2{
	position:relative;
	width:100%;
    height:100%;
	top:5%;
	margin:0 auto;
	font-weight:300;
	line-height:1.1em;
	background-color:#96bff7;
  z-index: 8;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Presentation</title>
</head>
<body>
  <div id="title"><h2>Presentation</h2>
    <h4>by Your Name</h4></div>
  <div id="center"><h3>Page</h3>
    <section><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae scelerisque massa. Cras sed tortor pellentesque dolor interdum dapibus. Sed lobortis feugiat mauris, vel posuere nunc sagittis vitae. Aenean diam purus, pretium vitae sem quis, varius scelerisque orci. Sed in lectus pellentesque augue scelerisque congue. Sed cursus ultrices ante, id volutpat orci congue sit amet. Proin suscipit ipsum nec enim varius consequat. Mauris eget vulputate nisl, commodo condimentum nisi. Integer sodales consectetur metus, non mattis leo cursus in. Duis lacinia molestie dui sit amet euismod. In ullamcorper molestie arcu, in consequat augue eleifend tincidunt. Curabitur quis turpis efficitur, tempus mi id, hendrerit lorem.</p>
<p>
Ut ut laoreet diam. Vestibulum bibendum, diam vitae cursus convallis, dui lorem ultrices est, ac consectetur libero est a dolor. Maecenas tincidunt tristique augue, non bibendum dolor. Duis ut dolor vel lorem hendrerit ultrices et in tortor. Curabitur bibendum libero sit amet eros rutrum, consectetur molestie lorem efficitur. Sed eleifend, diam a iaculis sollicitudin, lorem ipsum malesuada massa, ac aliquam lorem tortor nec justo. Mauris finibus vulputate semper. Quisque vitae tempus diam. Ut bibendum nisi nec massa blandit feugiat. Sed non nisi sapien. Phasellus ac ipsum eu ipsum mattis aliquam vitae eu purus. Proin vel egestas libero. Phasellus non finibus erat.</p></section></div>
  <div id="center2"><h3>Page2</h3>
      <section><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae scelerisque massa. Cras sed tortor pellentesque dolor interdum dapibus. Sed lobortis feugiat mauris, vel posuere nunc sagittis vitae. Aenean diam purus, pretium vitae sem quis, varius scelerisque orci. Sed in lectus pellentesque augue scelerisque congue. Sed cursus ultrices ante, id volutpat orci congue sit amet. Proin suscipit ipsum nec enim varius consequat. Mauris eget vulputate nisl, commodo condimentum nisi. Integer sodales consectetur metus, non mattis leo cursus in. Duis lacinia molestie dui sit amet euismod. In ullamcorper molestie arcu, in consequat augue eleifend tincidunt. Curabitur quis turpis efficitur, tempus mi id, hendrerit lorem.</p>
<p>
Ut ut laoreet diam. Vestibulum bibendum, diam vitae cursus convallis, dui lorem ultrices est, ac consectetur libero est a dolor. Maecenas tincidunt tristique augue, non bibendum dolor. Duis ut dolor vel lorem hendrerit ultrices et in tortor. Curabitur bibendum libero sit amet eros rutrum, consectetur molestie lorem efficitur. Sed eleifend, diam a iaculis sollicitudin, lorem ipsum malesuada massa, ac aliquam lorem tortor nec justo. Mauris finibus vulputate semper. Quisque vitae tempus diam. Ut bibendum nisi nec massa blandit feugiat. Sed non nisi sapien. Phasellus ac ipsum eu ipsum mattis aliquam vitae eu purus. Proin vel egestas libero. Phasellus non finibus erat.</p></section></div>
</body>
</html>

Upvotes: 1

sinisake
sinisake

Reputation: 11328

You can simplify HTML and CSS a lot, there is no need for css repeating, or using of ids, for the same looking elements:

<div  class="div">IntroPage</div>
  <div class="div">Page0</div>
  <div class="div">Page1</div>
  <div class='div'>
  END
  </div>

CSS:

body{
    font-family: 'apercuregular', arial, sans-serif;
    background-color: #96bff7;
    overflow:hidden;
    position: absolute;
    margin: 0px;
    top:     0px;
    left:    0px;
    width:  100%;
    height: 100%;
    z-index:  10;
}




.div{
    position:absolute;
    width:400px;
    top:170px;
    left:50%;
    margin-left:-26px;
    font-weight:300;
    line-height:110%;
    text-align:justify;
    background-color:#96bff7;

}

And jQuery part, could be more elegant, for sure, but this will work too. Set z-indexes (avoid css repeating), set counter, number of slides, and slide on ENTER click:

   i = 0;
        num_of_slides=4;
    //set z-indexes
        $('.div').each(function(i) {
        $(this).css('z-index',num_of_slides-i);
        });
        $(document).keypress(function(e) {
          if (e.keyCode == 13) {
            if (i <= num_of_slides) {
              i++;
              $('.div').eq(i).fadeIn(2000);
             $('.div').eq(i - 1).fadeOut(2000);
//if you want to go from the slideshow start
              if (i == num_of_slides) {
                i = 0;
                $('.div').eq(i).fadeIn(2000);
              }
            }
          }
        });

Demo: https://jsfiddle.net/tx0p4xge/

Upvotes: 1

Ali Soltani
Ali Soltani

Reputation: 9927

You can use bootstrap slideshow. see this.

Upvotes: 1

Related Questions