Vous n'êtes pas identifié(e).

Annonce

ATTENTION

  • Prenez le temps de rechercher si quelqu'un n'a pas déjà proposé une solution à votre problème. Sur le forum français et sur le wiki
  • Pensez à mettre à jour votre version de CMS Made Simple. Nous ne faisons de support que sur LA dernière version de CMS Made Simple.
  • Renseignez impérativement le formulaire de nouveau message de manière la plus complète que possible. Dans votre CMS utiliser le menu Administration du site/Informations du système en haut Vue au format texte. Ces informations demandées nous permettent de mieux vous aider
  • Ajoutez [Résolu] au début du titre de votre 1er message lorsqu'une solution a été trouvée.

#26 28/08/2012 15:41:22

jissey
Administrateur
Lieu : Volx
Inscription : 30/10/2009
Messages : 2 532
Site Web

Re : Insérer un diaporama/slider avec le module Gallery

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.


Inscrivez-vous à notre Newsletter sur le site (colonne de droite, en bas).
Vous appréciez CMSMS et l'aide qui vous est fournie ici, aidez-nous en participant au projet.
Formation CMS Made Simple | Création de site CMS Made Simple.

C'est en se plantant qu'on devient cultivé.
J'ai un string dans l'Array (Paris Hilton)

Hors ligne

 

#27 04/06/2013 21:21:06

Helisa
Membre
Inscription : 04/06/2013
Messages : 16

Re : Insérer un diaporama/slider avec le module Gallery

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 ?

Hors ligne

#28 04/06/2013 22:17:54

jissey
Administrateur
Lieu : Volx
Inscription : 30/10/2009
Messages : 2 532
Site Web

Re : Insérer un diaporama/slider avec le module Gallery

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


Inscrivez-vous à notre Newsletter sur le site (colonne de droite, en bas).
Vous appréciez CMSMS et l'aide qui vous est fournie ici, aidez-nous en participant au projet.
Formation CMS Made Simple | Création de site CMS Made Simple.

C'est en se plantant qu'on devient cultivé.
J'ai un string dans l'Array (Paris Hilton)

Hors ligne

#29 04/06/2013 22:24:50

Helisa
Membre
Inscription : 04/06/2013
Messages : 16

Re : Insérer un diaporama/slider avec le module Gallery

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....

Hors ligne

#30 04/06/2013 23:32:42

jissey
Administrateur
Lieu : Volx
Inscription : 30/10/2009
Messages : 2 532
Site Web

Re : Insérer un diaporama/slider avec le module Gallery

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_smile


Inscrivez-vous à notre Newsletter sur le site (colonne de droite, en bas).
Vous appréciez CMSMS et l'aide qui vous est fournie ici, aidez-nous en participant au projet.
Formation CMS Made Simple | Création de site CMS Made Simple.

C'est en se plantant qu'on devient cultivé.
J'ai un string dans l'Array (Paris Hilton)

Hors ligne

#31 04/06/2013 23:39:03

Helisa
Membre
Inscription : 04/06/2013
Messages : 16

Re : Insérer un diaporama/slider avec le module Gallery

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.

Hors ligne

#32 05/06/2013 01:34:21

Helisa
Membre
Inscription : 04/06/2013
Messages : 16

Re : Insérer un diaporama/slider avec le module Gallery

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.

Hors ligne

#33 05/06/2013 08:43:42

jissey
Administrateur
Lieu : Volx
Inscription : 30/10/2009
Messages : 2 532
Site Web

Re : Insérer un diaporama/slider avec le module Gallery

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_smile, je ne lis pas dans le marc du café que je suis en train de boire  cool


Inscrivez-vous à notre Newsletter sur le site (colonne de droite, en bas).
Vous appréciez CMSMS et l'aide qui vous est fournie ici, aidez-nous en participant au projet.
Formation CMS Made Simple | Création de site CMS Made Simple.

C'est en se plantant qu'on devient cultivé.
J'ai un string dans l'Array (Paris Hilton)

Hors ligne

#34 05/06/2013 10:22:22

bess
Administrateur
Lieu : Rennes
Inscription : 16/12/2008
Messages : 6 094
Site Web

Re : Insérer un diaporama/slider avec le module Gallery

à 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.

Hors ligne

#35 05/06/2013 12:04:36

Helisa
Membre
Inscription : 04/06/2013
Messages : 16

Re : Insérer un diaporama/slider avec le module Gallery

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

Hors ligne

#36 06/06/2013 02:04:26

Helisa
Membre
Inscription : 04/06/2013
Messages : 16

Re : Insérer un diaporama/slider avec le module Gallery

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.

Hors ligne

#37 06/06/2013 09:43:27

jissey
Administrateur
Lieu : Volx
Inscription : 30/10/2009
Messages : 2 532
Site Web

Re : Insérer un diaporama/slider avec le module Gallery

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


Inscrivez-vous à notre Newsletter sur le site (colonne de droite, en bas).
Vous appréciez CMSMS et l'aide qui vous est fournie ici, aidez-nous en participant au projet.
Formation CMS Made Simple | Création de site CMS Made Simple.

C'est en se plantant qu'on devient cultivé.
J'ai un string dans l'Array (Paris Hilton)

Hors ligne

#38 31/07/2013 11:31:23

manchi
Petit nouveau
Inscription : 31/07/2013
Messages : 1

Re : Insérer un diaporama/slider avec le module Gallery

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

Dernière modification par manchi (31/07/2013 11:44:32)

Hors ligne

#39 08/07/2014 16:47:25

bess
Administrateur
Lieu : Rennes
Inscription : 16/12/2008
Messages : 6 094
Site Web

Re : Insérer un diaporama/slider avec le module Gallery

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

Hors ligne

#40 01/02/2016 11:59:00

Virginie 12
Membre
Lieu : Estaing (Aveyron)
Inscription : 18/08/2009
Messages : 113
Site Web

Re : Insérer un diaporama/slider avec le module Gallery

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 :

[== 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:


[== 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

[== 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


Je fais pousser votre site web, vous faites grandir votre activité !

Hors ligne

#41 01/02/2016 12:08:59

Virginie 12
Membre
Lieu : Estaing (Aveyron)
Inscription : 18/08/2009
Messages : 113
Site Web

Re : Insérer un diaporama/slider avec le module Gallery

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 :

[== 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:


[== 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)

[== 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


Je fais pousser votre site web, vous faites grandir votre activité !

Hors ligne

Pied de page des forums

  Flux Rss Twitter FaceBook