[Creusons-nous les méninges] Le slider d'accueil de Jimdo

Pour les experts

[Creusons-nous les méninges] Le slider d'accueil de Jimdo

Messagepar filmsdelover.jimdo.com » 20 Mars 2012, 08:07

Bonjour à tous,

ce post pour que l'on réfléchisse ensemble sur ce slider d'accueil que l'on peut trouver sur la page d'accueil de Jimdo : http://www.jimdo.com/l/startseite/fr/special1/ et dont j'aimerais bien connaitre le fonctionnement pour pouvoir éventuellement l'adapter à mon site.

Je suppute l'utilisation de Javascript pour faire tourner les images mais je pensais qu'insérer des codes JS entrainerait des conflits avec le système Jimdo. On a eu la confirmation que le site Jimdo tournait sous Jimdo donc ça doit être possible. Mon but est de trouver un slider que l'on pourrait développer en interne à un site Jimdo, sans devoir passer par des iframe et des services comme Archive-host.

Voici le code HTML de la chose :
Code: Tout sélectionner
<div id="slider-container">
                <div id="slideshow" style="position: relative; overflow: hidden;">
                    <div class="slide" id="slide-1" style="position: absolute; top: 0px; left: 179.5px; z-index: 7; opacity: 1; display: block; width: 990px; height: 348px;">
                        <div style="width: 990px; height: 348px;">
                            <h2>Facile et intuitif :</h2>
                            <p class="slidedesc">Un site pro sans connaissance informatique.</p>
                        </div>
                    </div>

                    <div class="slide" id="slide-2" style="position: absolute; top: 0px; left: -1349px; display: none; z-index: 6; opacity: 1; width: 990px; height: 348px;">
                        <div style="width: 990px; height: 348px;">
                            <h2>Tellement simple:</h2>
                            <p class="slidedesc">Même sans connaissance informatique.</p>
                        </div>
                    </div>

                    <div class="slide" id="slide-3" style="position: absolute; top: 0px; left: -1349px; display: none; z-index: 6; opacity: 1; width: 990px; height: 348px;">
                        <div style="width: 990px; height: 348px;">
                            <h2>Un grand choix de designs</h2>
                            <p class="slidedesc">Des modèles professionnels et variés.</p>
                        </div>
                    </div>

                    <div class="slide" id="slide-4" style="position: absolute; top: 0px; left: -1349px; display: none; z-index: 6; opacity: 1; width: 990px; height: 348px;">
                        <div style="width: 990px; height: 348px;">
                            <h2>Version mobile</h2>
                            <p class="slidedesc"> Design et e-boutique<br>optimisés.</p>
                        </div>
                    </div>

                    <div class="slide" id="slide-5" style="position: absolute; top: 0px; left: -1349px; display: none; z-index: 6; opacity: 1; width: 990px; height: 348px;">
                        <div style="width: 990px; height: 348px;">
                            <h2>L'e-commerce à portée de tous</h2>
                            <p class="slidedesc">Ouvrez votre boutique en ligne facilement.</p>
                        </div>
                    </div>
                   
                    <div class="slide" id="slide-6" style="position: absolute; top: 0px; left: -1349px; display: none; z-index: 6; opacity: 1; width: 990px; height: 348px;">
                        <div style="width: 990px; height: 348px;">
                            <h2 class="last">Votre site internet<br>en quelques clics</h2>
                            <p class="slidedesc last">Inscrivez-vous gratuitement<br>dès maintenant</p>
                        </div>
                    </div>             
                </div>
    </div>


Et le CSS :
Code: Tout sélectionner
#slider-container {
    bottom: 0;
    left: -13px;
    position: absolute;
    width: 100%;
    z-index: 1000;
}
div#slideshow {
    height: 348px;
    overflow: hidden;
    width: 100%;
}
div#slideshow .slide {
    display: none;
}
#slide-1 {
    background: url("img/slide3.png") no-repeat scroll 0 0 transparent;
}
#slide-2 {
    background: url("img/slide1.jpg") no-repeat scroll 0 0 transparent;
}
#slide-3 {
    background: url("img/slide2.png") no-repeat scroll 0 0 transparent;
}
#slide-4 {
    background: url("img/slide4.jpg") no-repeat scroll 0 0 transparent;
}
#slide-5 {
    background: url("img/slide5.jpg") no-repeat scroll 0 0 transparent;
}
#slide-6 {
    background: url("img/slide6.png") no-repeat scroll 0 0 transparent;
}
* html div#slide-1 {
    background: none repeat scroll 0 0 transparent;
}
* html div#slide-2 {
    background: none repeat scroll 0 0 transparent;
}
* html div#slide-3 {
    background: none repeat scroll 0 0 transparent;
}
* html div#slide-4 {
    background: none repeat scroll 0 0 transparent;
}
* html div#slide-5 {
    background: none repeat scroll 0 0 transparent;
}
* html div#slide-6 {
    background: none repeat scroll 0 0 transparent;
}


Il y a aussi un script JS derrière tout ça, mais je ne sais pas lequel. De plus, sur deux PCs différents, j'ai un slider qui s'affiche différemment, l'un avec une barre de navigation en bas et sur l'autre sans cette barre de navigation. Etrange.

Donc si on pouvait en faire une version plus simplifiée, ça pourrait être cool pour toute la communauté. Merci de votre aide !
Utilisateur de Jimdo depuis 2009 qui peut être grognon si vous ne consultez pas l'aide ou n'utilisez pas le bouton "Rechercher" du forum avant de créer un sujet !
Films d'amour et comédies romantiques - Tutoriels et guides pour Jimdo.
Avatar de l’utilisateur
filmsdelover.jimdo.com
JimdoFriends
 
Messages: 3311
Inscrit le: 08 Fév 2009, 18:22
Has thanked: 9 times
Have thanks: 86 times

Re: [Creusons-nous les méninges] Le slider d'accueil de Jimd

Messagepar lefildargent.jimdo.com » 20 Mars 2012, 11:03

Bonjour Frédéric,
j'avais aperçu cette affirmation (je ne sais plus où)
On a eu la confirmation que le site Jimdo tournait sous Jimdo ...

et j'avais failli réagir, mais faute de temps je ne l'ai pas fait.
A mon avis ce n'est pas un site Jimdo : On n'y trouve pas par exemple dans le head quelque chose ressemblant à
Code: Tout sélectionner
link type="text/css" rel="stylesheet" href="http://u.jimdo.com/www30/o/see6c03b249d70410/userlayout/css/layout.css?t=1331463459">
caractéristique du design choisi ou de l'onglet CSS d'un design perso.
On ne trouve pas non plus dans le body (caractéristique du bloc content pourtant obligatoire)
Code: Tout sélectionner
<div id="cc-matrix-1122018362">

Il y a peut-être eu ambiguïté entre "un site Jimdo" et "un site hébergé par Jimdo".
Enfin bref. Ça n'empêche pas de réfléchir.
Le script qui fait bouger le slider est à mon avis
http://www.jimdo.com/l/startseite/fr/special1/slider.js
précédé de
http://www.jimdo.com/l/startseite/fr/special1/cycle.js

Tout ça c'est du Jquery. Je pense qu'il y a moyen de faire la même chose en JavaScript "tout bête".
A suivre.
Cordialement
Gérard
Avez-vous consulté l'aide du forum et le site de la communauté. Sur le forum voir aussi le bouton Search ou Rechercher. Vous y trouverez peut-être ceci ou cela. NB : Mes vrais sites Jimdo sont ici ou là.
Avatar de l’utilisateur
lefildargent.jimdo.com
JimdoFriends
 
Messages: 2992
Inscrit le: 31 Mars 2010, 16:45
Has thanked: 15 times
Have thanks: 127 times

Re: [Creusons-nous les méninges] Le slider d'accueil de Jimd

Messagepar filmsdelover.jimdo.com » 20 Mars 2012, 12:25

Et y'a un moyen de mettre du jquery sur un site Jimdo ? Directement, je veux dire ? J'ai vu tellement de problèmes sur des sites Jimdo avec des gens qui avaient mis des fichiers jquery dans l'onglet "Fichiers" du design personnel que j'ai jamais essayé personnellement.
Utilisateur de Jimdo depuis 2009 qui peut être grognon si vous ne consultez pas l'aide ou n'utilisez pas le bouton "Rechercher" du forum avant de créer un sujet !
Films d'amour et comédies romantiques - Tutoriels et guides pour Jimdo.
Avatar de l’utilisateur
filmsdelover.jimdo.com
JimdoFriends
 
Messages: 3311
Inscrit le: 08 Fév 2009, 18:22
Has thanked: 9 times
Have thanks: 86 times

Re: [Creusons-nous les méninges] Le slider d'accueil de Jimd

Messagepar lefildargent.jimdo.com » 20 Mars 2012, 14:51

C'est vrai que j'ai des doutes sur Jquery, mais je ne maitrise pas suffisamment pour être catégorique. Il y a des sites Jimdo qui l'utilisent "en direct" (sans passer par une iframe).
Je le signalais dans cette discussion par exemple.
A suivre.
Gérard
Avez-vous consulté l'aide du forum et le site de la communauté. Sur le forum voir aussi le bouton Search ou Rechercher. Vous y trouverez peut-être ceci ou cela. NB : Mes vrais sites Jimdo sont ici ou là.
Avatar de l’utilisateur
lefildargent.jimdo.com
JimdoFriends
 
Messages: 2992
Inscrit le: 31 Mars 2010, 16:45
Has thanked: 15 times
Have thanks: 127 times

Re: [Creusons-nous les méninges] Le slider d'accueil de Jimd

Messagepar filmsdelover.jimdo.com » 21 Mars 2012, 08:37

Oui, et je me souviens aussi d'un site d'un hôtel italien réalisé avec Jimdo et qui était allé assez loin dans l'utilisation en direct de JQuery. C'est dommage que je ne me souvienne plus du nom de cet hôtel parce que je serais bien allé farfouillé dans son code pour le coup...
Utilisateur de Jimdo depuis 2009 qui peut être grognon si vous ne consultez pas l'aide ou n'utilisez pas le bouton "Rechercher" du forum avant de créer un sujet !
Films d'amour et comédies romantiques - Tutoriels et guides pour Jimdo.
Avatar de l’utilisateur
filmsdelover.jimdo.com
JimdoFriends
 
Messages: 3311
Inscrit le: 08 Fév 2009, 18:22
Has thanked: 9 times
Have thanks: 86 times

Re: [Creusons-nous les méninges] Le slider d'accueil de Jimd

Messagepar lefildargent.jimdo.com » 08 Avr 2012, 23:12

Bonsoir,
JQuery (directement dans le site Jimdo) a encore frappé ;) . Voir cette discussion.
Bonne nuit.
Gérard
Avez-vous consulté l'aide du forum et le site de la communauté. Sur le forum voir aussi le bouton Search ou Rechercher. Vous y trouverez peut-être ceci ou cela. NB : Mes vrais sites Jimdo sont ici ou là.
Avatar de l’utilisateur
lefildargent.jimdo.com
JimdoFriends
 
Messages: 2992
Inscrit le: 31 Mars 2010, 16:45
Has thanked: 15 times
Have thanks: 127 times

Re: [Creusons-nous les méninges] Le slider d'accueil de Jimd

Messagepar filmsdelover.jimdo.com » 09 Avr 2012, 12:58

Ok, donc y'a vraiment aucune échappatoire. Sur le forum anglais, un gars du support technique de Jimdo me soutenait pourtant que ça ne causait pas de problème. Et un autre sur Twitter m'a dit qu'il fallait rajouter un tout petit code au jQuery pour que ça marche sans faire de conflit. Mais je n'ai plus le code en tête.

Et en hébergeant le fichier Javascript ailleurs ?
Utilisateur de Jimdo depuis 2009 qui peut être grognon si vous ne consultez pas l'aide ou n'utilisez pas le bouton "Rechercher" du forum avant de créer un sujet !
Films d'amour et comédies romantiques - Tutoriels et guides pour Jimdo.
Avatar de l’utilisateur
filmsdelover.jimdo.com
JimdoFriends
 
Messages: 3311
Inscrit le: 08 Fév 2009, 18:22
Has thanked: 9 times
Have thanks: 86 times

Re: [Creusons-nous les méninges] Le slider d'accueil de Jimd

Messagepar lefildargent.jimdo.com » 10 Avr 2012, 09:31

Bonjour,
... un tout petit code au jQuery pour que ça marche sans faire de conflit ...
Moi aussi ça me rappelait quelque chose.
Pas sûr d'avoir fait le tour, mais je crois que j'ai avancé. Illustration pour résumer :
Dans un widget/HTML, je mets ça :
Code: Tout sélectionner
<h2>Test JQuery</h2><p>
    Tous les paragraphes devraient disparaitre si on clique sur le bouton.
</p>
<button>Cliquez</button>

Ensuite tout dépend de ce qu'on met dans Paramètres, Modifier le head. Là 3 cas possibles :
1/ Je ne mets que le script JQuery proprement dit
Code: Tout sélectionner
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
//]]>
</script>
Résultat : Pas de conflit avec le blog Jimdo, mais mon bouton ne marche pas.

2/ J'ajoute la librairie JQuery
Code: Tout sélectionner
<script type="text/javascript" src="http://www.w3schools.com/jquery/jquery.js">
</script>

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
//]]>
</script>
Résultat : Mon bouton marche, mais j'ai un conflit avec le blog Jimdo.

3/ J'utilise une variable (jq par exemple) en lieu et place du $
Code: Tout sélectionner
<script type="text/javascript" src="http://www.w3schools.com/jquery/jquery.js">
</script>

<script type="text/javascript">
//<![CDATA[
var jq=$.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").hide();
  });
});
//]]>
</script>
Résultat : Mon bouton marche et je n'ai pas le conflit avec le blog Jimdo.

Il serait bien que quelqu'un teste chez lui pour vérifier tout ça.
Quand je parle de "conflit avec le blog Jimdo", je parle de celui évoqué par Javras.
Reste à vérifier s'il n'y a pas d'autres conflits avec Jimdo que le blog.
A suivre
Gérard
Avez-vous consulté l'aide du forum et le site de la communauté. Sur le forum voir aussi le bouton Search ou Rechercher. Vous y trouverez peut-être ceci ou cela. NB : Mes vrais sites Jimdo sont ici ou là.
Avatar de l’utilisateur
lefildargent.jimdo.com
JimdoFriends
 
Messages: 2992
Inscrit le: 31 Mars 2010, 16:45
Has thanked: 15 times
Have thanks: 127 times

Re: [Creusons-nous les méninges] Le slider d'accueil de Jimd

Messagepar lefildargent.jimdo.com » 16 Avr 2012, 09:51

Bonjour Frédéric,
Dans ma bible, il y a, je crois, tout ce qu'il faut : c'est .
Un de ces jours, quand on aura vraiment la certitude qu'on peut maitriser les conflits avec Jimdo, je me plongerai la-dedans.
Bonne lecture.
Gérard
Avez-vous consulté l'aide du forum et le site de la communauté. Sur le forum voir aussi le bouton Search ou Rechercher. Vous y trouverez peut-être ceci ou cela. NB : Mes vrais sites Jimdo sont ici ou là.
Avatar de l’utilisateur
lefildargent.jimdo.com
JimdoFriends
 
Messages: 2992
Inscrit le: 31 Mars 2010, 16:45
Has thanked: 15 times
Have thanks: 127 times

Re: [Creusons-nous les méninges] Le slider d'accueil de Jimd

Messagepar filmsdelover.jimdo.com » 26 Avr 2012, 06:17

Un autre site pour apporter de l'eau au moulin : http://jqueryinception.jimdo.com/

Un slideshow en fond de site et un autre dans le site avec des bouts de codes jQuery directement dans le Head. L'inconnu, c'est si ça marche coté administrateur.
Utilisateur de Jimdo depuis 2009 qui peut être grognon si vous ne consultez pas l'aide ou n'utilisez pas le bouton "Rechercher" du forum avant de créer un sujet !
Films d'amour et comédies romantiques - Tutoriels et guides pour Jimdo.
Avatar de l’utilisateur
filmsdelover.jimdo.com
JimdoFriends
 
Messages: 3311
Inscrit le: 08 Fév 2009, 18:22
Has thanked: 9 times
Have thanks: 86 times

Suivant

Retour vers TUTORIELS / ASTUCES

Qui est en ligne ?

Utilisateur(s) parcourant actuellement ce forum : Aucun utilisateur inscrit et 1 invité