ShowTime Slideshow 1.6 tutorial

A new version of the popular slide show plugin for WordPress has been released. Read this for a small tutorial.

This is a small tutorial to get you started which the new features introduced with version 1.6 of the plugin. There are 3 major additions: Styling, cursor controls and links.

1. Styling

The style of the captions can now be personalized to better fit your blog. The styling rules apply to all ShowTime slide shows on your blog and cannot be overridden by a shortcode attribute. To get started, open the ShowTime Settings page in your WordPress administration panel:

Media > Showtime Slideshow

The html of the text block looks like this:

<p class=”spacer”>&nbsp;</p>
<p><h1>title text</h1></p>
<p class=”spacer”>&nbsp;</p>
<p class=”description“>caption text</p>
<p class=”spacer”>&nbsp;</p>

If you are familiar with html, you will have noticed that the paragraph class (p) defines settings for the entire text block. The plugin supports a subset of properties in the original CSS1 specification. [supported CSS properties] There is also a special property for vertical alignment: valign.

p {

marginLeft: 15; margin of 15 pixels from the left
marginRight: 15; margin of 15 pixels from the right
valign: bottom; align vertically. (top|middle|bottom)
textAlign: left; align horizontally (left|center|right)
color: #ffffff; text color (only hex values accepted)
font-family: _sans, Helvetica, Arial; font name(s) in order of preference
fontWeight: normal; (normal|bold)
kerning: true; adjust character spacing according to kerning information (true|false)
leading: 0; number of pixels between lines

}

.description { fontSize: 17; }

h1 { fontSize: 28; }

Adjust the fontSize value in the .spacer class to adjust vertical padding (in pixels):

.spacer { fontSize: 12; }

Set the color of the cursor and progress circles using .cursor and .circle classes respectively.

.cursor {color: #ffffff;}

.circle {color: #ffffff;}

The shadow class changes the appearance of cursor and text shadows. Accepted properties are color, strength and blur. To apply no shadow, set blur attribute to zero.

.shadow {

color: #000000;
strength: 0; (shadow intensity)
blur: 2; (shadow size in pixels)

}

2. Cursor controls

Shortcode attribute: controls
As with all previous versions of the plugin, the cursor is changing while hovering according to the horizontal position of the user’s mouse and the controls string. Let’s have a look at the default setting (1234), the cursors displayed will be : [ 1 | 2 | 3 | 4 ]
[st controls=1234 showcontrols=on]

Each character stands for a different cursor control:

  • 0 = standard cursor / link cursor
  • 1 = left arrow (previous image)
  • 2 = toggle fullscreen
  • 3 = play / pause
  • 4 = right arrow (next image)

3. Links

Shortcode attributes: link and target

This feature adds the ability to link each image to a different page.
Allowed values for link are
  • “” = no link
  • parent = link to the page/post the image is attached to
  • post = link to the image post
  • image = link to the original image file
  • description = link to the URL entered in the image description field
target determines whether the link should be opened in the same frame (_self), window (_top) or in a new window (_blank).

example:

[st link=image target=_blank controls=10004]

 

28 Comments on “ShowTime Slideshow 1.6 tutorial

  1. Is there a way to have more than one slideshow on a page, where each slide show would show different images?

    Thank you,
    Nathan Gallop

    • Paul says:

      hello Nathan, yes there is a way to put different slide shows on one page.
      You should set up one private page for each slide show, note the ID for each page, then call the different slideshows using the ID attribute. e.g. [st id=123]

  2. Edwin says:

    Hi Paul!

    Great job!! I love Showtime Slideshow.

    I want to publish a photo slideshow in my web but also I want to use the same slideshow to make a public presentation for my group.

    I’ll love if I could put music to the slideshow. Is there any way to do that?

    Thanks!!!!

    • Paul says:

      hello Edwin, unfortunately you cannot add music to the slideshow. However there are many plugins for music playback which can be used on a post with the slideshow.

  3. Joan says:

    Hi Paul
    Wow I love your KenBurns effect!
    One problem though, I’m getting errors because of line 83 in showtime.php making a call to a .css file that does not exist. I tried re-installing but style.css is not there. The line is:
    wp_enqueue_style( ‘adminframework’, plugins_url($path = $this->_pluginSubfolderName . ‘/include/style.css’) );
    Can you shed some light ?
    Kind regards,
    Joan

  4. marc says:

    Hi thanks for your plugin its very good !
    I’m changing the photos in the gallery but the photos in the slide-show stays the same old ones, i don’t know why

    • Paul says:

      hello Marc, in case you have a caching plugin the changes are not immediately visible. Otherwise please provide a link and I may be able to help.

  5. Zach says:

    Hey, thanks for this slideshow plugin.

    You know how if a browser doesn’t have flash installed, it just displays all of the gallery images? I think it’d be better if it just showed the first image with a message that flash is needed to view the slideshow. Because with people that have huge slideshows like me, it looks weird when it fails.

    Thanks though,
    Zach.

    • Paul says:

      you can actually choose if you want a message to inform the user to upgrade flash or display the wordpress gallery as an alternative. your idea is nice though. I’m thinking of adding this option in the future

  6. volkan okyar says:

    hi Paul,
    Thank you for your nice work on this awesome plug-in. I’m in love with showtime slideshow. But i have a problem which i haven’t solved yet. Pages with showtime slideshow functions normally on my home page of my site. But when i navigate in archive or categories for other pages with showtime, there is a blank instead of slideshow. It is working only on home page or if i enter the full page url on the address bar. My template is full of ajax by the way. But all other plug-ins or posts, pages widgets work fine. Template is: “smells like facebook ” . slideshows can not be seen on deeper and other parts of my sites shortly.. any idea? thanks again..

  7. marg says:

    Hi Paul,
    I really like this plugin and am using it for my design folio, it is working great on Mac, strangely enough, but not on PC Firefox or IE. Is it because I am using an unusual theme called Minimal?
    Would really like to get it to work. I have disabled all other image galleries I have been testing.
    If anyone has any idea how to get it to render properly please let me know. Am happy to pay for using it, if it looks okay!
    website is : hello dash media dot com
    Thanks,
    Marg

  8. firdaus says:

    Hi Paul, need your help!

    I’ve installed Slideshow v1.6 in my WP and tried to load flickr images using the instruction you’ve shown. but the page comes out blanks and show ‘sorry, no image found!’. I’ve tried many times and still not working. I really love to use this application on my site.
    Thanks,
    Osz.

  9. Crox says:

    A small problem.. link=description works when set from [showtime], when set with show_showtime function, no links are created.. my bad or a bug? Still – bug or not, good work :)

  10. Crox says:

    …oh, figured it out..
    show_showtime ("autoplay=on|showcontrols=off|rotationtime=4|shuffle=on|scale=noBorder|source=medium|link=description|width=590|height=107|id=1075")
    ..did not work, but link attribute in the end of line works..
    show_showtime ("autoplay=on|showcontrols=off|rotationtime=4|shuffle=on|scale=noBorder|source=medium|width=590|height=107|id=1075|link=description")
    cheers! :)

  11. flo says:

    Hello!

    Thanks for your plugin. Good job!
    Here are two function-suggestions I got during installing and customizing your plugin. Maybe you’re interested.

    First I would find it great to be able to customize the cursors. Could be quite easy translated in referring to external pngs I guess.
    Then it would be nice to be able to have a prev / next link or paging underneath or at the top of the slideshow. That would make the slideshow-function more obvious to some users.

    Again, great job!

  12. Andrew J Baran says:

    Hi Paul,
    Is there a way to show thumbnails of the images along with (bellow maybe) the slideshow?
    -andrew

  13. Jörn says:

    Hi Paul,

    I love Showtime Slideshow. Its a great plugin for showing photos.
    Did you ever think of a mixture between noborder (crop) and showall scale? I have the problem that noborder only works perfect on landscape photos but not with a mixture between landscape and portrait photos. Portrait photos are cropped to much.
    I think of a “bestFit” scale which does “noborder” for photos where orientation is the same as the flash containers orientation and “showall” for the rest. Benefit of this mode would be a perfect crop for photos with similar orienation to container and full display for photos with different orientation.

    Best Regards/Med vänlig hälsning,

    Jörn

    • Paul says:

      hello Jörn, that’s an interesting idea and I will consider it for a future release. for now it it may be best to use a square viewport to overcome this issue.

  14. Dusan says:

    Great plugin, and superb and classy website.
    One question, can I edit the cursor, arrow. I want to manipulate it a bit to fit my design? just take the rounded edges off and make them sharp.
    Dusan

    • Paul says:

      Thanks Susan. Unfortunately the graphics cannot be changed. In the coming version the buttons will be scaleable and all colors and transparency can be modified.

  15. gabriel says:

    Hi Paul

    i’m trying to use the plugin in my website but i can’t… i’m trying to make and slideshow of url images, but nothing… can you help me?

    this is my post:

    National design contest for the Contemporary Art Museum of Carmagnola.Nominated Proyect.
    The main idea was create a mix between the new and contemporary art concept and the elegant and history of the place.
    [st url=http://www.designattraction.com/website2009/immagini/Last-Work-01.jpg ]

    and this is post on my portfolio

    http://www.designattraction.com/?p=1&preview=true&preview_id=1&preview_nonce=2842a40ee4

    what i doing wrong???
    many thanks

    gabriel.

  16. ibeedug says:

    Hello Paul,
    Thanks for the great plug-in.

    I am having an issue where the slideshow is appearing in front of my dropdown menus (only when there are actual animations taking place).

    I have tried putting the slideshow into a DIV and changing the Z_INDEX but I still have the same problem.

    Any fixes?

  17. Gigi says:

    Hello!

    Thanks for the plugin… I’m lovin it.

    However, is there any way to change the caption so that it falls to the right of the image? Normally, I would do this with width settings on the image part and float:right for the caption. Any help would be appreciated!

    Thanks,
    Gigi

  18. Jeff says:

    Hi Paul,
    I love the plug-in, but I have a quick question.
    I want to be able to have a static webpage (like on a kiosk or store window display) that continuously displays the slide show images.

    But, when someone goes to the underlying Picasa album from a remote PC and edits the album by adding or deleting photos, or rearranging the order of photos, I want the slide show display to automatically refresh and display the changes in the album.

    I can put html meta code in the wordpress header to automatically refresh the page (i.e. for page refresh every 5 minutes) but even with this code (or a manual browser refresh such as hitting F5 in IE) doesn’t cause your flash plug-in to reload the photo gallery with the new changes. Is there a setting or some other code that I can do to force your plug-in to refresh the Picasa album?

    Thanks,

    Jeff

  19. Hi there,

    This plugin solved a lot of problems for me, and is working perfectly on Chrome and IE.

    The problem comes with Firefox. On each post or page I have a block of text to the left hand side and the gallery on the right. With IE and Chrome there is a gap between the text and gallery, but with Firefox they but up or overlap with each other.

    Can anyone help?

  20. Filippo says:

    Hi there,

    I have a problem with the showtime slideshow plugin.
    The plugin works great, but I noticed that when it is active the textareas in my wordpress dashboards are reduced to 10-12 lines.

    I discussed this in the thesis theme forum (the one I’m using).
    Thesis 1.8 ; wordpress 3.01.

    Here’s a link (but I don’t know if you can enter; if so, tell me and I will send you an email with the whole discussion).

    Could you please help? Thank you :)

Leave a comment

XHTML:The following tags are allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>