Ho trovato un componente più completo di quello per phoca gallery che è questo:
http://www.rocketwerx.com/products/rokslideshow/documentationIn particolare ho utilizzato quello standalone che non necessita di installazione, ho quindi copiato la cartella nella root del sito ed ho inserito il seguente codice in un articolo:
<div id="slidewrap">
<div id="slideshow"></div>
<div id="loadingDiv"></div>
</div>
<script type="text/javascript">
window.RokSlideshowPath = '';
window.addEvent('load', function(){
var imgs = [
{
file: '1.jpg',
title: 'Audi RS8 V-12 TDI LeMans Concept - Front Angle View',
desc: 'V-12 Diesel concept version based on the LeMans winning V-10 race car.',
url: '#'
},{
file: '2.jpg',
title: 'Audi RS8 V-12 TDI LeMans Concept - Back Angle View',
desc: 'More aggressive body panels gives this concept a mean look',
url: '#'
},{
file: '3.jpg',
title: 'Audi RS8 V-12 TDI LeMans Concept - Side View',
desc: 'THe unique orange/grey color scheme makes this concept stand out from the crowd.',
url: '#'
},{
file: '4.jpg',
title: 'Audi RS8 V-12 TDI LeMans Concept - Front View',
desc: 'Any lower and this RS8 would be scooping up tar as it drives down the road.',
url: '#'
},{
file: '5.jpg',
title: 'Audi RS8 V-12 TDI LeMans Concept - Front View',
desc: 'Notice the roof mounted cooling for the mid-engine configuration',
url: '#'
}];
var myshow = new Slideshow('slideshow', {
type: 'combo',
showTitleCaption: 1,
captionHeight: 45,
width: 450,
height: 300,
pan: 20,
zoom: 30,
loadingDiv: 1,
resize: true,
duration: [2000, 9000],
transition: Fx.Transitions.Expo.easeOut,
images: imgs,
path: 'images/'
});
myshow.caps.h2.setStyles({
color: '#fff',
fontSize: '13px'
});
myshow.caps.p.setStyles({
color: '#ccc',
fontSize: '11px'
});
});
</script>
Funziona tutto perfettamente solo che vorrei allineare del testo in alto a destra dell'immagine e non so come fare... riesco solo ad aggiungere il testo sopra e sotto l'immagine, io vorrei che il testo si trovasse a destra e che poi continuasse sotto...