11/02/2011, 20:02:56
Je me suis décidé enfin à le tester 
Ce module est assez génial. Il vous permet d'utiliser n'importe quel plugin JQuery pour afficher vos images.
Par exemple avec CoinSlider
Créez un nouveau gabarit Gallery que vous appelerez "coinslider" (dans l'administration du module, pas un gabarit de page).
Source du gabarit :
Gabarit CSS-feuille de style:
Gabarit JavaScript:
Vous n'avez plus qu'à placer charger vos images et écrire {Gallery template='coinslider'} dans la page voulue.
Have fun
Ce serait sympa que ceux qui ont déjà utilisé ce module avec des gabarits autre que ceux donnés par défaut partagent leur petites merveilles sur ce post, ou dans le blog
Résolution de problèmes
Si votre galerie ne fonctionne pas (l'image s'ouvre dans un nouvel onglet, par exemple), c'est très souvent à cause que le fichier (jquery.min.js) est dupliqué par un autre module ou thème. Vous ne pouvez avoir qu'une version de JQuery sur une page (vérifiez le code source de votre page).
Je vous conseille d'utiliser un bloc de contenu global pour tous vos appels aux fichiers JS que vous placerez dans le gabarit de page au lieu d'utiliser l'espace prévu dans les modules (comme ici au lieu de "Gabarit JavaScript:").
Cela vous permettra de mieux gérer les éventuels problèmes dûs à ShowTime ou encore le gabarit Simplex qui utilisent tous deux JQuery.
De même, vous pouvez créer un nouvelle feuille de style que vous ajouterez à votre gabarit de page au lieu d'utiliser l'espace réservé du module (comme ici au lieu de "Gabarit CSS-feuille de style:").
Vous verrez qu'il sera beaucoup plus facile de vous y retrouver
Attention : si vous utilisez le thème Simplex, ce dernier a besoin d'un JQuery récent.
Si vous n'avez pas suffisamment de compétences pour utiliser les blocs de contenu globaux, comme expliqué plus haut, le plus simple est de garder en fin de gabarit de PAGE, puis de placer juste après (donc juste avant </body>). En effet, un script JS a besoin de charger d'abord la bibliothèque principale pour y trouver les fonctions qu'il utilise.
Ce module est assez génial. Il vous permet d'utiliser n'importe quel plugin JQuery pour afficher vos images.
Par exemple avec CoinSlider
Créez un nouveau gabarit Gallery que vous appelerez "coinslider" (dans l'administration du module, pas un gabarit de page).
Source du gabarit :
Code :
<div id='coin-slider'>
{foreach from=$images item=image}
<a href="#"><img class="img-candidat" src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a>
{/foreach}
</div>Code :
/*
Coin Slider jQuery plugin CSS styles
http://workshop.rs/projects/coin-slider
*/
/* Added by Matt */
#coin-slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
/* */
#coin-slider a {
border:0;
display:block;
}
.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }
.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
.cs-title { width: 590px; padding: 10px; background-color: #000000; color: #FFFFFF; }
.cs-prev,
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }Code :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="js/coin-slider.js"></script>{* à télécharger sur le site du plugin. Attention, corrigez le path suivant l'endroit où vous le placez *}
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 600, height: 398, hoverPause: true, navigation: true, delay: 5000 });
});
</script>
{* Vous pouvez modifier les paramètres comme il plaira, voir la doc du plugin *}Have fun
Ce serait sympa que ceux qui ont déjà utilisé ce module avec des gabarits autre que ceux donnés par défaut partagent leur petites merveilles sur ce post, ou dans le blog
Résolution de problèmes
Si votre galerie ne fonctionne pas (l'image s'ouvre dans un nouvel onglet, par exemple), c'est très souvent à cause que le fichier (jquery.min.js) est dupliqué par un autre module ou thème. Vous ne pouvez avoir qu'une version de JQuery sur une page (vérifiez le code source de votre page).
Je vous conseille d'utiliser un bloc de contenu global pour tous vos appels aux fichiers JS que vous placerez dans le gabarit de page au lieu d'utiliser l'espace prévu dans les modules (comme ici au lieu de "Gabarit JavaScript:").
Cela vous permettra de mieux gérer les éventuels problèmes dûs à ShowTime ou encore le gabarit Simplex qui utilisent tous deux JQuery.
De même, vous pouvez créer un nouvelle feuille de style que vous ajouterez à votre gabarit de page au lieu d'utiliser l'espace réservé du module (comme ici au lieu de "Gabarit CSS-feuille de style:").
Vous verrez qu'il sera beaucoup plus facile de vous y retrouver
Attention : si vous utilisez le thème Simplex, ce dernier a besoin d'un JQuery récent.
Si vous n'avez pas suffisamment de compétences pour utiliser les blocs de contenu globaux, comme expliqué plus haut, le plus simple est de garder
Code :
{cms_jquery exclude='jquery-ui.min.js,jquery.ui.nestedSortable.js,jquery.json.min.js' append='uploads/simplex/js/functions.min.js'}Code :
<script type="text/javascript" src="js/coin-slider.js"></script>{* à télécharger sur le site du plugin. Attention, corrigez le path suivant l'endroit où vous l'avez uploadé *}
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 600, height: 398, hoverPause: true, navigation: true, delay: 5000 });
});
</script>
