Votre Navigateur ne supporte pas le JavaScript!
Home / Blog / Blog article

Notice: Undefined index: news_actus in /homepages/45/d283795163/htdocs/site-2013/tmp/templates_c/fc6d4015a0207ffcc00bd84890043ccaea513753.tpl_body.33.php on line 42

Notice: Trying to get property of non-object in /homepages/45/d283795163/htdocs/site-2013/tmp/templates_c/fc6d4015a0207ffcc00bd84890043ccaea513753.tpl_body.33.php on line 42

Intégration d'un slide responsive dans Gallery

Pour commercer, il faut d'abord télécharger et installer le module Gallery disponible sur la forge CMSMS ainsi que le JavaScript nommé Responsiv...

Catégorie : CMS Made Simple

Partagez cet article :

Email facebook twitter Google+

Dans cette article, je vous propose de découvrir comment intégrer un slider responsive dans le module de Gallery et de ResponsiveSlides.js dans un site développé sous le gestionnaire de contenu CMS Made Simple.

Pour commercer, il faut d'abord télécharger et installer le module Gallery disponible sur la forge CMSMS ainsi que le JavaScript nommé Responsiveslide.js.

Module Gallery

Responsiveslide.js

1 - Installation du module Gallery

Pour l'installation de ce module, il y a deux manières de procéder :

- la première est d'utiliser le Gestionnaire de Modules dans l'onglet "Extension" de l'interface d'administration de votre site Intenet. Et le téléchargement des fichiers et l'installation s'effectuera tout seul.

- la deuxième un peu plus complexe est de télécharger le module directement sur la forge via le lien ci-dessus et de l'uploader via le FTP dans le dossier "module" présent la racine du site. Ensuite ce rendre l'onglet "Extension", puis cliquez sur "installer" sur la ligne du module Gallery.

2 - Mise en place du fichier Responsiveslide.js

Téléchargez le fichier à partir du lien ci-dessous et uploadez-le dans un dossier nommé "js" que vous aurez préalablement créé, dans le dossier "uploads" de votre site Internet.

3 - Création du gabarit et du script

Créer un nouveau gabarit dans le module Gallery et copier / coller le gabarit ci-dessous dans la zone de texte nommée "Source du gabarit :"

<ul class="rslides">{foreach from=$images item=image}
<li><img src="{$image-&gt;thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image-&gt;titlename}" /></li>
{/foreach}</ul>
<div class="rslidesclear"> </div>

Pour ce qui concerne le script, il y a deux choses à mettre en place :

La première partie correspond à l'appel aux fichiers jquery. Pour le fichier responsiveslides.min.js, mettez le chemin pour atteindre le dossier où vous allez copiez votre fichier (dans l'exemple c'est /js/).

La seconde partie est la fonction qui va permettre au slide, le changement d'images. Vous pourrez également y insérer ou supprimer les options en fonction de vos désires (pour l'exemple, elles sont toutes présentes).

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="uploads/js/responsiveslides.min.js"></script>
<script charset="utf-8" type="text/javascript">// <![CDATA[
$(function() {
    $(".rslides").responsiveSlides(
    auto: true,             // Boolean: Animate automatically, true or false
    speed: 500,             // Integer: Speed of the transition, in milliseconds
    timeout: 4000,          // Integer: Time between slide transitions, in milliseconds
    pager: false,           // Boolean: Show pager, true or false
    nav: false,             // Boolean: Show navigation, true or false
    random: false,          // Boolean: Randomize the order of the slides, true or false
    pause: false,           // Boolean: Pause on hover, true or false
    pauseControls: true,    // Boolean: Pause when hovering controls, true or false
    prevText: "Previous",   // String: Text for the "previous" button
    nextText: "Next",       // String: Text for the "next" button
    maxwidth: "",           // Integer: Max-width of the slideshow, in pixels
    navContainer: "",       // Selector: Where controls should be appended to, default is after the 'ul'
    manualControls: "",     // Selector: Declare custom pager navigation
    namespace: "rslides",   // String: Change the default namespace used
    before: function(){},   // Function: Before callback
    after: function(){}     // Function: After callback
);
  });
// ]]></script>

4 - Mise en place du CSS

Copier / coller le CSS ci-dessous dans la zone de texte nommée "Gabarit CSS-feuille de style :"

.rslides { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; } .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; } .rslidesclear{ clear:both; }

N'oubliez pas d'ajouter [[strip]] au début de votre fichier CSS et [[/strip]] à la fin pour concaténer votre feuille de style et ainsi en réduire son temps de chargement.

5 - Mise en place du slide sur une page

Pour afficher votre slide sur la page souhaitée, insérez à l'endroit voulu

  1.  {Gallery template='responsiveSlide' dir='nom-de-votre-galerie'}

6 - Optimisation des images

Pour gagner en rapidité sur le chargement du slide en optimisant les poids des images, je vous propose de découvrir l'article sur l'optimisation des images au format .png sur cette page : Optimiser le poids de vos images .PNG!

A vous maintenant de personnaliser votre gabarit comme bon vous semble comme par exemple rajouter du texte sur l'image, durée de l'animation, activer ou désactiver les visuels,...

Catégories

Derniers articles

Je vous propose une petite compilation d'astuce et bout de code pour les...

> Lire la suite...

Dans cette article, je vous propose de découvrir comment intégrer un slider...

> Lire la suite...

A propos de l'auteur

Passionné d'informatique depuis les années 2000 et plus particulièrement par le monde du web, j'en ai fait mon métier (Chef de projets Web et auto-entrepreneur). J'ai décidé de créer ce blog afin de vous faire profiter d'astuces et de ressources autour de CMS Made Simple, HTML/CSS, JavaScript, Webdesign, ....