Insérer un diaporama/slider avec le module Gallery

[Jean le Chauve]

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 :

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>

Gabarit CSS-feuille de style:

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; }

Gabarit JavaScript:

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 *}

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

Code :

{cms_jquery exclude='jquery-ui.min.js,jquery.ui.nestedSortable.js,jquery.json.min.js' append='uploads/simplex/js/functions.min.js'}

en fin de gabarit de PAGE, puis de placer

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>

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.

[Jean le Chauve]

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 :

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>

Gabarit CSS-feuille de style:

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; }

Gabarit JavaScript:

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 *}

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

Code :

{cms_jquery exclude='jquery-ui.min.js,jquery.ui.nestedSortable.js,jquery.json.min.js' append='uploads/simplex/js/functions.min.js'}

en fin de gabarit de PAGE, puis de placer

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>

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.