SLIDESHOW IMAGES ET TEXTES EN PUR JAVASCRIPT

@karamel 1652 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 14 décembre 2017 Dernière intervention - 5 avril 2012 à 12:54 - Dernière réponse :  camso
- 14 nov. 2017 à 23:07
Commentaires sur une source Créer une discussion Signaler Répondre
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.

http://codes-sources.commentcamarche.net/source/54198-slideshow-images-et-textes-en-pur-javascript

Afficher la suite 
iguypouf 45 Messages postés mercredi 27 octobre 2004Date d'inscription 26 août 2009 Dernière intervention - 12 avril 2012 à 18:04
Pas mal pas mal :)

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.
ansuzpeorth 4 Messages postés jeudi 7 octobre 2010Date d'inscription 23 avril 2012 Dernière intervention - 23 avril 2012 à 16:58
Désolé pour le temps de réponse, j'étais pas mal occupé.

** 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.
Problème d'affichage avec un menu déroulant en css.
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();
Bonjour et merci pour se slideshow. Logiquement je devrais l'installer sur mon site de cuisine. on va voir ce que ça donne. encor merci.
Simple et bien dans l'ensemble
Commenter la réponse de @karamel

12 réponses

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.