WordPress.org

Ready to get started?Download WordPress

Plugin Directory

Slideshow Gallery

Feature content in a JavaScript powered slideshow gallery showcase on your WordPress website

Feature content in beatiful and fast JavaScript powered slideshow gallery showcases on your WordPress website.

You can easily display multiple galleries throughout your WordPress website displaying your custom added slides, slide galleries or showing slides from WordPress posts/pages.

The slideshow is flexible, all aspects can easily be configured and embedding/hardcoding the slideshow gallery is a breeze.

See the online demonstration.

Here are several ways to display a slideshow:

Shortcode for all slides

To embed a slideshow with all slides under Slideshow > Manage Slides in the plugin, simply insert [slideshow] into the content of a post/page.

Shortcode for a gallery's slides

To embed a slideshow with slides from a specific gallery under Slideshow > Manage Galleries in the plugin, simply insert [slideshow gallery_id="X"] (where X is the ID value of the gallery) into the content of a post/page.

Shortcode for the images of a WordPress post/page

To embed a slideshow with the images uploaded to a WordPress post/page through it's media gallery, simply insert [slideshow post_id="X"] (where X is the ID value of the post). Whether you want to display the images from a post or a page, the parameter remains post_id.

Shortcode for latest/featured products

In order to display latest or featured products in a slideshow, you need the Shopping Cart plugin from Tribulant Software. Once you have this installed and activated, you can easily display recent or featured products. To display recent products use the shortcode [slideshow products="latest"] and to display featured products, use [slideshow products="featured"]. For both, you can use the productsnumber parameter to limit the number of products eg. [slideshow products="latest" productsnumber="5"]

Hardcode into any plugin/theme with PHP

To hardcode into any PHP file of your WordPress theme, simply use <?php if (function_exists('slideshow')) { slideshow($output = true, $gallery_id = false, $post_id = false, $params = array()); } ?>.

Parameters for shortcode/hardcode to customize each slideshow

You can use any of the following parameters with both the hardcoding and shortcode to customize each slideshow gallery:

Shortcode Ex 1: [slideshow layout="responsive" gallery_id="3" auto="true" navopacity="0" showthumbs="true"] Shortcode Ex 2: [slideshow layout="specific" post_id="379" width="600" height="300" auto="false" showinfo="false"]

Hardcode Ex 1: <?php slideshow(true, 3, false, array('layout' => "responsive", 'auto' => "true", 'navopacity' => "0", 'showthumbs' => "true")); ?> Hardcode Ex 2: <?php slideshow(true, false, 379, array('layout' => "specific", 'width' => "600", 'height' => "300", 'auto' => "false", 'showinfo' => "false")); ?>

This way you can customize each slideshow you embed or hardcode, despite the settings you saved under Slideshow > Configuration.

  • products [ latest | featured ] = String "latest" or "featured" to display products from the Checkout plugin.
  • productsnumber [ productsnumber ] = Numeric/integer to limit the number of products to display.
  • gallery_id [ gallery_id ] = Numeric/integer ID of a gallery to display images from.
  • post_id [ post_id ] = Numeric/integer ID of a post to take images from it, uploaded through it's "Add Media" button.
  • layout [ responsive | specific ] = Set to 'responsive' for mobile/tablet compatible theme and 'specific' for fixed width/height.
  • resizeimages [ true | false ] = Set to 'true' to resize images to fit the slideshow dimensions.
  • imagesoverlay [ true | false ] (default: setting) = Set to 'true' to display links of slides that are images in a Colorbox overlay on the page.
  • orderby [ random ] = Set to 'random' to randomly order the slides. Leave this shortcode parameter to order by the order set on the slides.
  • width [ width | auto ] = (only with layout="specific") Width of the slideshow in pixels. Don't specify 'px' part, just the numeric value for the height.
  • resheight [ resheight ] = (only with layout="responsive") Numeric/integer value such as "30" to be used with 'resheighttype' below
  • `resheighttype [ resheighttype ] = (only with layout="responsive") "px" (pixels) or "%" (percent) as the value eg. resheighttype="%"
  • height [ height ] (only with layout="specific"; default: setting) = Height of the slideshow in pixels. Don't specify the 'px' part, just the numeric value for the height.
  • auto [ true | false ] (default: setting) = Set this to 'true' to automatically slide the slides in the slideshow.
  • autospeed [ speed ] (default: setting) = Speed of the auto sliding. 10 is normal. Lower number is faster. Between 5 and 15 is recommended.
  • fadespeed [ speed ] (default: setting) = Speed of the fading of images. 10 is normal. Lower number is faster. Between 1 and 20 is recommended.
  • shownav [ true | false ] (default: setting) = Set to 'true' to show the next/previous image navigation buttons.
  • navopacity [ opacity ] (default: setting) = The opacity of the next/previous buttons. Between 0 and 100 with 0 being transparent and 100 being fully opaque.
  • navhoveropacity [ opacity ] (default: setting) = The opacity of the next/previous buttons on hovering. Between 0 and 100 with 0 being transparent and 100 being fully opaque.
  • showinfo [ true | false ] (default: setting) = Set to 'true' to show the information bar for each slide.
  • infospeed [ speed ] (default: setting) = Speed at which the information bar will slide up. Between 5 and 15 is recommended.
  • showthumbs [ true | false ] (default: setting) = Set to 'true' to show the thumbnails for the slides.
  • thumbsposition [ top | bottom ] (default: setting) = Set to "top" to show above the slideshow.
  • thumbsborder [ hexidecimal color ] (default: setting) = Hex color of the active thumb border. For example #333333.
  • thumbsspeed [ speed> ] (default: setting) = Speed of the thumbnail bar scrolling. Lower is slower. Between 1 and 20 is recommended.
  • thumbsspacing [ spacing ] (default: setting) = An integer value in pixels to space the thumbnails apart. Don’t include the 'px' part, just the number. Between 0 and 10 is recommended.

Requires: 3.1 or higher
Compatible up to: 3.8.3
Last Updated: 2014-3-5
Downloads: 332,760

Ratings

4 stars
4 out of 5 stars

Support

21 of 28 support threads in the last two months have been resolved.

Got something to say? Need help?

Compatibility

+
=
Not enough data

0 people say it works.
0 people say it's broken.

100,1,1
100,1,1 100,1,1
33,3,1 100,1,1 100,1,1
100,1,1 100,2,2 50,2,1
0,1,0 67,9,6
60,15,9 100,1,1
50,12,6 100,1,1 100,1,1
57,7,4 100,2,2 83,6,5
100,3,3
100,1,1
50,4,2
100,2,2
62,13,8
75,4,3
0,1,0 38,8,3
100,1,1 48,23,11
100,3,3 100,1,1 100,1,1
59,17,10 100,1,1 100,1,1 100,1,1
100,5,5 36,11,4 63,8,5 67,3,2 100,1,1 100,1,1 100,1,1
100,1,1 50,14,7 100,3,3 100,2,2 100,2,2
0,1,0 33,3,1 45,29,13 67,6,4 100,4,4
67,3,2 71,7,5 100,1,1 80,25,20
57,7,4
78,18,14
50,6,3
80,5,4
100,1,1
100,1,1
75,4,3
67,6,4 100,1,1
100,2,2 100,2,2 100,3,3 100,1,1 100,3,3 100,3,3 67,6,4
50,2,1