This is a demnonstration of Projekktor´s Audioslidehow Plugin. The more information can be found in the documenation and here.
The Stairs
Music: "Materia" by M-PeX (Marco Miranda), http://soundcloud.com/mpex under http://creativecommons.org/licenses/by-nc-sa/3.0/
Photos: "Treppen" by Ernst Kluger, http://www.ernstkluger.de under http://creativecommons.org/licenses/by-nc-sa/3.0/
Photos: "Treppen" by Ernst Kluger, http://www.ernstkluger.de under http://creativecommons.org/licenses/by-nc-sa/3.0/
<div style="width: 920px; margin: auto;">
<div style="width: 460px; float:left; margin: 0 10px 0 0;">
<!-- THE PLAYER -->
<div class="projekktor audio" id="player2" style="width: 460px; height: 450px; margin: 15px;"></div>
<!-- THUMB CONVEYOR -->
<div class="ppsliderwrapper">
<div class="ppsliderconveyor" data-pp-audioslideshow-host="player2" data-pp-audioslideshow-func="conveyor"></div>
<div class="ppsliderprev" data-pp-audioslideshow-host="player2" data-pp-audioslideshow-func="prev"></div>
<div class="ppslidernext" data-pp-audioslideshow-host="player2" data-pp-audioslideshow-func="next"></div>
</div>
</div>
<div style="width: 430px; float:left;">
<!-- FULL SIZE IMAGE -->
<div class="ppslidertitle" data-pp-audioslideshow-host="player2" data-pp-audioslideshow-func="title">The Stairs</div>
<div class="ppsliderimage" data-pp-audioslideshow-host="player2" data-pp-audioslideshow-func="canvas"></div>
</div>
<div style="clear: both; margin: 10px; text-align: center; width: 100%;">
Music: "Materia" by M-PeX (Marco Miranda), http://soundcloud.com/mpex under http://creativecommons.org/licenses/by-nc-sa/3.0/<br/>
Photos: "Treppen" by Ernst Kluger, http://www.ernstkluger.de under http://creativecommons.org/licenses/by-nc-sa/3.0/
</div>
</div>
<!-- FUN PART -->
<script type="text/javascript">
jQuery(document).ready(function($) {
var player=projekktor('#player2' , {
addplugins: ['audioslideshow'],
controls: true,
plugin_controlbar: {
showCuePoints: true,
disableFade: true
},
playlist: [
{
1: {src: 'content/demos/audioslideshow/audio/01_m-pex_-_materia.mp3', type:'audio/mpeg'},
2: {src: 'content/demos/audioslideshow/audio/01_m-pex_-_materia.ogg', type:'audio/ogg'},
config: {
poster: 'content/demos/audioslideshow/images/00_m-pex_-_ignis__front_.jpg',
plugin_audioslideshow: {
images: [
{src_pre: 'content/demos/audioslideshow/images/t1.jpg', src: 'content/demos/audioslideshow/images/t1-big.jpg', on: '00:00:02', title: 'Oh long and dark the stairs I trod,'},
{src_pre: 'content/demos/audioslideshow/images/t2.jpg', src: 'content/demos/audioslideshow/images/t2-big.jpg', on: '00:00:14', title: 'with stumbling feet to find my God,'},
{src_pre: 'content/demos/audioslideshow/images/t3.jpg', src: 'content/demos/audioslideshow/images/t3-big.jpg', on: '00:00:34', title: 'Gaining a foothold bit by bit'},
{src_pre: 'content/demos/audioslideshow/images/t4.jpg', src: 'content/demos/audioslideshow/images/t4-big.jpg', on: '00:01:20', title: 'Then slipping back and losing it.'},
{src_pre: 'content/demos/audioslideshow/images/t5.jpg', src: 'content/demos/audioslideshow/images/t5-big.jpg', on: '00:01:55', title: 'There came a certain time when I'},
{src_pre: 'content/demos/audioslideshow/images/t6.jpg', src: 'content/demos/audioslideshow/images/t6-big.jpg', on: '00:02:15', title: 'Loosened my hold and fell thereby,'},
{src_pre: 'content/demos/audioslideshow/images/t7.jpg', src: 'content/demos/audioslideshow/images/t7-big.jpg', on: '00:02:45', title: 'Down to the lowest step my fall'},
{src_pre: 'content/demos/audioslideshow/images/t8.jpg', src: 'content/demos/audioslideshow/images/t8-big.jpg', on: '00:03:10', title: 'As if I had not climbed at all.'},
{src_pre: 'content/demos/audioslideshow/images/t9.jpg', src: 'content/demos/audioslideshow/images/t9-big.jpg', on: '00:03:45', title: 'And as I lay despairing there,'},
{src_pre: 'content/demos/audioslideshow/images/t10.jpg', src: 'content/demos/audioslideshow/images/t10-big.jpg', on: '00:04:10', title: 'there came a footfall on the stairs'},
{src_pre: 'content/demos/audioslideshow/images/t11.jpg', src: 'content/demos/audioslideshow/images/t11-big.jpg', on: '00:04:40', title: 'And lo when hope had ceased to be'},
{src_pre: 'content/demos/audioslideshow/images/t12.jpg', src: 'content/demos/audioslideshow/images/t12-big.jpg', on: '00:04:50', title: 'My God came down the stairs to me.'}
]
}
}
}
]
});
});
</script>
