Skip to content

pilau/slideshow

Repository files navigation

Pilau Slideshow

A jQuery-driven slideshow plugin for WordPress.

NOTE: Depends on the Developer's Custom Fields plugin.

NOTE: Currently only slideshows with the fade rotate type are responsive.

NOTE: A simplified, non-dynamic version of slideshows is shown for IE 7 and below, assuming an lt-ie8 class is applied to the html tag, as per this technique. If such a class is not in place, slideshows in IE 7 and below may be broken.

Installation

Note that the plugin folder should be named slideshow. This is because if the GitHub Updater plugin is used to update this plugin, if the folder is named something other than this, it will get deleted, and the updated plugin folder with a different name will cause the plugin to be silently deactivated. Also, the folder name is hard-coded in the plugin's CSS.

Basic use

Add a filter to your theme to specify which pages slideshows will apply to (see the scope parameter for Developer's Custom Fields):

add_filter( 'ps_scope', 'my_ps_scope' );
function my_ps_scope( $scope ) {
	return array( 'posts' => array( 693 ) );
}

Template code

In the templates for pages with slideshows, use the following to output the page's slideshow:

$PS = null;
if ( class_exists( 'Pilau_Slideshow' ) ) {
	$PS = Pilau_Slideshow::get_instance();
}
$PS->slideshow();

To activate fullscreen mode, before outputting the slideshow:

$PS->activate_fullscreen();

Slideshows can start from slides other than the first one by passing the ps query string parameter, set to the 1-based index of the slide.

Shortcodes

Use the [pilau-slideshow] shortcode to place the slideshow in the content area of posts where the slideshow has been applied using the ps_scope filter.

Custom slides

By default, each slideshow is built from images selected out of the images uploaded to the post in question.

In order to use custom slides, set the Slideshow type option to "Custom slides". This will get rid of the default Slideshow images custom fields box, and the developer must set up their own system to select slides. The slides themselves are passed through via the ps_custom_slides filter.

Filter hooks

  • ps_scope - Use to modify the scope for using slideshows (see the scope parameter for Developer's Custom Fields)
  • ps_disable_default_css - Use to disable the default CSS
  • ps_custom_field_settings_box_args - For altering the settings custom fields box arguments
  • ps_custom_field_images_box_args - For altering the images custom fields box arguments
  • ps_slideshow_image_markup - Use to alter the markup for each image, if not using custom slides; passes the markup string, the image ID
  • ps_slide_classes - Use to alter the classes applied to each slide; passes the classes array, the slide ID
  • ps_custom_slides - Use to pass in custom slides; passes the (empty) slides array, the slideshow object. The returned array should contain each slide's markup.
  • ps_mobile_breakpoint - Change the mobile breakpoint, in pixels (default: 640)