Integrate a fancy slideshow with JQuery.
Slideshow Reloaded provides an easy way to integrate a slideshow for any WordPress installation.
Any image or video can be loaded into the slideshow by picking it from the WordPress media page.
This is a fork (an updated clone) of Stenfran Boonstra’s Slideshow. I fixed several bugs, completed some feature requests from the original plugin’s support forum, updated deprecated code, and tested it in recent versions of WordPress and PHP.
If you’re using the old plugin, all of your existing slideshows will automatically work with this version.
Find the Slideshow project’s source code in GitHub repository. The
uncompressed files can be compiled using Prepros, or CodeKit.
Install Slideshow either via the WordPress.org plugin directory, or by uploading the files to your server.
After activating Slideshow, click on ‘Slideshows’ and create a new slideshow.
Click on ‘Insert Media Slide’ to insert an image or video slide.
Go to a post or a page and add a shortcode with “[slideshow_reloaded id=’123′]”.
Here's what a default slideshow can look like.
Create a new slideshow. Slides and settings specific to this slideshow can be set here.
If you haven't uploaded any images yet, you can do so on the WordPress media page.
Click the 'Media Slide' button in the Slides List to search and pick images from the WordPress media page. Click 'Insert' to insert the image or video in the slide.
The images you selected are directly visible in your Slides List, don't forget to save!
When you understand the basics of creating slideshows, you may want to go a little more in depth and have a look at the General Settings page. As seen in the image above, privileges can be granted to user roles to give users the ability to add, edit or delete slideshows.
Default slideshow settings can be edited here. Slideshows that are newly created, will start out with these options.
Click the ‘Image slide’ button in the ‘Slides List’ of the slideshow. A screen will pop up where you’ll be able to search though all images that have already been uploaded to your WordPress website. If you want to add new images to the slideshow, or you do not have any images yet, you’ll have to upload them to the WordPress media page first.
Just like the posts and pages you’re already familiar with, slideshows can be edited. Go to the ‘Slideshows’ tab in your WordPress admin, and you’ll see a list of slideshows. If you have not created a slideshow yet, you can do so by clicking ‘Add new’ on that same page. If there are slideshows in the list, click on the title of the slideshow you want to change the settings of. On the slideshow’s edit page you’ll be able to find a box titled ‘Slideshow Settings’, in this box you can change the slideshow’s settings.
If you’re creating multiple slideshows that should have the same settings, but their settings need to be different from the default settings, you can change the default settings by going to the ‘General Settings’ page and clicking on the ‘Default Slideshow Settings’ tab. Newly created slideshows will start off with the settings you set there.
On your WordPress admin page, go to the ‘Slideshows’ menu item and click on ‘General Settings’, then go to the ‘Custom styles’ tab. Here you’ll see a list of default stylesheets, such as ‘Light’ and ‘Dark’, and a list of custom stylesheets; The ones you created.
Choose a default stylesheet you’d like to customize and click ‘Customize’ to open the ‘Custom style editor’. When you’re done editing click ‘Save Changes’ and go to the slideshow you’d like to style with the newly created stylesheet. In the ‘Slideshow Style’ box you can now find and select your custom stylesheet. You can set a stylesheet for multiple slideshows.
If you’ve already created a custom stylesheet, you can edit it by clicking ‘Edit’. You can also delete it by clicking ‘Delete’. Be careful with this though, a deleted stylesheet cannot be retrieved and cannot be used by any slideshow anymore.
Yes you can. On your WordPress admin page, go to the ‘Slideshows’ menu item and click on ‘General Settings’, then go to the ‘User Capabilities’ tab (If you’re not already there). The privileges that allow user groups to perform certain actions are listed here. To allow, for instance, a contributor to add a slideshow, click the box in front of ‘Contributor’ to grant them the right to add slideshows.
Note that when you grant someone the right to add or delete a slideshow, you’ll also automatically grant them the right to edit slideshows, as this right is required to add or delete slideshows. The same is true for the reversed situation.
The slideshow is mostly called after the </head>
tag, which means the scripts and stylesheet need to load in the footer of the website. A theme that has no <?php wp_footer() ?>
call in it’s footer will not be able to load the slideshow’s scripts.
Often when the slideshow isn’t showing, there’s a Javascript error somewhere on the page and this error has caused Javascript to break. For the slideshow to work again, this error needs to be fixed. Check if any errors were thrown by opening Google Chrome or Firefox (with Firebug installed) and press the ‘F12’ key. Errors show in the console tab.
Internet Explorer is a very strict browser, so when a big blank space above your slideshow is showing your page may contain some invalid HTML. Most times invalid HTML is caused by placing the slideshow’s shortcode or PHP snippet into an anchor tag (<a></a>
) or paragraph tag (<p></p>
), while you can only place a slideshow within a ‘div’ element (<div></div>
).