Achieving a dynamic "Picture Presentation" feature with JavaScript/jQuery

Question

Achieving a dynamic "Picture Presentation" feature with JavaScript/jQuery

Currently, I am in the process of developing a website that will serve as a presentation. My plan is to create a slideshow effect using JavaScript. While I have implemented some functions, I must admit that it is not very organized at the moment. The main concept behind this project is to begin with the first slide, and upon pressing the space bar, the current slide will fade out while the next one fades in. Subsequently, pressing the space bar on the second slide should transition to the third, and so forth.

Below, you can find an example using JS BIN. However, I acknowledge that the implementation is far from ideal. Any assistance in refining and improving the functionality would be greatly appreciated. Ideally, I aim for the code to allow for easy addition of slides, but I am struggling to determine whether a for loop, switch statement, or another approach would best suit this purpose. Thank you for taking the time to read through this request.

JS BIN EXAMPLE

javascript jquery html css

Answer 1

Answer №1

If you want to streamline your HTML and CSS code, you can avoid repetitive styling and excessive use of IDs for similar elements by following a few simple rules:

<div  class="section">Introduction</div>
  <div class="section">Chapter 1</div>
  <div class="section">Chapter 2</div>
  <div class='section'>
  Conclusion
  </div>

For the CSS part, keep it minimal and efficient:

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;
}

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

When it comes to the jQuery part, simplicity is key. Set z-index values, define slide numbers, and enable navigation with ENTER key press:

i = 0;
num_of_slides=4;

$('.section').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++;
            $('.section').eq(i).fadeIn(2000);
            $('.section').eq(i - 1).fadeOut(2000);

            if (i == num_of_slides) {
                i = 0;
                $('.section').eq(i).fadeIn(2000);
            }
        }
    }
});

Check out the live demo here: https://jsfiddle.net/tx0p4xge/

Answer 2

If you want to streamline your HTML and CSS code, you can avoid repetitive styling and excessive use of IDs for similar elements by following a few simple rules:

<div  class="section">Introduction</div>
  <div class="section">Chapter 1</div>
  <div class="section">Chapter 2</div>
  <div class='section'>
  Conclusion
  </div>

For the CSS part, keep it minimal and efficient:

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;
}

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

When it comes to the jQuery part, simplicity is key. Set z-index values, define slide numbers, and enable navigation with ENTER key press:

i = 0;
num_of_slides=4;

$('.section').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++;
            $('.section').eq(i).fadeIn(2000);
            $('.section').eq(i - 1).fadeOut(2000);

            if (i == num_of_slides) {
                i = 0;
                $('.section').eq(i).fadeIn(2000);
            }
        }
    }
});

Check out the live demo here: https://jsfiddle.net/tx0p4xge/

Answer 3

Answer №2

An option to explore is utilizing a bootstrap slideshow feature. For more information, check out this resource.

Answer 4

An option to explore is utilizing a bootstrap slideshow feature. For more information, check out this resource.

Answer 5

Answer №3

After playing around with your jsbin, I found that it worked well for me. However, I made a slight adjustment by changing the keycode to 13 (for Enter) instead of 32 (Spacebar), as I noticed this can vary between PC and Mac users. I also tweaked the css a bit - you can check out the updated code snippet below. I added some placeholder text; perhaps this could be an easier approach for you? Unless you already have prepared pages in place? In any case, I suggest making sure the content fits on the screen before presenting. Simply copy and paste the center divs and rename them center3, 4, etc. Your js currently loops through the pages, but you can see how to fix that - you accidentally killed the first slide! Remember, it's a work in progress.

A solid 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.......

Answer 6

After playing around with your jsbin, I found that it worked well for me. However, I made a slight adjustment by changing the keycode to 13 (for Enter) instead of 32 (Spacebar), as I noticed this can vary between PC and Mac users. I also tweaked the css a bit - you can check out the updated code snippet below. I added some placeholder text; perhaps this could be an easier approach for you? Unless you already have prepared pages in place? In any case, I suggest making sure the content fits on the screen before presenting. Simply copy and paste the center divs and rename them center3, 4, etc. Your js currently loops through the pages, but you can see how to fix that - you accidentally killed the first slide! Remember, it's a work in progress.

A solid 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.......

Achieving a dynamic "Picture Presentation" feature with JavaScript/jQuery

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to transfer XML data format from a web browser to a server using jQuery?

Load information from a JavaScript object when the user clicks dynamically

Issue with jquery selector function when handling ajax response containing HTML data

Switch up the stylesheet in WordPress when an administrator is signed in

Is it possible for PHP to return jQuery code and have it execute immediately upon being echoed?

Disoriented InstancedMeshes causing confusion in THREE JS

Pair of buttons triggering the submission of a form

Styling and theming in PrimeNG

What is the best way to retrieve the initial cell from a row that the user is currently hovering over?

Utilizing Google Maps in conjunction with anchor scrolling to a specific div element

Error: Unable to load Handlebars helper function

Preventing Shift: How to Only Replace the Chosen Vue Draggable Item Without Affecting Other Grid Items

Whenever I use NextJS's <Link> component, I always end up getting redirected to a

code for handling window.location.href error

Issue encountered during production build in Angular 6 due to NGRX

JavaScript to enable button functionality for selected items

Tips for evenly distributing these cards

Exploring Angular Factory: Creating the getAll method for accessing RESTful APIs

Internet Explorer is unable to recognize the .less file format

jQuery: Revealing or concealing several divs upon selection alteration