D13Slideshow v2

D13Slideshow is a simple WordPress plugin that creates animated, JavaScript slideshows with excerpts from selected WordPress posts and pages. By adding a simple tag to your template you can embed interactive adverts for your chosen featured posts and manage all of the settings instantly, using your WordPress admin pages. Unlike other components, d13slideshow uses the prototype and scriptaculous JavaScript libraries which means that if you already use Lightbox 2 then there’s no further downloads added to your page.

An example of a d13slideshow in action

An example of a d13slideshow in action

Compatability

D13Slideshow is compatible with Wordpress 2.3.x, tested with Wordpress 2.7.1 and is available to download from the WordPress plugin repository. If you’re using a 1.x version of the d13slideshow plugin and need support then click here.

Keep us going

Do you like this plugin? Is it doing what you need it to do? Want to say thanks or even bribe us into adding that much needed feature? Why not donate a few dollars or pounds to buy us a beer or a bacon sandwich and keep us going.


Installation

Installing the D13Slideshow plugin is quick and simple:

  1. Begin by downloading the plugin file (ZIP)
  2. Extract the files to your local machine
  3. Edit lines 15 and 16 of “d13slideshow.php” to determine how posts will be selected*
  4. Upload the whole d13slideshow folder (including the folder itself) to your plugins directory - typically http://www.yourblog.com/wp-content/plugins/
  5. Activate the plugin using your Wordpress admin pages
  6. Familiarise yourself with the documentation under ’settings > d13slideshow’
  7. Add the slideshow code to your theme

* Editing this setting is important as some blogs with a large number of posts can crash when editing the slideshow settings. If this happens to you then edit these lines to set $post_input = ‘manual’.

Adding a slideshow

You can add a slideshow directly into your theme files using the following line of PHP code:

<?php d13slideshow(): ?>

You can add this anywhere within your theme but some standard places would include:

  • Your homepage (add the code to index.php)
  • Your header bar (add the code to header.php)
  • Your sidebar (add the code to sidebar.php)
What’s new?

Version 2.10 is the latest release of the plugin and includes a whole host of fixes and new features:

  • The ability to select posts by text entry or by dropdown
  • Improved CSS, HTML and IE support
  • HTML valid to XHTML Strict
  • Cleaner JavaScript embedding
  • Refined admin screens
  • Fully re-written help content
  • Customisable styles
  • Support for using styles within theme stylesheets
  • Use of post excerpts, if they exist
  • Use of first post images rather than promo images, if required
  • Feature posts marked as “sticky”
  • Feature posts from a specified category
  • Override system settings and specify feature “playlists” when adding your PHP code
  • Link features to external sites with the “promourl” custom field
  • Clickable promo images
  • Extra animation styles
  • Automatic inclusion of the prototype and Scriptaculous frameworks in your theme - no more manual theme editing!
  • HTML and captions are now stripped from post extracts
  • All paths have been refined to use “wpurl”
  • Options have been added for cycling once, forever or manually
Changing your settings

The inbuilt option screen lets you customise almost every aspect of your slideshow. Take control of transition length, fade colours, sizes and excerpt length to create a promotional slideshow that works just how you need it to.

Manage the settings of your slideshows through the comprehensive admin screen

Manage the settings of your slideshows through the comprehensive admin screen

The option screen also lets you select up to 10 posts or pages to use as features within your slideshow making updating quick and easy, you can even get the plugin to auto-select posts for you based on date, category or stickiness.

Working with custom fields

The d13slideshow plugin gives you a few ways to feature images in your slideshows. The first is to just let the plugin take the first image in your post - this is quick and easy but can lead to image resizing. The second option is to use a custom field to define which image to use.

When you’re editing your post, just add a new custom field called “promoimage” and set its value to the full URL of the image you want to use.

Adding promotional images with custom fields couldn't be easier!

Adding promotional images with custom fields couldn't be easier!

With version 2.1.0 of d13slideshow you can even use a custom field to get your featured slides to link to external websites! Just set an extra custom field called “promourl” with a value of the URL you want to link to.

Creating playlists

If you’d like to bypass the way that the plugin chooses which posts to feature you can do this when you add the PHP code to your theme:

<?php d13slideshow( array(1,5,10,25) ); ?>

Using a statement like this would create a slideshow to feature the posts or pages with the IDs 1, 5, 10 and 25.

Getting help
The inbuilt options screen features extensive support documentation helping you get the most from the plugin.

The inbuilt options screen features extensive support documentation helping you get the most from the plugin.

Just sign into your WordPress admin pages, click on “settings” and then “d13slideshow”. Scroll to the bottom or click on the “help” link find out more.

Need more support?

If you’ve followed the steps above or read the help documentation and still need assistance then add a comment here and I’ll see what I can do.

FlashDen - your choice for Flash components and effects

Leave a Comment

18 comments on “D13Slideshow v2”

Rodrigo says:

Great plugin. Thanks a lot for the excelent job. You can see your slideshow in my website.

baron says:

Works great, thank you

Albi says:

Fantastic plugin! Thanks a lot.

Have been fiddling with it for last couple days, and now comes the update and many improvments.

Protoype is whooping 122kb!, so I got the compressed version off http://groups.google.com/group/prototype-core/files at only 51kb. Hey, Every Little Helps!

I’m trying to position the slideshow with main content (image) on the left & associated info on the right, but with mixed results, especiallly in different browsers. My CSS skill is average, so if anyone could share the CSS for this I’d really appreciate it.

Thanks again.

GabonMx says:

I can’t choose the post to show on slide, http://i40.photobucket.com/albums/e225/Krwlngy/d13.jpg please help

Dave says:

GabonMx, this is an issue on sites with a large number of posts - the dropdown lists for choosing posts cause a database timeout. You can fix this by editing d13slideshow.php and making sure lines 11 to 16 are set to the following:

11. global $post_input;
12. // IMPORTANT - this plugin includes 2 ways to select featured posts, either by choosing from
13. // a dropdown list or by manually adding post IDs. If you have lots of posts and pages you need to
14. // select "manual". Just un-comment the line that defines how you'd like to select posts.
15. $post_input = 'manual';
16. //$post_input = 'dropdown';

Note the change in lines 15 and 16. This now allows you to enter the post IDs manually on the admin form rather than using dropdown lists.

Bas says:

Hi, Excellent plugin, and easier to use than FCG or DCG!
2 suggestions for further improvement: First, can you make it possible to change the font-size, without knowledge of php? And 2nd, it would be nice to change the underscore by (my own) text in the excerpt link.
If you have any suggestions how to fix this it would be a great help!

Dave says:

Bas, I’m guessing that you’re letting the plugin handle of your CSS - if this is the case then you can edit the font size quite easily without much knowledge of PHP, HTML or CSS. Just open d13slideshow.php in a text editor (or through the WP plugin editor) and scroll to line 667:

667. div.d13fader h3{
668. font-size:12px;
669. font-weight:bold;
670. padding:4px;
671. margin:0px; }

You’ll see that line 668 sets the text size of the post title - just change this to whatever you’d like it to be. Similarly, line 675 shows the text size for post excerpts:

674. div.d13fader p{
675. font-size:10px;
676. font-weight:normal;
677. padding:2px 4px 4px 4px;
678. margin:0px;
679. color:".get_option('d13ss_excerptColor')."; }

To change the [...] that gets added to the end of each excerpt just go to the end of line 524 and change the dots:

524. ?> [ <a href="< ?php echo $d13ssurl; ? rel="nofollow">" title="Read more about < ?php echo $d13ss_postdata -> post_title; ?>" target="< ?php echo get_option('d13ss_linkTarget'); ?>">...</a> ]< ?php

Dave says:

Hi Albi, thanks for the kind comments (and for picking out the large size of the javascript libraries bundled by Wordpress. I’ve had a play with re-positioning the slideshow elements and have come up with this:

A d13slideshow with left-right positioning

I had to make some extensive changes to the CSS to get this to work but here’s what I did.

First you need to adjust the IE conditional statement on line 545 to:

<style type="text/css">div.d13fader{ margin:-<?php echo (get_option('d13ss_height')+2); ?>px 0px 0px <?php echo (get_option('d13ss_width')-250-15); ?>px; }</style>

And then replace all of the CSS (lines 613 through to 683) with:

#d13slideshow{
background-color:".get_option('d13ss_fadeTo').";
width:".get_option('d13ss_width')."px;
height:".get_option('d13ss_height')."px;
margin:0px; padding:0px; }
#d13nav{
margin:0px; padding:0px;
}
#navleft{
z-index:200;
position:absolute;
width:15px;
height:".get_option('d13ss_height')."px;
margin:0px 0px 0px ".(get_option('d13ss_width')-250-30)."px;
padding:0px; }
#navright{
z-index:201;
position:absolute;
width:15px;
height:".get_option('d13ss_height')."px;
margin:0px; padding:0px;
margin-left:".(get_option('d13ss_width')-15)."px; }
#navleft a,
#navright a{
width:15px;
height:".get_option('d13ss_height')."px;
display:block;
background-color:".get_option('d13ss_panelColor').";
filter:alpha(opacity=60);-moz-opacity:.6;opacity:.6;
background-position:center center;
background-repeat:no-repeat; }
#navleft a{
background-image:url(".$workdir."/left.gif); }
#navright a{
background-image:url(".$workdir."/right.gif); }
#navleft a:hover{
filter:alpha(opacity=90);-moz-opacity:.9;opacity:.9; }
#navright a:hover{
filter:alpha(opacity=90);-moz-opacity:.9;opacity:.9; }
#navleft a span,
#navright a span{ display:none; }
div.d13slide{
padding:0px;
margin:0px; }
div.d13slide img{
padding:0px;
margin:0px; }
div.d13fader{
background-color:".get_option('d13ss_panelColor').";
font-family:Arial, Helvetica, sans-serif;
filter:alpha(opacity=60);-moz-opacity:.6;opacity:.6;
height:".get_option('d13ss_height')."px;
width:250px;
z-index:1;
margin:-".get_option('d13ss_height')."px 0px 0px ".(get_option('d13ss_width')-250-15)."px;
padding:0px; }
div.d13fader h3{
font-size:12px;
font-weight:bold;
padding:4px;
margin:0px; }
div.d13fader h3 a{ color:".get_option('d13ss_titleColor')."; }
div.d13fader h3 a:hover{ color:".get_option('d13ss_titleHoverColor')."; }
div.d13fader p{
font-size:10px;
font-weight:normal;
padding:2px 4px 4px 4px;
margin:0px;
color:".get_option('d13ss_excerptColor')."; }
div.d13fader p a{
color:".get_option('d13ss_excerptLinkColor')."; }
div.d13fader p a:hover{
color:".get_option('d13ss_excerptLinkHoverColor')."; }

I can’t guarantee that this will work exactly how you want it to and I haven’t tested it extensively but it seems to work in Firefox, IE7 and Safari.

Bas says:

Hi Dave,

thanks! Works perfect!

Goss says:

Hi there and thanks for a GREAT plugin.
I’m currently using v.1.10 - what is the safest way to upgrade to the latest 2.10 ? the site is live and can’t afford but the very least of downtime in case something goes wrong, so I would appreciate any advice on the best & safest approach to upgrading.
Thank you.

Joe Mac says:

I am having a problem on my site. It doesn’t work on IE - it won’t rotate. But it’s fine on other browsers. Can you please help?

Primoz says:

Hy, i have problem with pictures sizes. Can you help?

Dave says:

Hi Joe, I’m not entirely sure what’s happening here but it sounds like there could be a javascript conflict. I know there’s certain things that don’t work when other libraries are being used (jQuery, mooTools, etc). It could be that another plugin is embedding these for you and causing the conflict.

John says:

I get nothing, only a rectangle in the background color I have chosen. Nothing else at all, although I can see quite a lot of javescript in the source of the page.
Any ideas?
Thanks beforehand,
John

rlfinc says:

Awesome plugin, works exactly as described and is very easy to modify.

Have a question that I am hoping I might get some help with. Is it possible to have the css and scripts that get embedded into the header appear only on pages that I place the d13 gallery code?

I only have it on my frontpage, but the css appears on every page, bulking up the code on pages where it isn’t needed. Any help is greatly appreciated.

masshoff says:

Is it possible to use both looping animation AND allow manual nav? I’d like to let the slide show scroll, but also give users the option to move forward and back…..

Gio says:

Great Plugin, i only have a small problem, i’ m running wp 2.8, i understand that the plugin take the first uploaded thumb image of the post and display it, but in my case don’t work, it show the last uploaded image thumb instead of the first one, someone had the same problem? Thanks again!

r-sn.com says:

thank you … very nice plugin ..

this is plugin (d13slideshow v.2.1.0) for arabic :

http://www.r-sn.com/d13slideshow.2.1.0_arabic.zip

FlashDen - your choice for Flash components and effects