Forum CMS Made Simple FR
Insérer un diaporama/slider avec le module Gallery - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Ressources (https://forum.cmsmadesimple.fr/forum-4.html)
+--- Forum : Développement et Astuces (https://forum.cmsmadesimple.fr/forum-15.html)
+--- Sujet : Insérer un diaporama/slider avec le module Gallery (/thread-975.html)

Pages : 1 2

Insérer un diaporama/slider avec le module Gallery - jissey - 28/08/2012

chez moi avec firebug, il suffit de mettre "relative" et tout est calé.
JE suppose que c'est encore IE qui fait des siennes.
En tout cas, quand tu auras trouvé, merci de nous donner la solution.

Insérer un diaporama/slider avec le module Gallery - Helisa - 04/06/2013

Bonjour,
J'essaie désespérément de faire fonctionner le diaporama de Jean le Chauve, j'allais dire que j'ai tout essayé, pas tout à fait puisque ça ne fonctionne toujours pas.
La solution de Jissey fonctionne sans problème, je vois la progression des images... tout est ok.


Le même diaporama disparait totalement avec coinslider, plus d'images, j'ai juste réussi à récupérer les noms des photos en bidouillant le gabarit.
je n'arrive pas à comprendre ce qui peut clocher.
Quelqu'un pour m'aider ?

Insérer un diaporama/slider avec le module Gallery - jissey - 04/06/2013

Bonjour et bienvenue sur le forum Helisa,
tu parles de ça?

Insérer un diaporama/slider avec le module Gallery - Helisa - 04/06/2013

Bonsoir Jissey
Oui il s'agit bien de ça, j'en fais des cauchemars depuis trois jours, impossible à mettre en place, et je suis en train de tester showtime que je viens juste de trouver, mais pour l'instant ça buggue.
J'espère pouvoir utiliser le diaporama pour le bandeau de simplex, et je suis ouverte à toute suggestion.
Au secours....

Insérer un diaporama/slider avec le module Gallery - jissey - 04/06/2013

j'ai besoin d'un slider moi aussi, je vais l'installer et le publier.
Le problème étant le temps...peut-être demain....il y a aussi wow slider qui me plait bien Big Grin

Insérer un diaporama/slider avec le module Gallery - Helisa - 04/06/2013

Il n'est pas mal, c'est vrai.
Si tu peux me souffler une solution je t'en serai reconnaissante.
J'ai installé et désinstallé showtime plusieurs fois sur deux hébergements différents, sur le premier une seule image et pas de transition, sur le second même pas d'image. Je désespère.

Insérer un diaporama/slider avec le module Gallery - Helisa - 05/06/2013

J'ai trouvé la cause, à court d'idées, j'ai changé de gabarit, et Showtime fonctionne. Je n'arrive pas à déterminer ce qui peut empêcher Simplex de montrer les slides, alors Jissey, si tu as une idée elle sera toujours la bienvenue.

Insérer un diaporama/slider avec le module Gallery - jissey - 05/06/2013

Salut,
ouvre un autre post et explique nous clairement ton problème en indiquant les infos demandées et en mettant un lien.
Je ne suis pas Madame Irma Big Grin, je ne lis pas dans le marc du café que je suis en train de boire Cool

Insérer un diaporama/slider avec le module Gallery - bess - 05/06/2013

à dix contre un : tu dois faire appel deux fois à la librairie Jquery sur Simplex Smile

mais comme l'a dit Jissey : il nous faut le code sous les yeux pour comprendre et t'aider.

Insérer un diaporama/slider avec le module Gallery - Helisa - 05/06/2013

Je vous remercie tous les deux, je m'y remets ce soir et je vous tiens au courant.

Insérer un diaporama/slider avec le module Gallery - Helisa - 06/06/2013

Bonjour,
Super, ça fonctionne. Bess a gagné son pari.
Dans le gabarit de Simplex il y a un bout de code qui fait fonctionner les images du bandeau, en le supprimant on supprime du même coup ces images, mais comme je voulais le remplacer par une animation plus élaborée, ça ne me gêne pas trop.

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

Le problème maintenant est sur mon téléphone. L'animation ne réduit pas assez, et l'écran ne veut plus faire de rotation automatique.

Insérer un diaporama/slider avec le module Gallery - jissey - 06/06/2013

Bonjour,
Il existe des slider jquery responsive.
Si tu as un autre problème, ouvre un post spécifique, ici c'est Trucs&Astuces Smile

Insérer un diaporama/slider avec le module Gallery - manchi - 31/07/2013

Salut à tous! je débarque sur cms-ms et j'avoue j'en bave un peu... plutôt wordpress ou joomla d'habitude. Je suis en train d'essayer de monter le slideshow de Jean le Chauve. Est-ce que quelqu'un pourrait me confirmer la manip ?
1/ je créé un gabarit via le backoffice/gabarit de cms-ms dans lequel j'ajoute dans la parti <html> le code source et dans le head la partie javascript
2/ Ensuite je créé une feuille de style css toujours via le backoffice/gabarit/feuille de style que j'attache à mon gabarit.
Ai-je bon ?
Merci pour vos réponses...

MISE A JOUR [Résolu] : J'avais bon mais fallait juste créer un gabarit au niveau de Gallery/Gallerie d'images et non un gabarit de page :-D

Insérer un diaporama/slider avec le module Gallery - bess - 08/07/2014

[h]Topic nettoyé, merci d'ouvrir une nouvelle discussion si vous avez un soucis en insérant simplement le lien vers ce fil de discussion[/h]

Insérer un diaporama/slider avec le module Gallery - Virginie 12 - 01/02/2016

Bonjour,

Comme suggéré par Jean (et avec son aide), sur la base d'un lien fourni par pierrepercee, voici un slider responsive (adaptable).
La taille d'affichage des images est 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://bxslider.com/

Sur le principe du tuto de Jean, créez un nouveau gabarit Gallery que vous appellerez "bxslider" (dans l'administration du module, pas un gabarit de page).
Source du gabarit :

Code :
[== Indéfini ==]
<div class="slider">
<ul class="bxslider">
{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 ==]
/**
* BxSlider v4.1.2 - Fully loaded, responsive content slider
* http://bxslider.com
*
* Written by: Steven Wanderski, 2014
* http://stevenwanderski.com
* (while drinking Belgian ales and listening to jazz)
*
* CEO and founder of bxCreative, LTD
* http://bxcreative.com
*/


/** RESET AND LAYOUT
===================================*/

.bx-wrapper {
    position: relative;
    margin: 0 auto 0;
    padding: 0;
    *zoom: 1;
}

.bx-wrapper img {
    
    display: block;
}

/** THEME
===================================*/

.bx-wrapper .bx-viewport {

    /*fix other elements on the page moving (on Chrome)*/
    -webkit-transform: translatez(0);
    -moz-transform: translatez(0);
        -ms-transform: translatez(0);
        -o-transform: translatez(0);
        transform: translatez(0);
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
    position: absolute;
    bottom: -30px;
    width: 100%;
}

/* LOADER */

.bx-wrapper .bx-loading {
    min-height: 50px;
    background: url(http://bxslider.com/lib/images/bx_loader.gif) center center no-repeat #fff;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
}

/* PAGER */

.bx-wrapper .bx-pager {
    text-align: center;
    font-size: .85em;
    font-weight: bold;
    color: #666;
    padding-top: 20px;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}

.bx-wrapper .bx-pager.bx-default-pager a {
    background: #666;
    text-indent: -9999px;
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    outline: 0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
    background: #000;
}

/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
    left: 10px;
    background: url(http://bxslider.com/lib/images/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
    right: 10px;
    background: url(images/controls.png) no-repeat -43px -32px;
}

.bx-wrapper .bx-prev:hover {
    background-position: 0 0;
}

.bx-wrapper .bx-next:hover {
    background-position: -43px 0;
}

.bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: 50%;
    margin-top: -16px;
    outline: 0;
    width: 32px;
    height: 32px;
    text-indent: -9999px;
    z-index: 9999;
}

.bx-wrapper .bx-controls-direction a.disabled {
    display: none;
}

/* AUTO CONTROLS (START / STOP) */

.bx-wrapper .bx-controls-auto {
    text-align: center;
}

.bx-wrapper .bx-controls-auto .bx-start {
    display: block;
    text-indent: -9999px;
    width: 10px;
    height: 11px;
    outline: 0;
    background: url(images/controls.png) -86px -11px no-repeat;
    margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
    background-position: -86px 0;
}

.bx-wrapper .bx-controls-auto .bx-stop {
    display: block;
    text-indent: -9999px;
    width: 9px;
    height: 11px;
    outline: 0;
    background: url(images/controls.png) -86px -44px no-repeat;
    margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
    background-position: -86px -33px;
}

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
    text-align: left;
    width: 80%;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
    right: 0;
    width: 35px;
}

/* IMAGE CAPTIONS */

.bx-wrapper .bx-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #666\9;
    background: rgba(80, 80, 80, 0.75);
    width: 100%;
}

.bx-wrapper .bx-caption span {
    color: #fff;
    font-family: Arial;
    display: block;
    font-size: .85em;
    padding: 10px;
}

Gabarit JavaScript : c'est là que vous pouvez modifier les paramètres, comme décrit ici :http://bxslider.com/options

Code :
[== JavaScript ==]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="uploads/js/jquery.bxslider.min.js"></script>

<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
  mode: 'fade',
  captions: true
});
});
</script>

Vous n'avez plus qu'à placer charger vos images et écrire {Gallery template='bxslider'} 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

Insérer un diaporama/slider avec le module Gallery - Virginie 12 - 01/02/2016

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