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.
JE suppose que c'est encore IE qui fait des siennes.
En tout cas, quand tu auras trouvé, merci de nous donner la solution.
{SEO}
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)
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 ?
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 ?
Bonjour et bienvenue sur le forum Helisa,
tu parles de ça?
tu parles de ça?
{SEO}
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)
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....
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....
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
Le problème étant le temps...peut-être demain....il y a aussi wow slider qui me plait bien
{SEO}
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)
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.
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.
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, je ne lis pas dans le marc du café que je suis en train de boire 
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
, je ne lis pas dans le marc du café que je suis en train de boire
{SEO}
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)
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.
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.
Bonjour,
Il existe des slider jquery responsive.
Si tu as un autre problème, ouvre un post spécifique, ici c'est Trucs&Astuces
Il existe des slider jquery responsive.
Si tu as un autre problème, ouvre un post spécifique, ici c'est Trucs&Astuces
{SEO}
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)
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
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
Modification du message : 31/07/2013, 11:44:32 par manchi.
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 :
Gabarit CSS-feuille de style:
Gabarit JavaScript : c'est là que vous pouvez modifier les paramètres, comme décrit ici :http://bxslider.com/options
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
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
Je fais pousser votre site web, vous faites grandir votre activité !
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 :
Gabarit CSS-feuille de style:
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)
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
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
Je fais pousser votre site web, vous faites grandir votre activité !