Due to popular request, and because I have not found the time yet to publish a complete new version of the plugin, I have uploaded the development version of the SWF to be replaced in the folder plugins>showtime-slideshow>showtime :
This version fixes the issue with the plugin being loaded inconsistently in FireFox under Windows when using transparency mode “transparent”.
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.
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”> </p>
<p><h1>title text</h1></p>
<p class=”spacer”> </p>
<p class=”description“>caption text</p>
<p class=”spacer”> </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)
}
controls
Each character stands for a different cursor control:
Shortcode attributes: link and target
example:
[st link=image target=_blank controls=10004]
This page explores recently added features of the of the ShowTime slideshow plugin for WordPress
Test using a Picasa “featured” feed as input for the slideshow. Picasa images are retreived in 2 sizes (if available). 800 px in normal mode and 1600 px in full-screen operation.
[showtime picasa=http://picasaweb.google.com/data/feed/base/featured?max-results=25&alt=rss transition=flip transitiontime=2 controls=124 ]
Another Picasa test using a search string as feed (query)
[showtime picasa=http://picasaweb.google.com/data/feed/base/all?max-results=25&alt=rss&q=black transition=blur scale=noborder]
More info on Picasa Rss parameters: http://code.google.com/apis/picasaweb/docs/2.0/reference.html#Parameters
Test using a Flickr using a personal photoset rss feed as input for the slideshow:
[showtime flickr=http://api.flickr.com/services/feeds/photoset.gne?set=72157622602489724&nsid=27531560@N02]
Find out how you can easily implement the ShowTime Slideshow plugin into your WordPress powered website
ShowTime Slideshow WordPress plugin can be downloaded on WordPress.org or installed directly via your wp-admin.
ShowTime slideshow plugin demo page | Picasa & Flickr demos | Donate
Please read the usage guide hereunder before requesting support. I hope this will answer the majority of questions on the plugin.
By default, the slide show includes all images “attached” to a post/page. To attach an image to a page (or post) in WordPress, please go to your admin:
Simply add the [showtime] (or [st]) shortcode to a post/page.
The style class to include in your styles.css file is .showtime Width and Height parameters defined in the class will override plugin settings.
Use the function show_showtime("") to hardcode a slideshow into your theme. This functions takes the same options as the shortcode. Options must be separated by the “pipe” symbol.
Example: show_showtime ("id=123|width=50|height=50")
The method described above will add a slide show using the default display settings. To change default settings, go to Media > ShowTime Slideshow
Please refer to the list of parameters below to find out what option is for. Most settings should be more or less self explaining. If you can’t guess what an option is for, you may just want to try out.
There is one special setting: Alternative Content. This option lets you select what should be displayed if Flash Player is not found. Choose between “WordPress gallery” or “ExpressInstall”. The latter will display a box requesting the user to enable flash, install or upgrade the Flash Player browser plugin.
Each option defined in the general settings can be overridden for individual slide shows using the ShowTime “shortcode” options. This is useful if you want a particular slide show to look different from the other slide shows on the same website. Note that each parameter is separated by a space.
To use individual settings, use the following syntax: [st param1="value" param2="value2"].
Example: [showtime scale="noborder" transition="blur" showtext="on" fullscreen="off"]
width=width Width in pixels
height=height Height in pixels
rotationtime=number Time in seconds to pause between each slide in playback mode
transitiontime=number Time in seconds for transitions (0 = no transition)
transition=blur|fade|flash|zoomin|zoomout|slidedown|slideup|slideleft|slideright| wipeh|wipev|kenburns|flip|fliph|flipv Transition type.
transitionease=prefix.suffix This setting changes the “acceleration curve” of a transition
prefixes: Linear, Elastic, Bounce, Circular, Cubic, Quadratic, Quintic, Quartic, Sine, Exponential, Back
suffixes: easeNone, easeIn, easeOut, easeInOut
autoplay=on|off Should the slide show start playing automatically?
fullscreen=on|off Turn on/off fullscreen option
reverse=on|off Reverse image order.
shuffle=on|off
Display images in random order.
showcontrols=on|off Display the cursor to control the slideshow.
showtext=on|off Display title of an image.
showalt=on|off Display caption (description) of an image.
scale=noscale|showall|exactfit|noborder Change the scale mode of images.
NoScale: display images 1:1
ShowAll: scale images proportionally to fit the slide show area
ExactFit: stretch images to exactly fit the slide show area
NoBorder: scale images proportionally to fill the slide show area
bgcolor=#000000 Change the background color. Use wmode=transparent to override bgcolor.
quality=low|autolow|autohigh|best Lower display quality results in higher animation performance. Use autohigh or autolow to automatically adapt quality according to display performance.
wmode=window|opaque|transparent|direct|gpu Defines the way the slide show is rendered in your browser.
source=thumbnail|medium|large|full Source file size to be used in normal operation. Resized copies of an image are stored automatically when uploading to WordPress. Change source image dimensions in WP admin: Settings > Media
sourcehd=thumbnail|medium|large|full Source file size to be used in full-screen operation.
There are 3 special shortcode parameters :
id= id of a post/page containing the images. This may be a privately published. Default: current page id. To include all images of your blog, use id=null. Examples:[st id=488] [st id=null]
picasa= url of a Picasa feed
Example: [st picasa=http://picasaweb.google.com/data/feed/base/all?max-results=25&q=red+flower] This will show 25 public picasa images with search terms “red” and “flower”. More info on Picasa Rss parameters can be found here: http://code.google.com/apis/picasaweb/docs/2.0/reference.html#Parameters
flickr= url of a Flickr feed.
Example: [st flickr=http://api.flickr.com/services/feeds/photoset.gne?set=72157622602489724&nsid=27531560@N02] This will show a Flickr photo set. To find out the rss feed of your photo set, you need to log in to your Flickr account.
I have decided to release the plugin free of charge to make it possible for as many people as possible to benefit from it. If you use the plugin on a commercial website, please consider a small contribution. Every donation will be highly appreciated and contribute to the further development of this and other plugins.
You can also contribute by rating the plugin on WP, answering questions from other users or sending accurate bug reports.
These are some examples on how the ShowTime slide show plugin can be used in your blog.
ShowTime slide show plugin usage guide and discussion
Display an animated slideshow without user input and in random order:
[showtime height=308 transition=panandzoom rotationtime=5 transitiontime=1 transitionease=none autoplay=on showcontrols=off showtext=off showalt=off shuffle=on]
Display a slideshow with images attached to another post/page: (This could also be a hidden page, e.g. privately published)
[showtime id=488]
Expand imag dimensions to fill the slideshow area, change focus on transition, do not allow full-screen and show a text at the bottom of each slide. This text can be edited via WordPress admin. Media > Library (TITLE and ALT for small text):
[showtime scale=noborder transition=blur showtext=on showalt=on fullscreen=off]
Click the black area to select an MP3 song from your system. Right-click to select full screen mode.
I enjoy sound visualizers very much and I can watch them for hours. Unfortunately, most visualizers out there focus too much on the tech part. With MoodyLight, I tried to create a graphic equalizer with an analogue low-tech touch. The aim is to extract the “mood footprint” of a given song. At this point, it works more or less nicely depending on the input (best used with ambient/chill out/electric genres) but you better judge for yourself…
Decoding of local MP3 files is taken care of by the genius MP3FileReferenceLoader class by Christopher Martin-Sperry [requires Flash Player 10 or higher].
I had a lot of fun playing around with the sound spectrum. I will definitely fine tune the player and add methods for better normalization of the visualizer, maybe add a playlist feature… Meanwhile, please let me know what you think of it.Cliquez sur le rectangle noir pour charger un fichier MP3.