|
Page 22 sur 22
Diaporama d'images et textes descriptifs
Pour créer un diaporama pour faire défiler du contenu sous forme d'images et de textes descriptifs, on utilsera le plugin cycle de jQuery qui prend en charge plusieurs types d'effets de transition ( page officilelle: http://jquery.malsup.com/cycle/).
Dans le dossier de votre template "TemplatePro", créez un dossier "plugins" et placer dedans ces éléments :
- le fichier script jquery.cycle.min.js du plugin cycle
- un dossier images, un fichier diapo.css et diapo.js: ces éléments seront définis dans ce qui suit.
Copiez dans le dossier images les images suivantes à utilser dans le diaporama de test :
bkg-pagination.png
frison.jpg
frison-text.gif
mustang.jpg
mustang-text.gif
Tinker.jpg
tinker-text.gif
unicornus.jpg
unicornus-text.gif
Le fichier diapo.js permet la mise en oeuvre du plugin cycle. En voici le contenu :
$("#slides-wrapper .slides").cycle({
fx:"fade",
speed:1500,
timeout:7000,
pager:"#slides-pager",
pagerAnchorBuilder:function(index,slide){return'<li><a href="#">'+ ++index+"</a></li>"}
})
Le plugin cycle fournit une méthode appelée cycle qui est invoquée sur un élément conteneur "#slides-wrapper .slides" càd un bloc id="slides-wrapper" de classe slides. Chaque élément enfant du conteneur devient un "slide". Des Options de la méthode permettent de contrôler la manière et le temps de transition des slides.
Pour la liste des options disponibles pour la méthode cycle, consultez la page de référence à l'adresse : http://jquery.malsup.com/cycle/options.html.
Chaque option a une valeur par défaut pouvant être rédéfinie dans votre code. Dans notre cas, voici les options utilsées:
fx : effet de transition (valeur "fade" pour une disparition graduelle, "scrollDown" pour défilement vers le bas, "scrollUp" pour défilement vers le haut ...etc. Pour essayer les valeurs possibles de l'option fx et choisir l'effet qui vous convient, consultez la page http://jquery.malsup.com/cycle/browser.html).
speed : le temps en millisecondes que prend la transition d'un slide au slide suivant.
timeout: durée en millisecondes d'affichage d'un slide.
pager : Pour ajouter des boutons de pagination. Le sélecteur CSS défini à ce niveau est l'élément qui va contenir les liens de pagination. Dans notre cas il s'agit du bloc "#slides-pager".
pagerAnchorBuilder : sert à construire les éléments de pagination. Dans notre cas la valeur : function(index,slide){return'<li><a href="#">'+ ++index+"</a></li>"}
permet de construire des élément <li> avec liens hypertextes <a> au sein de "#slides-pager" (valeur de l'option pager).
D'après ces explications du code diapo.js, voici la forme du code html à insérer au niveau du module diaporama :
<div id="slides-wrapper" class="banner-home">
<div class="pager-wrapper">
<div class="pager">
<ul id="slides-pager"></ul>
<div class="clear"> </div>
</div>
<div class="clear"> </div>
</div>
<div class="slides">
<div class="slide"> CONTENU1 </div>
<div class="slide"> CONTENU2 </div>
<div class="slide"> CONTENU3 </div>
<div class="slide"> CONTENU4 </div>
</div>
</div>
Les éléments de pagination <li> qui seront créés dynamiquement, vont flotter à gauche. Ils seront donc construits autour du bloc <div class="pager"> pour annuler correctement moyennant <div class="clear"> le style "float: left" appliqué aux éléments ul li.
Créez, maintenant, un module diaporama et publiez-le dans la position user3. Avant d'y insérer le code suivant, choisissez "Aucun éditeur" pour "WYSIWYG par défaut" dans (Site--> Configuration du Site --> Onglet "Site"). Le contenu d'un slide <div class="slide"> a été développé pour inclure une image et un texte descriptif:
<div id="slides-wrapper" class="banner-home">
<div class="pager-wrapper">
<div class="pager">
<ul id="slides-pager"></ul>
<div class="clear"> </div>
</div>
<div class="clear"> </div>
</div>
<div class="slides">
<div class="slide">
<div class="content-slide slide1">
<div class="slide1text">
<h2>Mustang</h2>
<p>Les mustangs vivent en groupes d'une quinzaine d'individus, parfois plus. <a href="mustang">Suite...</a></p>
</div>
</div>
</div>
<div class="slide">
<div class="content-slide slide2">
<div class="slide2text">
<h2>Unicornus</h2>
<p>Il est appelé "monokeros" en grec, "unicornus" en latin et "Re'em" en hébreux. <a href="unicornus">Suite...</a></p>
</div>
</div>
</div>
<div class="slide">
<div class="content-slide slide3">
<div class="slide3text">
<h2>Tinker</h2>
<p>Le Tinker ou Irish Cob est originaire d’Irlande. Il est aussi connu sous le nom de Gypsy <a href="tinker">Suite...</a></p>
</div>
</div>
</div>
<div class="slide">
<div class="content-slide slide4">
<div class="slide4text">
<h2>Frison</h2>
<p>Le Frison est une race de cheval de selle et de trait originaire de la Frise <a href="frison">Suite...</a></p>
</div>
</div>
</div>
</div>
</div>
Pour afficher le nouveau module, apportez la modification en gras qui suit dans le fichier index.php de votre template :
<div id="principal">
<?php mosLoadModules ( 'user3' ); ?>
<?php mosMainBody(); ?>
</div>
Pour la mise en forme du contenu html, voici le fichier de styles diapo.css :
.banner-home{
position:relative;
background-color:#A4A872;
height:170px;
padding:0;overflow:hidden;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
width:99%;
margin: 0 auto;
margin-bottom:20px;
}
.banner-home a{color:#333333;}
.banner-home a:hover{color:#91ccf9;}
.pager{margin-left:0;}
.pager ul li a:link, .pager ul li a:visited { margin: 0;}
.pager-wrapper{
position:absolute;
top:150px;
left:180px;
z-index:100;
}
.pager-wrapper ul{margin:0;padding:0;}
.pager-wrapper ul li{
list-style-type:none;
width:8px;
height:8px;
margin:0 10px 0 0;
float:left;
}
.pager-wrapper ul li a{
display:block;
background:url(images/bkg-pagination.png) no-repeat 0 0;
position:relative;
width:8px;
height:8px;
text-indent:-9999px;
margin-right:10px;
padding:0;
overflow:hidden;
}
.pager-wrapper ul li a:hover{background-position:0 -8px;}
.pager-wrapper ul li.activeSlide{
background:url(images/bkg-pagination.png) no-repeat 0 -8px;
}
.content-slide{
position:relative;
width:100%;
height:150px;
font-size:16px;
color:#fff;
}
.content-slide h2{display:none;}
.slides{
width:96.25%;
margin:0 10px;
}
.slide{
width:100%;
background:url(images/bkg-banner.jpg) repeat-x top;
-moz-border-radius-topright:8px;
-webkit-border-top-right-radius:8px;
}
.slide p {
font-family:Arial,Helvetica,sans-serif;
font-size:90%;
text-align: justify;
}
.slide1{background:url(images/mustang.jpg) no-repeat center left;}
.slide2{background:url(images/unicornus.jpg) no-repeat center left;}
.slide3{background:url(images/Tinker.jpg) no-repeat center left;}
.slide4{background:url(images/frison.jpg) no-repeat center left;}
.slide1,.slide2,.slide3,.slide4{
-moz-border-radius-topleft:8px;
-webkit-border-top-left-radius:8px;
}
.slide1text,.slide2text,.slide3text,.slide4text{
position:absolute;
top:15px;
left:170px;
right:10px;
height:50px;
padding-top:50px;
}
.slide1text{background:url(images/mustang-text.gif) no-repeat 0 0;}
.slide2text{background:url(images/unicornus-text.gif) no-repeat 0 0;}
.slide3text{background:url(images/tinker-text.gif) no-repeat 0 0;}
.slide4text{background:url(images/frison-text.gif) no-repeat 0 0;}
.more-options{
border-top:1px solid #dfdfdf;
padding:25px 30px 0 30px;
margin:0 -20px;
}
Enfin, vous devez charger les fichiers de styles et javascript au niveau de la section <head> du fichier index.php de votre template :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $GLOBALS[cur_template];?>/plugins/diapo.css" media="screen" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $GLOBALS[cur_template];?>/plugins/jquery.cycle.min.js"></script>
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $GLOBALS[cur_template];?>/plugins/diapo.js">
</script>
Le premier script permet de charger, en premier lieu, la librairie jquery du site googleapis.
Voici l'affichage attendu
Merci de nous contacter si vous avez un commentaire, une erreur ou omission à signaler.
|
