Et un 2ème, sur le même principe, également responsive (adaptable).
La taille d'affichage des images N'EST PAS limitée à leur taille réelle (ce qui peut être un avantage, comme un inconvénient, selon ce que l'on cherche).
Démo, explications, liste des paramètres... :
http://responsiveslides.com/
Sur le principe du tuto de Jean, créez un nouveau gabarit Gallery que vous appellerez "responsiveSlide" (dans l'administration du module, pas un gabarit de page).
Source du gabarit :
Code :
[== Indéfini ==]
<div class="rslides_container">
<ul class="rslides" id="slider">
{foreach from=$images item=image}
<li>
<img src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" />
</li>
{/foreach}
</ul>
</div>
Gabarit CSS-feuille de style:
Code :
[== CSS ==]
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0 auto;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
.rslides_container {
position: relative;
float: left;
width: 100%;
}
.centered-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
top: 50%;
left: 0;
opacity: 0.5;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url("http://www.saint-come-olt.com/uploads/images/commun/themes.gif") no-repeat left top;
margin-top: -45px;
}
.centered-btns_nav:active {
opacity: 1.0;
}
.centered-btns_nav.next {
left: auto;
background-position: right top;
right: 0;
}
.transparent-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
top: 0;
left: 0;
display: block;
background: #fff; /* Fix for IE6-9 */
opacity: 0;
filter: alpha(opacity=1);
width: 48%;
text-indent: -9999px;
overflow: hidden;
height: 91%;
}
.transparent-btns_nav.next {
left: auto;
right: 0;
}
.large-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
opacity: 0.6;
text-indent: -9999px;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
background: #000 url("http://www.saint-come-olt.com/uploads/images/commun/themes.gif") no-repeat left 50%;
width: 38px;
}
.large-btns_nav:active {
opacity: 1.0;
}
.large-btns_nav.next {
left: auto;
background-position: right 50%;
right: 0;
}
.centered-btns_nav:focus,
.transparent-btns_nav:focus,
.large-btns_nav:focus {
outline: none;
}
.centered-btns_tabs,
.transparent-btns_tabs,
.large-btns_tabs {
margin-top: 10px;
text-align: center;
}
.centered-btns_tabs li,
.transparent-btns_tabs li,
.large-btns_tabs li {
display: inline;
float: none;
_float: left;
*float: left;
margin-right: 5px;
}
.centered-btns_tabs a,
.transparent-btns_tabs a,
.large-btns_tabs a {
text-indent: -9999px;
overflow: hidden;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background: #ccc;
background: rgba(0,0,0, .2);
display: inline-block;
_display: block;
*display: block;
-webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
-moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
width: 9px;
height: 9px;
}
.centered-btns_here a,
.transparent-btns_here a,
.large-btns_here a {
background: #222;
background: rgba(0,0,0, .8);
}
Gabarit JavaScript : c'est là que vous pouvez modifier les paramètres, comme décrit ici :
http://responsiveslides.com/ (paragraphe 5. Options you can customize)
Code :
[== JavaScript ==]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="uploads/js/responsiveslides.min.js">
</script>
<script>
$(function () {
$("#slider").responsiveSlides({
auto: true,
pager: false,
nav: true,
pause: true,
speed: 900,
timeout: 4000,
namespace: "centered-btns"
});
});
</script>
Vous n'avez plus qu'à placer charger vos images et écrire {Gallery template='responsiveSlide'} dans la page voulue.
NB : voir le paragraphe "résolution des problèmes" du tuto de Jean. Je conseille aussi le regroupement des appels aux fichiers JS dans un gabarit dédié (en V2, les blocs de contenu globaux sont remplacés par des gabarits "Core::Générique").
Enjoy
