If I understand correctly, you want all the content in a single post, and just want a user interface that will provide a slideshow effect for the ten image/text blocks?
I don’t know of a plugin, but if you can’t find one, you could accomplish what you want with JQuery’s Slide Effect if it is included WordPress’ JQuery core, or just use a less-fancy effect and JQuery to cycle between slides.
You’d just need to create a container in the HTML of the post with the buttons and slide numbers, wrap your ten image/text blocks in divs with a distinct class to create each slide in your post, hide all but the first one when the page loads, then use the button click events to cycle through the “slides.”
You could use JQuery to calculate and handle the slide numbers, so all you’d have to do is include the divs with the appropriate classes if you wanted to reuse the JQuery in different posts.
I got bored at work and got to thinking about this. I’ve got a solution for you. If you’re game, you can use this pretty much anywhere you want in WordPress for any number of individual “slides.” Once it’s set up, it will be fairly easy to use.
Here’s a step-by-step procedure to get it working:
- Create a child theme for whatever theme you’re using so your modifications won’t be lost when you update your theme. (Note: It’s a lot easier than that article makes it sound because there’s a lot of info there.)
- Create an “images” folder in your child theme’s folder: /wp-content/themes/<your child theme>/images
- Download all four of the navigation button images from here, and then upload them into your newly created /wp-content/themes/<your child theme>/images folder.
- Create a “js” folder in your child theme’s folder: /wp-content/themes/<your child theme>/js
- Click the Download link to save the jQuery code here as a text file. Rename it as “div_slideshow.js” then upload the file to your newly created /wp-content/themes/<your child theme>/js folder.
- Copy the header.php file from your parent theme (the theme you copied to make the child theme) to your /wp-content/themes/<your child theme> folder.
- Edit the header.php file you copied to your child theme, and add the following code right after the last “<link…” tag in the “head” section of the file:
<script type="text/javascript">
var imagedir = "<?php echo get_stylesheet_directory_uri(); ?>" + "/images/";
</script>
- Create a functions.php file using a text-only editor (like Notepad), including the following code:
<?php
function add_div_slideshow_js () {
// The following line loads the custom script as well as jquery, jquery effects core, and the jquery slide effect libraries.
wp_enqueue_script('div_slideshow', get_stylesheet_directory_uri() . '/js/div_slideshow.js', array('jquery', 'jquery-effects-core', 'jquery-effects-slide'));
}
add_action('wp_enqueue_scripts', 'add_div_slideshow_js');
?>
If you already have a functions.php file for your child theme, just add the code above without the opening and closing PHP tags.
- Add the following code at the end of your child theme’s style.css:
.div_slide {
float: left;
width: 100%;
}
.div_slideshow_nav {
display: inline;
padding-left: 15px;
}
.play_div_slideshow {
display: inline;
}
.div_slideshow_previous img, .div_slideshow_next img {
vertical-align: middle;
}
After you activate your child theme, you should be ready to go.
You can use the slideshow in a post, or elsewhere. The easy way to use it in a post is to lay out the “slides” as you want with images and text in the visual editor, then once you have them entered, use the text tab to wrap the whole thing in a div like this:
<div class="div_slideshow_container">
...slides will go here
</div>
and each slide in divs like this:
<div class="div_slide">
...content for the slide
/div>
so that a given post would look like this:
<div class="div_slideshow_container">
<div class="div_slide">
...content for the first slide
/div>
<div class="div_slide">
...content for the second slide
/div>
</div>
You don’t have to number the slides, and you can use as many as you want.
