Note:
 
Le tomos contenant les images doit être en haut de la barre de tomos.
CSS pour le diaporama HTML

<style type="text/css">

.galleria-container {
position:relative;
overflow:hidden;
height:450px;
}
.galleria-container img {
-moz-user-select:none;
-webkit-user-select:none;
-o-user-select:none;
}
.galleria-stage {
position:absolute;
top:10px;
bottom:20px;
left:10px;
right:10px;
overflow:hidden;
height:380px;
}
.galleria-thumbnails-container {
height:50px;
bottom:0;
position:absolute;
left:10px;
right:10px;
z-index:2;
}
.galleria-carousel .galleria-thumbnails-list {
margin-left:30px;
margin-right:30px;
margin-top:20px;
}
.galleria-thumbnails .galleria-image {
height:20px;
width:30px;
background:#FFF;
margin:0 5px 0 0;
float:left;
cursor:pointer;
}
.galleria-counter {
position:absolute;
bottom:10px;
left:10px;
text-align:right;
color:#fff;
font:italic 11px/1 georgia,sans-serif;
z-index:2;
}
.galleria-loader {
background:#000;
width:20px;
height:20px;
position:absolute;
top:10px;
right:10px;
z-index:2;
display:none;
background:url(http://tomostheque.tomosfactory.fr/lab/galleria/classic-loader.gif) no-repeat 2px 2px;
}
.galleria-info{
top:373px;
right:0;
z-index:2;
position:absolute;
text-align:right;
color:#b5b5b5;
}
.galleria-info-text{
padding: 7px;
display:none;
font:italic 11px/1 georgia,sans-serif;
}
.galleria-info-title{
font:italic 11px/1 georgia,sans-serif;
margin:0;
}
.galleria-info-description{
font:italic 11px/1 georgia,sans-serif;
margin:0;
}
.galleria-info-title+.galleria-info-description {
margin-top:7px;
}
.galleria-info-close {
width:9px;
height:9px;
position:absolute;
top:5px;
right:5px;
background-position:-753px -11px;
opacity:.5;
filter:alpha(opacity=50);
cursor:pointer;
display:none;
}
.galleria-info-link {
background-position:-669px -5px;
opacity:.8;
filter:alpha(opacity=80);
position:absolute;
width:20px;
height:20px;
cursor:pointer;
background-color:#000;
}
.galleria-info-link:hover, .galleria-info-close:hover {
opacity:.5;
filter:alpha(opacity=50);
}
.galleria-image-nav {
position:absolute;
top:50%;
margin-top:-15px;
width:100%;
height:31px;
left:0;
}
.galleria-image-nav-left, .galleria-image-nav-right {
opacity:.7;
filter:alpha(opacity=70);
cursor:pointer;
width:30px;
height:31px;
position:absolute;
left:10px;
z-index:2;
}
.galleria-image-nav-right{
left:auto;
right:10px;
background-position:-285px 0;
z-index:2;
}
.galleria-image-nav-left:hover, .galleria-image-nav-right:hover {
opacity:.5;
filter:alpha(opacity=50);
}
.galleria-thumb-nav-left, .galleria-thumb-nav-right {
cursor:pointer;
display:none;
background-position:-495px 5px;
position:absolute;
left:0;
top:0;
height:40px;
width:23px;
z-index:3;
opacity:.8;
filter:alpha(opacity=80);
}
.galleria-thumb-nav-right {
background-position:-578px 5px;
border-right:none;
right:0;
left:auto;
}
.galleria-thumbnails-container .disabled, .galleria-thumbnails-container .disabled:hover {
opacity:.2;
filter:alpha(opacity=20);
cursor:default;
}
.galleria-thumb-nav-left:hover, .galleria-thumb-nav-right:hover {
opacity:1;
filter:alpha(opacity=100);
background-color:#111;
}
.galleria-carousel .galleria-thumb-nav-left, .galleria-carousel .galleria-thumb-nav-right {
display:block;
}
.galleria-thumb-nav-left, .galleria-thumb-nav-right, .galleria-info-link, .galleria-info-close, .galleria-image-nav-left, .galleria-image-nav-right {
background-image:url(http://tomostheque.tomosfactory.fr/lab/galleria/classic-map.png);
background-repeat:no-repeat;
}
</style>
HTML du DIAPORAMA

<div id="galleria">
<div><img alt="" title="test1" src="http://simalti.tomosfactory.fr/userfiles/image/tomos/354_6398_tomos-image_montagne1.png" /></div>
<div><img alt="" title="test2" src="http://simalti.tomosfactory.fr/userfiles/image/tomos/354_6400_tomos-image_sport.png" /></div>
<div><img alt="" title="test3" src="http://simalti.tomosfactory.fr/userfiles/image/tomos/354_6401_tomos-image_yoga.png" /></div>
<div><img alt="" title="test4" src="http://simalti.tomosfactory.fr/userfiles/image/tomos/354_6399_tomos-image_montagne1.png" /></div>
</div>
CODE SCRIPT DIAPORAMA
plus d'infos: http://galleria.aino.se/
<script src="http://lab.tomosfactory.fr/includes/jquery/jquery-1.4.4.min.js"></script>   
<script src="http://lab.tomosfactory.fr/includes/jquery/jquery.cycle.all.latest.js"></script>  
<script src="http://tomostheque.tomosfactory.fr/lab/galleria/src/galleria.js"></script>    

<script type="text/javascript">
jQuery.noConflict();

 // Load theme
    Galleria.loadTheme('http://tomostheque.tomosfactory.fr/lab/galleria/src/themes/classic/galleria.classic.js');
    
    // run galleria and add some options
    jQuery('#galleria').galleria({
        thumb_crop: true, // crop all thumbnails to fit
        transition: 'fade', // crossfade photos
        transition_speed: 700, // slow down the crossfade
        extend: function() {
            this.bind(Galleria.IMAGE, function(e) {
                // bind a click event to the active image
                jQuery(e.imageTarget).css('cursor','pointer').click(this.proxy(function() {
                    // open the image in a lightbox
                    this.openLightbox();
                }));
            });
        }
    });
</script>
Tomos > Diaporama integré
From : http://galleria.aino.se/

Tomosfactory : création de site