Making a php javascript slideshow in wordpress

Question

I am making my first steps learning to code. I made some courses on Internet and now I'm continue learning from the experience while I build a Wordpress child theme.

The thing is that I'm making an image slideshow. I found this great and simple one in w3schools: http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_self.

It's really fine but there are some problems if I want to use it in Wordpress.

I have a post type template with some fields that I build using the Advanced custom fields app. For the moment I have 10 images fields to make the slideshow.

So it means that this:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>

<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content" style="max-width:800px;position:relative">

<img class="mySlides" src="img_fjords.jpg" style="width:100%">
<img class="mySlides" src="img_lights.jpg" style="width:100%">
<img class="mySlides" src="img_mountains.jpg" style="width:100%">
<img class="mySlides" src="img_forest.jpg" style="width:100%">

<a class="w3-btn-floating" style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)">❮</a>
<a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)">❯</a>

</div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  x[slideIndex-1].style.display = "block";
}
</script>

</body>
</html>

Becomes this in Wordpress:

<?php get_header(); ?>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  x[slideIndex-1].style.display = "block";
}
</script>



<div class="mySlides"><?php the_field("image"); ?></div>
<div class="mySlides"><?php the_field("image_2"); ?></div>
<div class="mySlides"><?php the_field("image_3"); ?></div>
<div class="mySlides"><?php the_field("image_4"); ?></div>
<div class="mySlides"><?php the_field("image_5"); ?></div>
<div class="mySlides"><?php the_field("image_6"); ?></div>
<div class="mySlides"><?php the_field("image_7"); ?></div>
<div class="mySlides"><?php the_field("image_8"); ?></div>
<div class="mySlides"><?php the_field("image_9"); ?></div>
<div class="mySlides"><?php the_field("image_10"); ?></div>


<a class="home-btn-left" onclick="plusDivs(-1)">❮</a>
<a class="home-btn-right" onclick="plusDivs(1)">❯</a>


</div><!-- .content-area -->

<a class="homelink" href="http://localhost/wordpress/">Sarah Morris</a>

<?php get_footer(); ?>

Now the problem is that I have to upload 10 images in all my posts. If one day I upload only 8 images for example, I will see the 8 images but I will also see two blank spaces because of the other image fields that I'm not using.

After some days trying to find a solution, I found that I have two options to do it:

1) Using the repeater field of the Advanced custom fields plugin.

2) Using this code:

<?php if(get_field("image") != ""): ?>
        <div class="mySlides"><?php the_field("image"); ?></div>
<?php endif; ?>

The repeater field is a premium feature. I don't want to pay for a plugin, I prefer to learn how to make by my self so I decided to use the second option.

Now the problem is that the second option doesn't work correctly. It doesn't make what I want: To make an Slideshow without blank spaces when I'm using less than 10 images.

I know that this code is really near from the objective that I want to achieve. Do you have some suggestion?

Darko · Accepted Answer · 2016-09-07 14:46:18Z

2

You can hide empty fields, here's the link

So your php code should probably look something like this:

    <?php if( get_field("image") ): ?>    
       <div class="mySlides"><?php the_field("image"); ?></div>
    <?php endif; ?>

Complete Tutorial - default WP Twenty Sixteen theme used

Here's the suggestion of how to make this work - tested and working 100%

Navigate to "Custom Fields"
In the "Field Groups" create a new one and name it "slider" for example
Click "+ Add Field" button and you should setup your field like this
Repeat this for as many images you want to appear in the slider
in the "locations settings" setup the condition where you want your slider to appear, here's the example - this one appears on all pages and posts
Hit "Publish" button and your slider is ready

Page Template code

I suggest you to create a custom page template for this, although it's not necessary

<?php
/**
 * Template Name: Example Template
 *
 *
 * @package WordPress
 * @subpackage Twenty_Sixteen
 * @since Twenty Sixteen 1.0
 */

get_header();
// get ACF values 
$image = get_field('image');
$image2 = get_field('image_2');
$image3 = get_field('image_3');
?>

<div id="primary" class="content-area" style="position:relative;">
  <main id="main" class="site-main" role="main">

  <?php  // 1st image
  if( !empty($image) ): ?>
    <div class="mySlides"><img style="width:100%;" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /></div>
  <?php endif; ?>   

 <?php  // 2nd image
 if( !empty($image2) ): ?>
 <div class="mySlides"><img style="width:100%" src="<?php echo $image2['url']; ?>" alt="<?php echo $image2['alt']; ?>" /></div>
 <?php endif; ?>

 <?php  // 3rd image
 if( !empty($image3) ): ?>
 <div class="mySlides"><img style="width:100%" src="<?php echo $image3['url']; ?>" alt="<?php echo $image3['alt']; ?>" /></div>
 <?php endif; ?>

 <a class="w3-btn-floating" style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)">❮</a>
 <a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)">❯</a>


</main><!-- .site-main -->

<script>
    var slideIndex = 1;
    showDivs(slideIndex);

    function plusDivs(n) {
        showDivs(slideIndex += n);
    }

    function showDivs(n) {
        var i;
        var x = document.getElementsByClassName("mySlides");
        if (n > x.length) {slideIndex = 1}
        if (n < 1) {slideIndex = x.length}
        for (i = 0; i < x.length; i++) {
             x[i].style.display = "none";
        }
        x[slideIndex-1].style.display = "block";
    }
</script>

<?php get_sidebar( 'content-bottom' ); ?>

Or Another simpler solution:

using php empty

if( !empty(get_field('image')) ): ?>    
   <div class="mySlides"><?php the_field("image"); ?></div>
<?php endif; ?>

if( !empty(get_field('image_2')) ): ?>    
   <div class="mySlides"><?php the_field("image_2"); ?></div>
<?php endif; ?>

if( !empty(get_field('image_3')) ): ?>    
   <div class="mySlides"><?php the_field("image_3"); ?></div>
<?php endif; ?>

Try like this first - with your existing code

edited Sep 7, 2016 at 14:46

answered Sep 6, 2016 at 12:45

Darko

93010 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Valentin Verdegales Over a year ago

Using this code only makes me see the first image superimposed over the second. And dont hide the empty fields. But thank you, I will study it and try to understand it

Darko Over a year ago

Did you repeat this "if" condition for each "the_field", before div class="mySlides"?

Darko Over a year ago

also check for eventual html error, I can see you have closed </div>, but there's no opened <div> anywhere on the page

Collectives™ on Stack Overflow

Making a php javascript slideshow in wordpress

1 Answer 1

Complete Tutorial - default WP Twenty Sixteen theme used

Page Template code

Or Another simpler solution:

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Complete Tutorial - default WP Twenty Sixteen theme used

Page Template code

Or Another simpler solution:

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related