L'Auteur du site

Passionné par le web, je suis un JimdoFriend et mets à disposition des tutoriels et astuces pour Jimdo gratuitement.

Rechercher

Sur Facebook

Réseaux sociaux

Retrouvez moi sur Twitter et Google+ également.

Newsletter

[Code] "Un slider à la place du header" (étape 1)

Ceci n'est pas le tutoriel complet, vous trouverez ici les codes (à insérer dans Modifier le head) du tutoriel Un slider à la place du header

Vous trouverez sur cette page, 3 codes. Seul un est à utiliser en fonction de votre choix d'utilisation. J'ai détaillé chaque codes :


A ) Code normal (nouveaux designs) : vous êtes nouveau sur Jimdo, vous avez récemment craqué pour les nouveaux designs de Jimdo ou vous n'avez aucune idée de ce qu'est les nouveaux designs (et vous êtes sur Jimdo depuis peu), c'est le code qu'il vous faut; le code A.


B) Code pour anciens designs : vous avez votre site depuis fort longtemps et vous êtes fidèles à votre design (qui a plusieurs années d'ailleurs), vous êtes depuis les débuts sur Jimdo ou vous n'avez tout simplement jamais sauté le pas, c'est ce second code qu'il vous faut; le code B.


C) Dans le corps du site (contenu du site si vous préférez), (Placez-le où vous voulez) : qu'importe votre design, vous souhaitez simplement placer votre slider là d’où vous le désirer, c'est bien évidemment ce dernier code qu'il vous faut; le code B.


Voici les codes à insérez dans "Modifier le head" qui se trouve dans "Paramètres". Seul un de ces codes doit être utilisé à la fois :

A ) Code normal (nouveaux designs)

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>

<script type="text/javascript" src="http://u.jimdo.com/www62/o/s36e8206db69a24d5/userlayout/js/jquery-nivo-slider-pack.js?t=1367748863">
</script>

<script type="text/javascript">
//<![CDATA[
      var $j = jQuery.noConflict();
            $j(window).load(function() {
            $j('#slider').nivoSlider({
            effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
            slices:15,
            animSpeed:500, //Slide transition speed
            pauseTime:3000,
            startSlide:0, //Set starting Slide (0 index)
            directionNav:true, //Next & Prev
            directionNavHide:true, //Only show on hover
            controlNav:false, //1,2,3...
            controlNavThumbs:false, //Use thumbnails for Control Nav
            controlNavThumbsFromRel:false, //Use image rel for thumbs
            controlNavThumbsSearch: '.jpg', //Replace this with...
            controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
            keyboardNav:true, //Use left & right arrows
            pauseOnHover:false, //Stop animation while hovering
            manualAdvance:false, //Force manual transitions
            captionOpacity:0.8, //Universal caption opacity
            beforeChange: function(){},
            afterChange: function(){},
            slideshowEnd: function(){}, //Triggers after all slides have been shown
            lastSlide: function(){}, //Triggers when last slide is shown
            afterLoad: function(){} //Triggers when slider has loaded
       });
    $j('.nivoSlider,.nivo-controlNav').appendTo($j('#cc-website-logo'));
    });
//]]>
</script>

<style type="text/css">
/*<![CDATA[*/
    
    /* le slider pour nouveau design Jimdo

    Skin Name: Nivo Slider Default Theme
    Skin URI: http://nivo.dev7studios.com
    Description: The default skin for the Nivo Slider.
    Version: 3.2
    Author: Gilbert Pellegrom
    Author URI: http://dev7studios.com
    */
   
    .nivoSlider {
        position:relative;
        width:100%;
        height:auto;
        overflow: hidden;
    }
    .nivoSlider img {
        position:absolute;
        top:0px;
        left:0px;
        max-width: none;
        display: none;
    }
    .nivo-main-image {
        display: block !important;
        position: relative !important;
        width: 100% !important;
    }
    .nivoSlider a.nivo-imageLink {
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
        border:0;
        padding:0;
        margin:0;
        z-index:6;
        display:none;
    }
    .nivo-slice {
        display:block;
        position:absolute;
        z-index:5;
        height:100%;
        top:0;
    }
    .nivo-box {
        display:block;
        position:absolute;
        z-index:5;
        overflow:hidden;
    }
    .nivo-box img {display:block;}
   
    /* flèches */
    .nivo-directionNav a {
        position:absolute;
        top:45%;
        z-index:9;
        cursor:pointer;
    }
    .nivo-prevNav {
        left:0px;
    }
    .nivo-nextNav {
        right:0px;
    }
   
    /* boutons de navigation */
    .nivo-controlNav {
        position:absolute;
        left:390px;
        bottom:5px;
        z-index:999;
    }
    .nivo-controlNav a {
        cursor:pointer;
    }
    .nivo-controlNav a.active {
        font-weight:bold;
    }
    .nivoSlider {
        position:relative;
        background: url(http://u.jimdo.com/www62/o/s36e8206db69a24d5/userlayout/img/loading.gif) no-repeat 50% 50%;
        width:100%;
        height:100%;
        margin-bottom:10px;
    }
    .nivoSlider img {
        position:absolute;
        top:0px;
        left:0px;
        display:none;
    }
    .nivoSlider a {
        border:0;
        display:block;
    }
    .nivo-controlNav {
        text-align: center;
        padding: 20px 0;
    }
    .nivo-controlNav a {
        display:inline-block;
        width:22px;
        height:22px;
        background:url(http://u.jimdo.com/www62/o/s36e8206db69a24d5/userlayout/img/bullets.png) no-repeat;
        text-indent:-9999px;
        border:0;
        margin: 0 2px;
    }
    .nivo-controlNav a.active {
        background-position:0 -22px;
    }
    .nivo-directionNav a {
        display:block;
        width:30px;
        height:30px;
        background:url(http://u.jimdo.com/www62/o/s36e8206db69a24d5/userlayout/img/arrows.png) no-repeat;
        text-indent:-9999px;
        border:0;
        opacity: 0;
        -webkit-transition: all 200ms ease-in-out;
        -moz-transition: all 200ms ease-in-out;
        -o-transition: all 200ms ease-in-out;
        transition: all 200ms ease-in-out;
    }
    .nivoSlider:hover .nivo-directionNav a { opacity: 1; }
    a.nivo-nextNav {
        background-position:-30px 0;
        right:15px;
    }
     a.nivo-prevNav {
        left:15px;
    }
    .nivo-caption {
        font-family: Helvetica, Arial, sans-serif;
    }
    .nivo-caption a {
        color:#fff;
        text-decoration:none;
    }
    .nivo-caption a:hover {
        color:#fff;
    }
    .nivo-controlNav.nivo-thumbs-enabled {
        width: 100%;
    }
    .nivo-controlNav.nivo-thumbs-enabled a {
        width: auto;
        height: auto;
        background: none;
        margin-bottom: 5px;
    }
    .nivo-controlNav.nivo-thumbs-enabled img {
        display: block;
        width: 120px;
        height: auto;
    }
    .cc-m-image-container img {
    display:none; /* on masque le logo */
    }
/*]]>*/
</style>

B) Code pour anciens designs

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>

<script type="text/javascript" src="http://u.jimdo.com/www62/o/s36e8206db69a24d5/userlayout/js/jquery-nivo-slider-pack.js?t=1367748863">
</script>

<script type="text/javascript">
//<![CDATA[
var $j = jQuery.noConflict();
$j(window).load(function() {
$j('#slider').nivoSlider({
effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
slices:15,
animSpeed:500, //Slide transition speed
pauseTime:3000,
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:false, //1,2,3...
controlNavThumbs:false, //Use thumbnails for Control Nav
controlNavThumbsFromRel:false, //Use image rel for thumbs
controlNavThumbsSearch: '.jpg', //Replace this with...
controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
keyboardNav:true, //Use left & right arrows
pauseOnHover:false, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){}, //Triggers after all slides have been shown
lastSlide: function(){}, //Triggers when last slide is shown
afterLoad: function(){} //Triggers when slider has loaded
});

$j('.nivoSlider,.nivo-controlNav').appendTo($j('#emotion-header'));
});
//]]>
</script>

<style type="text/css">
/*<![CDATA[*/

/* le slider */
/*
Skin Name: Nivo Slider Default Theme
Skin URI: http://nivo.dev7studios.com
Description: The default skin for the Nivo Slider.
Version: 3.2
Author: Gilbert Pellegrom
Author URI: http://dev7studios.com
*/

.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
display: none;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img {display:block;}

/* flèches */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}

/* boutons de navigation */
.nivo-controlNav {
position:absolute;
left:390px;
bottom:5px;
z-index:999;
}
.nivo-controlNav a {
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
.nivoSlider {
position:relative;
background: url(http://u.jimdo.com/www62/o/s36e8206db69a24d5/userlayout/img/loading.gif) no-repeat 50% 50%;
width:100%;
height:100%;
margin-bottom:10px;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.nivoSlider a {
border:0;
display:block;
}
.nivo-controlNav {
text-align: center;
padding: 20px 0;
}
.nivo-controlNav a {
display:inline-block;
width:22px;
height:22px;
background:url(http://u.jimdo.com/www62/o/s36e8206db69a24d5/userlayout/img/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin: 0 2px;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(http://u.jimdo.com/www62/o/s36e8206db69a24d5/userlayout/img/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
opacity: 0;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.nivoSlider:hover .nivo-directionNav a { opacity: 1; }
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
.nivo-caption {
font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
color:#fff;
text-decoration:none;
}
.nivo-caption a:hover {
color:#fff;
}
.nivo-controlNav.nivo-thumbs-enabled {
width: 100%;
}
.nivo-controlNav.nivo-thumbs-enabled a {
width: auto;
height: auto;
background: none;
margin-bottom: 5px;
}
.nivo-controlNav.nivo-thumbs-enabled img {
display: block;
width: 120px;
height: auto;
}
strong#emotion-header-title {
z-index:2012; /* affiche le titre dans le header */
}
img#emotion-header-img {
display:none; /* masque le header de jimdo */
}
/*]]>*/
</style>

C) Dans le corps du site (Placez-le où vous voulez)

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>

<script type="text/javascript" src="http://u.jimdo.com/www62/o/s36e8206db69a24d5/userlayout/js/jquery-nivo-slider-pack.js?t=1367748863">
</script>

<script type="text/javascript">
//<![CDATA[
      var $j = jQuery.noConflict();
            $j(window).load(function() {
            $j('#slider').nivoSlider({
            effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
            slices:15,
            animSpeed:500, //Slide transition speed
            pauseTime:3000,
            startSlide:0, //Set starting Slide (0 index)
            directionNav:true, //Next & Prev
            directionNavHide:true, //Only show on hover
            controlNav:false, //1,2,3...
            controlNavThumbs:false, //Use thumbnails for Control Nav
            controlNavThumbsFromRel:false, //Use image rel for thumbs
            controlNavThumbsSearch: '.jpg', //Replace this with...
            controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
            keyboardNav:true, //Use left & right arrows
            pauseOnHover:false, //Stop animation while hovering
            manualAdvance:false, //Force manual transitions
            captionOpacity:0.8, //Universal caption opacity
            beforeChange: function(){},
            afterChange: function(){},
            slideshowEnd: function(){}, //Triggers after all slides have been shown
            lastSlide: function(){}, //Triggers when last slide is shown
            afterLoad: function(){} //Triggers when slider has loaded
       });
    $j('.nivoSlider,.nivo-controlNav');
    });
//]]>
</script>

<style type="text/css">
/*<![CDATA[*/
    
    /* Slider pour site Jimdo

    Skin Name: Nivo Slider Default Theme
    Skin URI: http://nivo.dev7studios.com
    Description: The default skin for the Nivo Slider.
    Version: 3.2
    Author: Gilbert Pellegrom
    Author URI: http://dev7studios.com
    */
   
    .nivoSlider {
        position:relative;
        width:100%;
        height:auto;
        overflow: hidden;
    }
    .nivoSlider img {
        position:absolute;
        top:0px;
        left:0px;
        max-width: none;
        display: none;
    }
    .nivo-main-image {
        display: block !important;
        position: relative !important;
        width: 100% !important;
    }
    .nivoSlider a.nivo-imageLink {
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
        border:0;
        padding:0;
        margin:0;
        z-index:6;
        display:none;
    }
    .nivo-slice {
        display:block;
        position:absolute;
        z-index:5;
        height:100%;
        top:0;
    }
    .nivo-box {
        display:block;
        position:absolute;
        z-index:5;
        overflow:hidden;
    }
    .nivo-box img {display:block;}
   
    /* flèches */
    .nivo-directionNav a {
        position:absolute;
        top:45%;
        z-index:9;
        cursor:pointer;
    }
    .nivo-prevNav {
        left:0px;
    }
    .nivo-nextNav {
        right:0px;
    }
   
    /* boutons de navigation */
    .nivo-controlNav {
        position:absolute;
        left:390px;
        bottom:5px;
        z-index:999;
    }
    .nivo-controlNav a {
        cursor:pointer;
    }
    .nivo-controlNav a.active {
        font-weight:bold;
    }
    .nivoSlider {
        position:relative;
        background: url(http://u.jimdo.com/www62/o/s36e8206db69a24d5/userlayout/img/loading.gif) no-repeat 50% 50%;
        width:100%;
        height:100%;
        margin-bottom:10px;
    }
    .nivoSlider img {
        position:absolute;
        top:0px;
        left:0px;
        display:none;
    }
    .nivoSlider a {
        border:0;
        display:block;
    }
    .nivo-controlNav {
        text-align: center;
        padding: 20px 0;
    }
    .nivo-controlNav a {
        display:inline-block;
        width:22px;
        height:22px;
        background:url(http://u.jimdo.com/www62/o/s36e8206db69a24d5/userlayout/img/bullets.png) no-repeat;
        text-indent:-9999px;
        border:0;
        margin: 0 2px;
    }
    .nivo-controlNav a.active {
        background-position:0 -22px;
    }
    .nivo-directionNav a {
        display:block;
        width:30px;
        height:30px;
        background:url(http://u.jimdo.com/www62/o/s36e8206db69a24d5/userlayout/img/arrows.png) no-repeat;
        text-indent:-9999px;
        border:0;
        opacity: 0;
        -webkit-transition: all 200ms ease-in-out;
        -moz-transition: all 200ms ease-in-out;
        -o-transition: all 200ms ease-in-out;
        transition: all 200ms ease-in-out;
    }
    .nivoSlider:hover .nivo-directionNav a { opacity: 1; }
    a.nivo-nextNav {
        background-position:-30px 0;
        right:15px;
    }
     a.nivo-prevNav {
        left:15px;
    }
    .nivo-caption {
        font-family: Helvetica, Arial, sans-serif;
    }
    .nivo-caption a {
        color:#fff;
        text-decoration:none;
    }
    .nivo-caption a:hover {
        color:#fff;
    }
    .nivo-controlNav.nivo-thumbs-enabled {
        width: 100%;
    }
    .nivo-controlNav.nivo-thumbs-enabled a {
        width: auto;
        height: auto;
        background: none;
        margin-bottom: 5px;
    }
    .nivo-controlNav.nivo-thumbs-enabled img {
        display: block;
        width: 120px;
        height: auto;
    }
/*]]>*/
</style>

Étape 2, intégration du slider

Écrire commentaire

Commentaires : 44
  • #1

    petits-aventuriers (mardi, 22 avril 2014 20:24)

    bonjour
    et pour insérer un slider construit sur LOXIA ( qui me semble plus simple puisqu'il fournissent le code ) Est-ce la même démarche ? ca je ne trouve rien pour insérer le code crée sur LOXIA , merci

  • #2

    Ze Tuto (mardi, 22 avril 2014 20:53)

    Bonsoir,

    non, ce n'est pas la même démarche. Le plus simple serait de passer par un design personnel.

    Cordialement

  • #3

    petits-aventuriers (mardi, 22 avril 2014 21:35)

    ah ! mais étant nul ... merci pour votre réponse
    merci pour vos tutos !

  • #4

    Riviere (jeudi, 24 avril 2014 21:42)

    rebonjour Ze Tuto
    pour les nuls comme moi, vous ne feriez pas un tuto pour placer une animation du site LOXIA en header dans la fonction " modifier le head " ?
    sans faire un design personnel, car je le répète JE SUIS NUL !
    merci pour votre écoute et toujours à l'affût de vos tuto !
    merci

  • #5

    poneysdusoleil (samedi, 26 avril 2014 11:28)

    Bravo

  • #6

    poneysdusoleil (samedi, 26 avril 2014)

    Ca ne marche pas sur mon site! Pourtant jai bien coller le head et le code HTML/CSS dans un "widgetHTML" dans la hidebar!
    Aidez moi please

  • #7

    Ze Tuto (dimanche, 27 avril 2014 14:47)

    @petits-aventuriers et @poneysdusoleil venez sur la page suivante : http://zetuto.jimdo.com/vos-questions/ (cette page a été exprès faite pour cela)
    On pourra mieux parler et essayer de résoudre vos problèmes ;)

  • #8

    agencedevoyage (mardi, 29 avril 2014 20:40)

    Bonjour ça ne marche pas sur mon site ça m'affiche des image une au dessus de l'autre pas en mode slider aidez moi svp !!

  • #9

    Ze Tuto (mardi, 29 avril 2014 21:00)

    Bonsoir @agencedevoyage,

    Vous n'avez pas mis le premier code dans "Modifier le head".

    Cordialement

  • #10

    Ze Tuto (mardi, 29 avril 2014 22:39)

    Bonsoir,

    je viens de modifier le code du slider à mettre dans "Modifier le head". Cela devrait fonctionner maintenant (pour les personnes n'ayant pas réussit à intégrer le slider sur leur site Jimdo).

    Bonne soirée ;)

  • #11

    agencedevoyage (mercredi, 30 avril 2014 11:23)

    Bonjour oui merci ça marche , j'ai une autre question svp au fait je veux ajouter des diapo sur mon site comment je fais je veux aussi intégrer une musique de fond ! c'est possible ?

  • #12

    Ze Tuto (mercredi, 30 avril 2014 12:50)

    Bonjour @agencedevoyage,

    Pour intégrer un diaporama, utilisez le module "Galerie d'images" de Jimdo, vous pouvez ajouter un diaporama en flash. Sinon pour la musique de fond, je vous le déconseille vivement (c'est une des causes principales qui fait fuir les visiteurs ;)

    Bonne journée

  • #13

    agencedevoyage (mercredi, 30 avril 2014 13:02)

    j'ai essayer avec 'galerie d'image' mais ce n'est pas ce que je recherche prsk sur galerie d'image il y a l'icone de play ( si on veux) je ne veux pas de ça : mais bon sinon je peux mettre des vidéos qui sont sur mon pc ? désolée si je demande trop je suis débutante :$

  • #14

    Ze Tuto (mercredi, 30 avril 2014 13:19)

    Bonjour,

    non, je parlais de créer une galerie en flash : http://aide.jimdo.com/basiques/%C3%A9l%C3%A9ments/galerie-d-images/#cc-m-header-6259226285

    Cordialement

  • #15

    agencedevoyage (mercredi, 30 avril 2014 13:25)

    @ Ze Tuto
    Ok merci , maintenant autre chose dites moi juste si c'est possible de connecter ma base de données à mon site ! je veux faire un site pour une agence de voyage et je veux que ma base de données sois modifiée automatiquement à chaque fois qu'un client réserve (je galère svp help) !

  • #16

    Ze Tuto (mercredi, 30 avril 2014 13:48)

    Bonjour, non, ce n'est pas possible. Cdl

  • #17

    rpprogaming (mardi, 13 mai 2014 19:55)

    Excuser-moi mais moi le diapo ne marche toujours pas jimdo indique "une version épuré du code a été enregistré" et sa me met les images une au dessus de l'autre

  • #18

    Ze Tuto (mardi, 13 mai 2014 20:31)

    Bonjour @rpprogaming,

    je vous ai répondu sur le Tchat de la page "Vos questions".

    Cordialement ;)

  • #19

    wattable (lundi, 16 juin 2014 22:32)

    bonsoir, j'essaie de mettre le slyder dans le header mais je ne comprends pas le point 2, car je n'ai pas de slidebar. Et dans le "Emotionheader" je ne peux pas ajouter de widget. J'ai essayé de coller le code aussi dans paramètre "modifier le head" mais je suppose qu'il manque une ligne de code pour dire que ça concerne le emotionheader. Vous pouvez m'aider ? merci beaucoup d'avance et merci pour vos tuto.

  • #20

    Ze Tuto (mardi, 17 juin 2014 23:19)

    Bonsoir @wattable,

    Vous devez mettre ce code (Étape 2) dans la partie en dessous du contenu principal de votre site (le rectangle entre le contenu du site et le pied de page du site dans votre cas).

    Au cas où vous n'aurez toujours pas trouvé où insérer ce code, c'est le rectangle où vous avez un formulaire avec comme titre "Nous avons besoin de votre avis !" et qui se termine par les boutons de partage puis un lien "Tutos et création site Jimdo"

    Cordialement ;)

  • #21

    BOUISSEREN Jean Claude (jeudi, 28 août 2014 18:30)

    Bonjour,
    Superbe site web et design ce qui passe par un design personnel, et ma question porte sur le slider. Celui-ci est-il compatible avec la nouvelle interface Jimdo. Un essai ma permis de constater que le slider s'affiche dans le nouveau Footer. Comment donc positionner ce dernier sur la page avec le Widget/html de Jimdo ? comment modifier les dimensions dans le code sans passer par "modifier le header". Dernière question : je constate l'affichage des "Mot clés" dans le Footer. Dans quel but ? et quel intérêt.
    Merci pour tous les tutos super bien expliqué. Du beau travail.

  • #22

    Ze Tuto (jeudi, 28 août 2014 18:40)

    Bonjour Jean Claude,

    Merci pour votre commentaire ;)

    Oui en effet le slider reste compatible avec les anciens designs Jimdo, mais pas avec les nouveaux. En fait il suffit d'une petite modification et le tour est joué, j'ajouterai le code pour les nouveaux designs.

    Pour les mots clés dans le footer, je comptais relier chaque mot clé à une page du site.

    Florian

  • #23

    BOUISSEREN Jean Claude (jeudi, 28 août 2014 20:04)

    Merci pour cette réponse rapide et précise. A+ donc.

    Jean Claude.

  • #24

    f (mardi, 09 septembre 2014 12:14)

    Bonjour,
    J'aimerais intégrer ce sliders dans le corps d'une page et non pas en header, Pouvez-vous m'indiquer les codes à modifier?
    Merci

  • #25

    exercisesformation2 (mercredi, 17 septembre 2014 10:58)

    Bonjour
    ça marchait très bien avec les anciens designs mais pour les nouveaux, le slider se place bien entre "logo" et "titre", donc en header, mais dès que l'on passe en mode "afficher", on se rend compte que les internautes voient ce slider en sidebar et non dans le header...sic
    pas encore trouvé la solution...si vous en avez une je suis preneur !

  • #26

    smeil1 (mercredi, 15 octobre 2014 14:26)

    Bonjour,
    je suis sur un ancien design et quand je met en place le slider mon logo disparaît. Est-il possible de le laisser visible sur l'ensemble des photos?
    Merci

  • #27

    Ze Tuto (samedi, 18 octobre 2014 16:47)

    @advisiocf.com, je vais ajouter un code pour que le slider reste là ou l'on l'insère (et non pas à la place du logo/header); dans le content du site, ou la sidebar par exemple.

    @exercisesformation2, j’avais justement ajouté depuis peu une version pour les nouveaux designs Jimdo ("Code normal (pour nouveaux designs)"), mais je vois que le slider fonctionne à priori à merveille sur votre site ;)

    @smeil1, le code du slider masque volontairement le logo pour des raisons d'esthétique, mais vous pouvez laisser le logo en supprimant les lignes suivantes du premier code (Installation : Etape 1, le style du slider) :
    .cc-m-image-container img {
    display:none; /* on masque le logo */
    }



  • #28

    smeil1 (jeudi, 30 octobre 2014 16:33)

    Re bonjour,

    j'ai le code des vielles version et il n'y a pas ça dans le code:

    .cc-m-image-container img {
    display:none; /* on masque le logo */
    }

  • #29

    Ze Tuto (vendredi, 31 octobre 2014 19:13)

    Bonsoir @smeil1,

    en effet vous avez raison, pour le code des anciens designs c'est :
    img#emotion-header-img {
    display:none; /* masque le header de jimdo */
    }

  • #30

    asbeen (mardi, 04 novembre 2014 10:48)

    il y a un moyen de mettre le slider sur la page d'acceuil au lieu le Header ?

  • #31

    delaps (jeudi, 06 novembre 2014 18:37)

    Bonjour et merci pour ce tuto il fonctionne parfaitement pour moi.
    Je suis sur les anciens formats et maintenant que ça marche je souhaiterai modifier les images du sliders... je ne trouve pas le moyen d'éditer le fameux widget!!!

  • #32

    Destinations Naturalistes (dimanche, 09 novembre 2014 23:00)

    Bonjour et Merci pour ce tutoriel ! :)
    Comment faire avec la nouvelle interface qui ne permet pas d'insérer un élément (Widget/HTML ou autre) dans la sidebar
    D'avance Merci beaucoup pour votre aide.
    Cordialement.

  • #33

    sitafato (lundi, 10 novembre 2014 17:42)

    Bonjour,
    j'ai suivi votre tuto mais le slider s'affiche dans la sidebar et non dans le header comme je le souhaiterais.
    Merci d'avance de votre aide.
    Cordialement

  • #34

    Diane de Lorgeril (samedi, 22 novembre 2014 21:47)

    Bonsoir et merci, quelle taille de photo doit-on mette ? Pour qu'il soit bien en rectangle comme votre exemple ? ou peut-être une résolution en particulier

  • #35

    Anaïs Fonde (dimanche, 23 novembre 2014 16:23)

    bonjour,
    je voudrai placer un slider dans le corps de la page d'accueil. est ce possible ?
    cdt

  • #36

    Ze Tuto (samedi, 27 décembre 2014 17:31)

    Voilà, pour ceux qui souhaitaient le code pour afficher le slider dans le corps du site ou dans la sidebar, j'ai ajouté le code "C) Dans le corps du site (Placez-le où vous voulez".

  • #37

    Association PEAJ (mercredi, 21 janvier 2015 16:14)

    bonjour
    comment faire si l'on veut ajouter plus d'images dans le slider ? car les images en trop apparaissent au dessus du slider merci d'avance

  • #38

    chaiyachaiya (jeudi, 22 janvier 2015 19:26)

    Bonsoir,
    Quelles sont les dimensions de photos que l'on doit utiliser. Car le rendu de mon image n'est pas très belle.
    Merci pour votre réponse

  • #39

    ERHARD Suzy (jeudi, 19 février 2015 10:35)

    Bonjour,
    je souhaite faire un slider avec images cliquables qui redirige vers une autre page de mon site.
    Comment procéder ?
    Merci

  • #40

    Micasie (jeudi, 26 février 2015 23:45)

    Bonjour
    Merci pour le tutoriel, il fonctionne très bien, par contre j'aimerais modifier la vitesse de défilement entre deux photos.Que faut il modifier dans le menu ?
    Merci d'avance.

  • #41

    Ze Tuto (vendredi, 27 février 2015 14:19)

    Bonjour @Micasie,

    pour modifier la vitesse de défilement automatique entre deux photos, modifiez dans le code (Modifier le head), la ligne suivante :

    pauseTime:3000,

    3000 correspond à 3000 millisecondes, soit 3 secondes, il ne vous reste plus qu'à modifier ce chiffre et le tour est joué.

  • #42

    Design Jimdo (samedi, 28 mars 2015 18:56)

    Merci pour ce tutoriel très bien expliqué.

  • #43

    tleta (lundi, 27 avril 2015 12:02)

    j'ai voulu ajouter des liens d'image depuis dropbox pour les mettre dans code étape 2 mais ça ne marche pas les images apparaisse sous forme des icones
    voulez-vous m'aider svp

  • #44

    Ze Tuto (mardi, 28 avril 2015 22:41)

    @tleta, avez-vous un lien à me donner pour que je puisse jeter un coup d'œil ?