This is a simple sliding image with caption. You can have more than one caption and decide the layout of the caption via css.
Here you can see two captions.
The first is loaded immediately before than the second one
You can also get the same effect as the caption with:
A button
Or two buttons
Or any other html element...
and you can decide the transition time of any slide
You can also display videos, but it requires a "fake image"... read the documentation please



You can display any html element directly in the slider, but pay attention, with many elements the transition effect could be slowed.
In this case you can see a Vimeo video and a price table

Standard
$9/mo.
And as the day advanced and the engine drivers
Check sign
Check sign
Check sign
Error sign
Basic
Free
And as the day advanced and the engine drivers
Check sign
Error sign
Check sign
Error sign
Professional
$19/mo.
And as the day advanced and the engine drivers
Check sign
Check sign
Check sign
Check sign
But you can also display images only... from the next one

Introduction

Hi there. First of all excuse me for my bad english, second excuse me if you will find some bugs in Diapo slideshow.

Diapo slideshow is an open source project. You can suggest changes or improvements if you want. You can download it and use for free, you can also include it in your projects and sell it as part of a bigger work (in this case please consider a donation).

Diapo slideshow is tested on new browsers, but I tried to make it compatible with the old versions of Internet Explorer too (8 and 7). But I don't think I will spend many hours to improve this feature, sorry.

Diapo slideshow requires jQuery 1.4+ and other jQuery plugins are necessary if you want to use some functionalities: jQuery Easing (http://gsgd.co.uk/sandbox/jquery/easing/), jQuery HoverIntent (http://cherne.net/brian/resources/jquery.hoverIntent.html), jQuery Mobile (http://jquerymobile.com/, but not all the plugins). These plugins are included in the zip you can download at the bottom of this page.

Diapo slideshow is the first jQuery plugin I develop from scratch and I distribute for free, so please be lenient

Methods

$('selector').diapo();basic format
$('selector').diapo({fx: 'scrollHorz', time: '5000'});an example with some customizations
$('selector').diapoStop();you can use this function to stop the slideshow
$('selector').diapoPlay();you can use this function to play/resume the slideshow

Options

selector:'div', [target element]
fx:'random',
  Available effects: 'random','simpleFade', 'curtainTopLeft', 'curtainTopRight', 'curtainBottomLeft', 'curtainBottomRight', 'curtainSliceLeft', 'curtainSliceRight', 'blindCurtainTopLeft', 'blindCurtainTopRight', 'blindCurtainBottomLeft', 'blindCurtainBottomRight', 'blindCurtainSliceBottom', 'blindCurtainSliceTop', 'stampede', 'mosaic', 'mosaicReverse', 'mosaicRandom', 'mosaicSpiral', 'mosaicSpiralReverse', 'topLeftBottomRight', 'bottomRightTopLeft', 'bottomLeftTopRight', 'bottomLeftTopRight'
You can also use more than one effect: 'curtainTopLeft, mosaic, bottomLeftTopRight'
mobileFx:'', [leave empty if you want to display the same effect on mobile devices and on desktop etc.]
slideOn:'random', [next, prev, random: decide if the transition effect will be applied to the current (prev) or the next slide]
gridDifference:250, [to make the grid blocks slower than the slices, this value must be smaller than transPeriod]
easing:'easeInOutExpo', [for the complete list http: jqueryui.com/demos/effect/easing.html]
mobileEasing:'', [leave empty if you want to display the same easing on mobile devices and on desktop etc.]
loader:'pie', [pie, bar, none (even if you choose "pie", old browsers like IE8- can't display it... they will display always a loading bar)]
loaderOpacity: .8, [0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1]
loaderColor:'#ffff00',
loaderBgColor:'#222222',
pieDiameter:50,
piePosition:'top:5px; right:5px', [this option accepts any CSS value]
pieStroke:8,
barPosition:'bottom', [bottom, top]
barStroke:5,
navigation:true, [true, false. It enables the previous and the next buttons, their IDs are #pix_prev and #pix_next]
mobileNavigation:true, [true, false. It enables the previous and the next buttons on mobile devices]
navigationHover:true, [true, false. If true navigation will be visible only on hover state]
mobileNavHover:true, [true, false. If true navigation will be visible only on hover state for mobile devices]
commands:true, [true, false. It enables stop and play buttons]
mobileCommands:true, [true, false. It enables stop and play buttons on mobile devices]
pagination:true, [true, false. It enables the pagination numbers. Here below you can see the appended code]
  <div id="pix_pag">
    <ul id="pix_pag_ul">
        <li id="pag_nav_0"><span><span>0</span></span></li>
        <li id="pag_nav_1"><span><span>1</span></span></li>
        <li id="pag_nav_2"><span><span>2</span></span></li>
        ...etc.
    </ul>
</div>
mobilePagination:true, [true, false. It enables the pagination numbers on mobile devices]
thumbs:true, [true, false. It shows the thumbnails (if available) when the mouse is on the pagination buttons. Not available for mobile devices]
hover:true, [true, false. Puase on state hover. Not available for mobile devices]
pauseOnClick:true, [true, false. It stops the slideshow when you click the sliders.]
rows:4,
cols:6,
slicedRows:8, [if 0 the same value of rows]
slicedCols:12, [if 0 the same value of cols]
time:3000, [milliseconds between the end of the sliding effect and the start of the nex one]
transPeriod:1500, [lenght of the sliding effect in milliseconds]
autoAdvance:true, [true, false]
mobileAutoAdvance:true, [true, false. Auto-advancing for mobile devices]
onStartLoading:function() { },
onLoaded:function() { },
onEnterSlide:function() { },
onStartTransition:function() { }

APIs

'data-fake'a path to an image, [iframes (or objects) must be replaced by an image during the transition. Paste here the path to the image, for an example see here below]
  <iframe width="940" height="470" src="http://www.youtube.com/embed/qas5lWp7_R0?wmode=transparent&autoplay=1" data-fake="images/slides/up-official-trailer-fake.jpg" frameborder="0" allowfullscreen></iframe>
'data-thumb'a path to an image, [its size is set by default on 50x50 pixels. You can change it in the stylesheets. Use this attribute for the target element to set the thumbnail relative to the slide]
'data-fx'the same value as 'fx' option, [use this attribute for the target element to set the effect relative to a slide]
'data-mobileFx'the same value as here above, but for mobile devices
'data-slideOn'next or prev, [use this attribute for the target element to set if apply the transition effect to the previous or the next element relative to the slide]
'data-slideOn'next or prev, [use this attribute for the target element to set if apply the transition effect to the previous or the next element relative to the slide]
'data-time'in milliseconds, [use this attribute for the target element to set for a slide the time between one transition the and the next one]
'data-easing'the same value as 'easing' option, [use this attribute for the target element to set the easing effect for a slide]
'.fromLeft'add this class to an element (with position:absolute) you want to appear from the left after the transition effect has terminated*
'.fromRight'add this class to an element (with position:absolute) you want to appear from the right after the transition effect has terminated*
'.fromTop'add this class to an element (with position:absolute) you want to appear from the top after the transition effect has terminated*
'.fromBottom'add this class to an element (with position:absolute) you want to appear from the bottom after the transition effect has terminated*
'.fadeIn'add this class to an element (with position:absolute) you want to appear fade in after the transition effect has terminated*
 (*)all these elements are display not at the same time, but consecutively5080

Download, support and donations... if you want

Diapo slideshow is an open source plugin and you can use it for free. But if you want to help me to improve it, keep it updated etc. please consider a free donation or buy something on my portfolio on ThemeForest.

Donations

Buy me a beer, a coffee or an ice cream to my daughter. Decide the amount you prefer

$

Buy something

Pixwall WP plugin on CodeCanyon

Buy my works: here is my portfolios on Themeforest and CodeCanyon

Hire

If you want you can hire me at manu at pixedelic dot com (include some details about your project and do not ask for support at this address)

Support

You can visit the Diapo Google Group and ask your question there (post a link that shows your problem) or post a tip or whatever you want... with moderation

Changelog

11/14/2011 v.1.0.4fixed a minor "comma" bug :-P
11/10/2011 v.1.0.3fixed some navigation bugs and other issues regarding mobile devices
9/20/2011 v.1.0.2fixed some bugs with IE
8/28/2011 v.1.0.1made it compatible with jQuery 1.4+
8/23/2011 v.1.0.0first public release
So sorry, Diapo slideshow is no more supported. Please visit my new slideshow plugin page: Camera slideshow, a new free slideshow with an adaptive layout