SLIDESHOW IMAGES ET TEXTES EN PUR JAVASCRIPT
@karamel
Messages postés
1855
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
18 avril 2024
-
5 avril 2012 à 12:54
camso - 14 nov. 2017 à 23:07
camso - 14 nov. 2017 à 23:07
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/54198-slideshow-images-et-textes-en-pur-javascript
https://codes-sources.commentcamarche.net/source/54198-slideshow-images-et-textes-en-pur-javascript
14 nov. 2017 à 23:07
11 oct. 2017 à 16:10
8 juil. 2013 à 18:59
Bonjour à tous, j'ai eu à personnaliser le script et il fonctionne bien chez moi (sous opera, Chrome, safari et mozilla, j'ai pas encore testé sous IE- je suis encore en chantier avec mon site). J'ai un problème avec mon menu déroulant qui est développé en CSS. les images du slideshow cache mon menu déroulant. Est-il techniquement possible de remédier à la situation? faire en sorte que le menu soit au premier plan par rapport au slideshow.
J'ai besoin d'aide s'il vous plait !!!!
/* ------------------ MENU PRINCIPAL --------------------*/
div#menu_bas a {
color:#FFFFFF; }
div#menu_bas ul {
list-style-type:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-style:normal;
margin-bottom:0px;
margin-top:opx;
padding: 0px; margin:0px; background-color: #009; text-align:left;
display:block;
float:left;
}
div#menu_bas li {
list-style-type:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-style:normal;
margin-left:0px;
margin-bottom:0px;
margin-top:0px;
background-color:#009;
display:block;
float:left;}
div#menu_bas li:hover { background-color:#009;}
div#menu_bas li.sousmenu:hover {background-color:#e5680e;}
/*rajout couleure de fond */
div#menu_bas li.sousmenu { background-color: #009;}
/* rajout pr pour flèche direction bas et couleur de fond*/
div#menu_bas li.plop { background-color:#009;}
/* une petite bordure en top*/
div#menu_bas ul li {
position:relative; list-style: none; float:left; border-top:0.1em solid; border-color:#FFF;}
div#menu_bas ul ul { position:absolute; display:none; width:auto;}
div#menu_bas li a {text-decoration: none; padding: 4px 0 4px; display:block;width:15.89em; margin:0px;}
div#menu_bas ul.niveau1 li.sousmenu:hover ul.niveau2 {display:block;}
/*div#menu ul.niveau2 li.sousmenu:hover ul.niveau3
div#menu ul.niveau3 {top:-1px; left: 135px;}
rajout de couleures de fond et de survol*/
div#menu ul.niveau3 li { background-color: #009;}
div#menu ul.niveau3 li:hover { background-color: #009;}
/* ---------------------- MON MENU DANS LE CODE HTML ----------------- */
* ["#"> ECPC
* Nos objectifs
* Nos valeurs
* Historique
* VOUS ÊTES...
* Particuliers
* Fontionnaires/Salariés
* Commerçants
* ONG/Associations
* Agriculteurs/Eleveurs
* PME/PMI
* SERVICES & PRODUITS
* Compte d´épargne
* Compte chèque particulier
* Compte bloqué
* Compte courant
* Bon de caisse
* Epargne mobile
* Transfert de fonds
* Change de devises
* NOTRE RESEAU
* Littoral
* Centre
* Ouest
* Nord Ouest
* Sud Ouest
* Adamaoua
* Nord
* Extrême Nord
* CARRIERE
* Nos métiers
* Comment postuler ?
* Formations
*
// peut aussi etre instancié dans une fonction onload,
// avec les inconvénients qui en découlent ...
monSlideshow.createSlideshow();
monSlideshow1.createSlideshow();
23 avril 2012 à 16:58
** Pour ton souci concernant plusieurs listes, c'est logique, ta variable est forcément en référence, puisqu'instanciée dans un objet. **
Des fois, je me demande à quoi je pense ... C'est le même objet, donc c'est normal que ca merdois.
** La solution pour moi est que tu ajoutes une méthode d'initialisation qui crée un objet dans ta classe, et non pas simplement une référence vers une variable. **
C'est ce que j'ai fait pour la version 3, mais le truc qui me gêne, c'est que l'objet est créé en double (car je dois le cloner). Donc si on embarque 5 slideshow différents, on aura 10 objets de liste d'images ... Par contre, ca a l'avantage de pouvoir utiliser la même liste pour plusieurs slideshow. Bon, c'est du pinaillage, car maintenant avec la RAM embarquée dans les nouveaux PC, on est pas à qqles octets pret !
** Le type qui te met un apostrophe dans le texte de l'image et tu as tout qui saute. **
Ahhh, le fameux utilisateur lambda ... J'ai ajouté une petite note à ce sujet dans le code HTML, ca devrait suffire je pense.
** tu pourras demander à l'utilisateur une syntaxe bien moins rude que l'instanciation de variables **
Hum, là je suis pas tout à fait de ton avis, je trouve bien plus galère de renseigner des argument simplement dans un string, que de devoir renseigner des 'variables' qui sont explicites (enfin, j'ai essayé qu'elles le soient ..). De plus, on peut indiquer jusqu'à 13 variables, certaines sont optionnelles, on a vite fait de s'y perdre ...
Mais ce n'est que mon avis, ca serait intéressant de faire un sondage auprès des utilisateurs lambda, ce qu'ils trouvent le plus clair.
** pourquoi ne mets-tu pas dans cette css des propriétés que tu redéclares pour chaque élément ? **
Ben je ne voulais pas trop charger le css, mais j'ai écouté tes conseils, j'utilise 100%, bien que webkit n'aime pas trop les % (et display: block ca fait pas).
Comme ça, le html généré sera moins lourd ...
En tout cas merci d'avoir passé du temps pour répondre, c'est avec les conseils de personnes plus expirementées qu'on apprends.
12 avril 2012 à 18:04
Pour ton souci concernant plusieurs listes, c'est logique, ta variable est forcément en référence, puisqu'instanciée dans un objet.
La solution pour moi est que tu ajoutes une méthode d'initialisation qui crée un objet dans ta classe, et non pas simplement une référence vers une variable.
En plus d'éviter ton problème, j'y vois deux avantages majeurs :
1/ ta méthode pourra faire un contrôle de données (n'oublie pas que c'est l'utilisateur qui crée la liste d'images, et donc sans doute pas au fait des bonnes pratiques. Le type qui te met un apostrophe dans le texte de l'image et tu as tout qui saute.
2/ tu pourras demander à l'utilisateur une syntaxe bien moins rude que l'instanciation de variables (exemple, tu pourrais très bien demander de passer un array de ce type : "visuel_1.jpg;top;Visitez nos cotes ;left;70;10;50;5;5"
Du coup, au lieu de faire ça :
439.var monSlideshow = new ClassSlideshow();
440.monSlideshow.slideshowImages = listeImages;
tu fais ça :
439.var monSlideshow = new ClassSlideshow();
440.monSlideshow.initslideshowImages(listeImages);
De cette manière, tu instancies une variable locale grâce aux valeurs que tu vas caster et vérifier. Il n'y aura donc plus aucun souci de réécriture du contenu de listeImages.
Enfin, pour finir, quelques remarques pratiques :
for(var i in this.slideshowImages) {
246. var element = this.slideshowImages[i]
247. var container = document.createElement('div');
248. container.style.width = this.slideWidth+'px';
249. container.style.height = this.slideHeight+'px';
250. container.style.zIndex = -2;
251. container.style.position = 'absolute';
252. container.style.backgroundImage = 'url("'+element.url+'")';
253. container.className = 'slideshow-img';
254. var div_text = document.createElement('div');
255. div_text.className = 'content-text pos-'+element.textPosition;
256. div_text.innerHTML = '
'+element.text;
257. container.appendChild(div_text);
258. divContainer.appendChild(container);
259. this.slideshowImages[i].div = container;
260. this.slideshowImages[i].divText = div_text;
261. }
Puisque tu affectes à ton div la classe css slideshow-img, pourquoi ne mets-tu pas dans cette css des propriétés que tu redéclares pour chaque élément ?
Genre ça : container.style.position = 'absolute';, opéré à chaque itération, peut être remplacé par "position: absolute;", dans la déclaration de ta classe css. Pareil pour ton z-Index.
Si je lis bien, tes deux tailles sont les mêmes que l'élément qui les contient, tu peux donc oublier ça et déclarer un width et height de 100% dans ta classe css, voire même un display:block si je ne m'abuse.
11 avril 2012 à 22:54
J'ai fait un site rapidement, juste 2 pages pour l'instant.
Le slideshow se trouve là: http://ansuzpeorth.perso.sfr.fr/slideshow.xml
@PLARTS
Ben j'ai pas testé sous IE (impossible sous wine). Mais en lançant l'instance depuis le HTML (comme indiqué dans mon précédent message), ca devrait fonctionner.
La version 2 (lien sur le site), j'ai procédé comme ça.
10 avril 2012 à 20:50
mais ca ne marche pas sous IE8,
c'est normal ?
9 avril 2012 à 15:46
Un lien avec un exemple ??? ;)
8 avril 2012 à 13:11
Euh, c'était de l'humour, et puis qd on voit tes sources, je me dit qu'un 8 venant de toi, c'est pas mal !
* a cause justement du default quand a la creation de plusieurs diapo *
Ben je sais pas si c'est un défaut, ou alors un défaut JS. J'étais parti sur l'idée, que de toute façons, si on mets plusieurs slideshow sur une page, ca ne sera pas les mêmes images, donc pas la même liste !
* j'ai noté une erreur pour l'ajout de l'evenements onload *
Vi, merci de le souligner.
J'ai modifié comme tu le préconisais, mais ca marche plus pour le coup (l'event est appelé avant la création du code html, ou du moins au début, donc la div conteneur n'est pas encore créée). J'avais lu, je ne sais plus où, qu'il y avait justement des differences selon les navigateurs sur le onload (certains lancent apres chargement, d'autres au début ...on n'est bien avancé avec tout çà ...)
Pour y remédier, on peut appeller l'instance dans le code html.
<script type="text/javascript">
monSlideshow.createSlideshow()
</script>
Mais a ce moment là; autant que je refasse comme j'avais commencé, document.write, et appeler l'instance JS dans le html. Mais je trouvais pas ça très propre ! AU moins, dans ce cas là, il n'y a plus de soucis de navigateur, de load ou onload ...
Une chtite question, outerHTML n'est pas limité à certains navigateurs ? (tjrs ce IE de m... qui ne respecte pas le w3c). A ce moment là, je ferais comme au début, document.write (à moins que ce ne soit pas conseillé ???)
* mais bon j'admet que ce n'etait pas tres important *
Je trouve que si qd même ! Certes, on l'aura compris, je suis pas fan de Windows, mais bon, c'est la majorité des OS en circulation, donc il faut proposer des choses compatibles, même pour la boite à bug et son Super navigateur IE ...
En tout cas, merci pour les conseils et critiques ;)
PS: J'ai ajouté des effets, fondu et growing, nettoyé le code, j'avais aussi modifier pour pouvoir ajouter facilement des effets, mais ca fait bcp de code en plus pour chaque animation ajouté, pour finalement pas grand choses en plus, le but n'était pas de faire une usine à gaz, à l'origine ... Pour faire un truc plus complexe, jquery serait nécessaire, amha !
Comme tu es admin ici, penses-tu que je doivent créer un nouveau sujet, ou modifier celui ci ? Ou simplement dans les commentaires donner un lien vers la nouvelle version ?
7 avril 2012 à 14:25
soit on met
window.onload = function() {
monSlideshow.createSlideshow();
}
qui fait partie du dom level 1 compatible avec tous les navigateurs mais le probleme avec cette facon c'est que si il y a sur la page un autrte onload il sera écrasé
l'autre méthode qui n’écrasera pas les autres événements c'est attacheEvent pour ie <9 et la méthode standard addeEventlistener pour les autres navigateurs ce qui donne
if(typeof window.addEventListener != 'undefined'){
window.addEventListener('load', monSlideshow.createSlideshow, false);
}
else {
window.attachEvent("onload", monSlideshow.createSlideshow);
}
pour ie j' ai testé et sa ne marche pas apparement c'est du au fait que quand l'instance est cree et les objets initialisé la div conteneur n'existe pas j'ai donc cree une fonction init qui est lancé via onload afin que l'initialisation des elements se face apres la creation de la page et a la fin de la fonction j'appel la fonction monSlideshow.createSlideshow mais sa ma reporter un autre probleme qui est la non reconnaissance du this
mais bon j'admet que ce n'etait pas tres important
5 avril 2012 à 13:37
Je rie, je rie, mais ca doit être très désagréable :)
J'ai eu la même blague, et il m'a fallu un moment pour trouver ...
Tu utilises la même liste d'objet images pour les 2 diapo. Fait une copie avec un autre nom, et ca passe !
Par contre, je comprends pas pourquoi ? Les div sont bien crées, au bonne endroit, les 2 class sont bien appelés à chaque itération, mais les div s'animent autour du dernier diapo !!! Les objets en JS m'ont l'air d'être particuliers. C'est pas comme ça en python par exemple, on peut réutiliser un même objet plusieurs fois, ils sont bien référencés différent, ici, c'est un peu le bordel. Mais peut être cela vient d'une erreur dans mon code, mais j'ai pas trouvé (j'ai tout tracé qd j'étais confronté à ce soucis)!
Sinon, merci pour les compliments et la note (euh 8 ... pourquoi pas plus :D), bien que les commentaires soient plutot inexistants (pas vraiment utile non plus pour ce bout de code). Pour la qualité du code, je te laisse seul juge ...(mais ca ne me conviens pas encore, qqles répétitions de ligne, je pourrais structuré mieux le tout et il y a surement des raccourci que je ne connais pas encore en JS)
J'ai amélioré un peu le truc depuis, j'ai ajoute le fondu, texte et image, le positionnement du texte (left ou right, pour surcharger le css) et un delai d'apparition du texte (maintenant que la structure est en place, c'est facile d'ajouter des trucs ...).
Si tu veux cette version, je mettrais à jour ce post dans les jours a venir, sinon, tu m'envois un mail, je te l'envoi en retour.
J'ai dans l'idée, en partant de ce principe, de faire un peu prêt la même, mais avec un nombre indéfini de div. Un peu genre animation flash, chaque slide aura autant de frame (div) qu'il veut, mais bon, si j'ai le temps (pour le coup, jquery sera nécessaire je pense, enfin, ca sera plus simple et surtout l'occasion de m'y mettre un peu ... Hop, un projet dans le #~TODO)
PS: tu auras surement remarqué, on peut mettre du html pour le texte, donc div ou autre image.
PS2: sous IE ca passe ? Je peux pas tester, j'ai essayé ie sous wine, javascript passe po ...
5 avril 2012 à 12:54
j'ai essayé de rajouter un deuxieme diapo pour ce j'ai cree un deuxieme div avec un id different et dans la declaration des variables j'ai modifier la ligne du name et du div conteneur et les deux diapo son cree mais seul le deuxieme marche
sinon je trouve ca pas mal, ca donne bien, c'est bien codé et commenté