Publicité
+ Répondre à la discussion
Page 1 sur 3 123 DernièreDernière
Affichage des résultats 1 à 20 sur 45
  1. #1
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    21 963
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 43
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 21 963
    Points : 81 124
    Points
    81 124

    Par défaut Fondu enchainé



    Suite à cette discussion, je me suis amusé à réaliser un script assez simple de fondu enchainé.

    Le fonctionnement est plutôt simple (enfin... je pense) : vous positionnez vos images les unes par-dessus les autres (dans l'exemple, en les positionnant en absolute) et vous lancez le script en passant en paramètre le nom de classe CSS des élément à enchainer.
    Ensuite, le script modifie les propriétés z-index et d'opacité pour réaliser l'effet.

    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    var Fondu = function(classe_img){
    	this.classe_img = classe_img;
            this.courant = 0;
    	this.coeff = 100;
    	this.collection = this.getImages();
    	this.collection[0].style.zIndex = 100;
    	this.total = this.collection.length - 1;
    	this.encours = false;
    }
    Fondu.prototype.getImages = function(){
    	var tmp = [];
    	if(document.getElementsByClassName){
    		tmp = document.getElementsByClassName(this.classe_img);
    	}
    	else{
    		var i=0;
    		while(document.getElementsByTagName('*')[i]){
    			if(document.getElementsByTagName('*')[i].className.indexOf(this.classe_img) > -1){
    				tmp.push(document.getElementsByTagName('*')[i]);
    			}
    			i++;
    		}
    	}
    	var j=tmp.length;
    	while(j--){
    		if(tmp[j].filters){
    			tmp[j].style.width = tmp[j].style.width || tmp[j].offsetWidth+'px';
    			tmp[j].style.filter = 'alpha(opacity=100)';
    			tmp[j].opaque = tmp[j].filters[0];
    			this.coeff = 1;
    		}
    		else{
    			tmp[j].opaque = tmp[j].style;
    		}
    	}
    	return tmp;
    }
    Fondu.prototype.change = function(sens){
    	if(this.encours){
    		return false;
    	}
    	var prevObj = this.collection[this.courant];
    	this.encours = true;
    	if(sens){
    		this.courant++;
    		if(this.courant>this.total){
    			this.courant = 0;
    		}
    	}
    	else{
    		this.courant--;
    		if(this.courant<0){
    			this.courant = this.total;
    		}
    	}
    	var nextObj = this.collection[this.courant];
    	nextObj.style.zIndex = 50;
    	var tmpOp = 100;
    	var that = this;
    	var timer = setInterval(function(){
    		if(tmpOp<0){
    			clearInterval(timer);
    			timer = null;
    			prevObj.opaque.opacity = 0;
    			nextObj.style.zIndex = 100;
    			prevObj.style.zIndex = 0;
    			prevObj.opaque.opacity = 100 / that.coeff;
    			that.encours = false;
    		}
    		else{
    			prevObj.opaque.opacity = tmpOp / that.coeff;
    			tmpOp -= 5;
    		}
    	}, 25);
    }
    Exemple en ligne

    Je pense que beaucoup de choses peuvent être améliorées, mais j'avoue l'avoir codé assez rapidement, donc n'hésitez pas à proposer vos améliorations
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  2. #2
    Membre chevronné
    Avatar de hornetbzz
    Homme Profil pro
    Directeur commercial
    Inscrit en
    octobre 2009
    Messages
    481
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France

    Informations professionnelles :
    Activité : Directeur commercial

    Informations forums :
    Inscription : octobre 2009
    Messages : 481
    Points : 665
    Points
    665

    Par défaut

    Un autre, en moins bien, sauf peut-être le timeout non [EDIT] constant ... :
    La transition est probablement moins fluide dans mon cas car je n'ai pas pensé à employer les z-index.
    Mais bon, c'est quand même le principe qu'utilise JQuery.

    testé sous FF3, Google Chrome et IE8

    HTML: on commence avec une première image dans la balise <img>
    Code :
    <img id="banniere" src="images/banniere1.png" alt="banniere" title="mon site de noob" style="-moz-opacity:100%; filter:alpha(opacity=100);" />'
    JS
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    // ******************************************************
    // Variables globales, Init
    // ******************************************************
    var b = new Array();
    	b[0] = new Image(); b[0].src = "images/banniere1.png";
    	b[1] = new Image(); b[1].src = "images/banniere2.png";
    	b[2] = new Image(); b[2].src = "images/banniere3.png";
    	b[3] = new Image(); b[3].src = "images/banniere4.png";
    	b[4] = new Image(); b[4].src = "images/banniere5.png";
    	b[5] = new Image(); b[5].src = "images/banniere6.png";
    	b[6] = new Image(); b[6].src = "images/banniere7.png";
    // Je sais j'aurais pu me fendre d'une boucle mais au départ je n'avais que 2 images
    
    // On démarre sur l'image 0 puis au bout du premier timeout, on passe sur l'image 1
    	var pic_number = 1;
    
    // Changement d'image toutes les n secondes
    	var pic_delay = 6000;
    
    
    // ******************************************************
    function $(id) {
    // ******************************************************
    var $ = document.getElementById(id);
    
    $.fadeIn = function(delay,callbk,out) {
        var _this = this;
        for (i = 1; i <= 100; i++) {
          (function(j) {
                setTimeout(function()
    			{  
                      if (out == true) j=100-j;
                      _this.style.opacity = j/100; // IE
                      _this.style.MozOpacity = j/100; // FF
                      _this.style.KhtmlOpacity = j/100; // Konq
                      _this.style.display="block"; 
                       if (j == 100 && callbk != undefined) {callbk.call(_this);}
                       else if (out == true && callbk != undefined && j == 0) {callbk.call(_this);}
                      _this.style.filter = "alpha(opacity=" + j + ");";	
    			}, j*delay/100); // non linéaire
                     
            })(i);     
        }
    };
    
    $.fadeOut = function(delay,callbk) {
        $.fadeIn(delay,callbk,true);
    };
    
    return $;
    }
    	
    // ******************************************************
    function animation()
    // ******************************************************
     {
    	// Cas de n images alternatives contenues dans le tableau b
    		if (pic_number > b.length - 1 ) pic_number = 0;
    
    	// Récupère les infos de l'image en cours dans la balise <img> avec id = banniere
    		var img_encours = document.getElementById("banniere");
    		
    	// Fade Out
    		$("banniere").fadeOut(1000);
    
    	// Attribution de la nouvelle source (affichage de la nouvelle image)
    		img_encours.setAttribute("src", b[pic_number].src);
    	
    	// Fade In
    		$("banniere").fadeIn(1000);
    
    	// on passe à l'indice d'image suivante
    		pic_number++;
    	
    	// Intervalle de n secondes entre chaque image
    		window.setTimeout("animation()", pic_delay);
     }
     
     // Démarrage de l'animation au bout de n secondes
    		window.setTimeout("animation()", pic_delay);

  3. #3
    Membre éclairé
    Profil pro
    Inscrit en
    février 2009
    Messages
    355
    Détails du profil
    Informations personnelles :
    Localisation : France, Sarthe (Pays de la Loire)

    Informations forums :
    Inscription : février 2009
    Messages : 355
    Points : 394
    Points
    394

    Par défaut

    salut bovino, script simple et efficace !!

    Petite remarque quand même, l'utilisation de la class pour sélectionner les images pourrais être remplacé par une récupération des éléments enfant images d'un conteneur. -10 lignes

    Code :
    var prevObj = this.collection[this.courant];
    A mettre après tous les return

    Perso j'aurais fait 2 fonction next et previous et mit en privé une 3ème pour le traitement, rendant le tout plus simple l'utilisation.

    Y'a aussi le problème de ie qui connait pas le style opacity !

    Sinon hornetbzz, plusieurs chose me choque un peu dans ton script. Tu change la propriété src de l'image, mais tu ne prévoit aucun loader d'image (au début du script ces images ne seront pas chargé)
    Puis t'es transitions linaires pause un problème. Tu lance un setimeout en espace de temps variables, ce qui est pas optimisé... rendre 150 frames par seconde sert a rien (sauf accélérer la transition) , il aurait mieux fallut utiliser un setInterval , et gérer l'accélération en fonction du temps passé et restant.
    De plus le gros problème de ta solution et que tu dé-enregistre pas les setTimeout, même à un un interval de 0, ceux-ci continue d'être exécute.
    Dommage, tes idées sont original, mais pas adapté.

    bye

  4. #4
    Membre chevronné
    Avatar de hornetbzz
    Homme Profil pro
    Directeur commercial
    Inscrit en
    octobre 2009
    Messages
    481
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France

    Informations professionnelles :
    Activité : Directeur commercial

    Informations forums :
    Inscription : octobre 2009
    Messages : 481
    Points : 665
    Points
    665

    Par défaut

    Le code n'est probablement pas au top car c'est du conglomérat de différentes époques, entre super noob et le noob actuel. Mais mon script fonctionne bien.

    tu ne prévoit aucun loader d'image (au début du script ces images ne seront pas chargé)
    euh, si, il y a la balise html en base dans le code, puis l'alternance des images est lancée ensuite :
    Code :
    1
    2
    // Démarrage de l'animation au bout de n secondes
    		window.setTimeout("animation()", pic_delay);
    De plus le gros problème de ta solution et que tu dé-enregistre pas les setTimeout, même à un un interval de 0, ceux-ci continue d'être exécute.
    Là par contre ça m'intéresse, pourrais-tu peux préciser stp .. ?

  5. #5
    Membre éclairé
    Profil pro
    Inscrit en
    février 2009
    Messages
    355
    Détails du profil
    Informations personnelles :
    Localisation : France, Sarthe (Pays de la Loire)

    Informations forums :
    Inscription : février 2009
    Messages : 355
    Points : 394
    Points
    394

    Par défaut

    ok concernant les img, c'est vrai , mais elle sont déclarer a l'extérieur de ton script, c'est donc a l'utilisateur de le faire "manuellement", en html ou js. Hors en html si on utilise un domContentLoaded sur le document, les imgs ne seront pas charger lors de l'exécution du script. De même en js, le chargement ce fait de manière asynchrone, faudrait en faite vérifié a chaque fin de chargement des imgs si elle le sont toutes et lancer le script si oui.... Mais bon autant faire une autre source pour ca

    Pour le timeout je me suis aussi planté , j'ai écrit en speed, j'était pas chez moi , sans mon éditeur favorie dsl

    Tu dit que ton timeout est non lineaire, tu entends koi par là ?

    Penses pas me tromper cette fois ! mais tu déclares autant de timeout que de frame, passer par un setinterval consommera bcp moin de ressource.

    bye

  6. #6
    Membre chevronné
    Avatar de hornetbzz
    Homme Profil pro
    Directeur commercial
    Inscrit en
    octobre 2009
    Messages
    481
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France

    Informations professionnelles :
    Activité : Directeur commercial

    Informations forums :
    Inscription : octobre 2009
    Messages : 481
    Points : 665
    Points
    665

    Par défaut

    Ok, tu as aussi dû oublier le correcteur d'orthographe et tes lunettes

    Le timeout linéaire (fonction affine de j) est en gras dans le source : j*delay/100

  7. #7
    Membre éclairé
    Profil pro
    Inscrit en
    février 2009
    Messages
    355
    Détails du profil
    Informations personnelles :
    Localisation : France, Sarthe (Pays de la Loire)

    Informations forums :
    Inscription : février 2009
    Messages : 355
    Points : 394
    Points
    394

    Par défaut

    bon apparemment tu tiens absolument pas comptes de mes remarques constructive, mais préfère me balancer mes erreurs, qu'elle soit orthographique (super, j'ai pas que ca a faire , que de relire tout mes msg, juste pour paraitre cultivé, mais toi tu en a assé pour le rapeller aux autres !! pas mal !!) ou celle de logique à là quels je me suis excusé(tu veux quoi d'autre?).

    De plus met des lunettes aussi j'ai dit
    Tu dit que ton timeout est non linéaire, tu entends koi par là ?
    Comme quoi hein

  8. #8
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    21 963
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 43
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 21 963
    Points : 81 124
    Points
    81 124

    Par défaut

    Citation Envoyé par kimjoa Voir le message
    salut bovino, script simple et efficace !!
    Merci
    Petite remarque quand même, l'utilisation de la class pour sélectionner les images pourrais être remplacé par une récupération des éléments enfant images d'un conteneur. -10 lignes
    Oui, j'y avait pensé, mais finalement, je me suis dit que cette façon de procéder, bien que demandant plus de traitements était peut-être préférable, cela permet de placer les éléments n'importe où dans le code et d'utiliser cette classe CSS pour les positionner.
    Code :
    var prevObj = this.collection[this.courant];
    A mettre après tous les return

    Bien vu, c'est corrigé
    Perso j'aurais fait 2 fonction next et previous et mit en privé une 3ème pour le traitement, rendant le tout plus simple l'utilisation.
    Oui, effectivement, ce serait probablement plus adapté...
    Y'a aussi le problème de ie qui connait pas le style opacity !
    C'est bien pour cela que je différencie la propriété opaque en fonction de IE
    Code :
    1
    2
    3
    4
    5
    6
    7
    if(tmp[j].filters){
    	tmp[j].opaque = tmp[j].filters[0];
    	this.coeff = 1;
    }
    else{
    	tmp[j].opaque = tmp[j].style;
    }
    et dans tous les cas, opaque possède bien une propriété opacity
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  9. #9
    Membre éclairé
    Profil pro
    Inscrit en
    février 2009
    Messages
    355
    Détails du profil
    Informations personnelles :
    Localisation : France, Sarthe (Pays de la Loire)

    Informations forums :
    Inscription : février 2009
    Messages : 355
    Points : 394
    Points
    394

    Par défaut

    C'est bien pour cela que je différencie la propriété opaque en fonction de IE
    Code :

    if(tmp[j].filters){
    tmp[j].opaque = tmp[j].filters[0];
    this.coeff = 1;
    }
    else{
    tmp[j].opaque = tmp[j].style;
    }

    et dans tous les cas, opaque possède bien une propriété opacity
    Ha ok ! Intéressant ta façon de procéder, je là met de coté pour plus tard !

  10. #10
    Expert Confirmé Sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    avril 2004
    Messages
    5 556
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2004
    Messages : 5 556
    Points : 5 983
    Points
    5 983

    Par défaut

    Il ne reste plus à combiner ce script avec le script du miroir

  11. #11
    Invité de passage
    Inscrit en
    mars 2010
    Messages
    3
    Détails du profil
    Informations forums :
    Inscription : mars 2010
    Messages : 3
    Points : 3
    Points
    3

    Par défaut fondu enchainé

    Bonjour! ce script m'intéresse beaucoup, je voudrais l'adapter pour créer une bannière qui change d'image toute seule (sans bouton) je me galère à chercher un code depuis 3 jours sans résultat. Pourriez vous m'aider svp ?
    (je ne sais pas programmer, juste utiliser le code et encore...)

  12. #12
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    21 963
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 43
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 21 963
    Points : 81 124
    Points
    81 124

    Par défaut

    Il suffit de modifier le onload du body :
    Code :
    <body onload="window.monFondu = new Fondu('images');setInterval(function(){monFondu.change(true);},3000);">
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  13. #13
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    21 963
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 43
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 21 963
    Points : 81 124
    Points
    81 124

    Par défaut

    J'ai rajouté une option de défilement automatique dans la page d'exemple
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  14. #14
    Invité de passage
    Inscrit en
    mars 2010
    Messages
    3
    Détails du profil
    Informations forums :
    Inscription : mars 2010
    Messages : 3
    Points : 3
    Points
    3

    Par défaut

    Merci pour la réponse ultra rapide ! ça ne fonctionne pas chez moi, j'ai déjà la balise body pleine de préloads d'images...
    code:
    Code :
    <body onload="MM_preloadImages('/images/chauf2.gif','/images/indus2.gif','/images/buro2.gif','/images/clim2.gif','/images/sani2.gif','/images/ref2.gif','/images/part2.gif','../images/actualites1.gif','../images/presentation.jpg','../images/devis.jpg','../images/contact.jpg','../images/promos.jpg','../images/actualites.jpg','../images/musicoff.jpg')">
    au début, j'ai essayé les scripts de chez codes sources qui sont un peu plus compliqués (appel *.js) et j'ai vu vos codes que je trouve beaucoup plus simples, notamment pour l'appel de fichiers *.js (les vôtres sont dans la page html, plus facile pour un noob comme moi d'insérer la balise <script javascript>)=> j'ai bien sûr changé les appels d'images en fonction de leur situation par rapport aux dossiers de mon site...

    Votre code me met les images les unes au dessous des autres, le fade-in/fade-out fonctionne quand même.


    Je précise que je travaille sous dreamweaver et que je fais un site pour un copain... et surtout que je suis pas très doué pour encoder, mon dada c'est plutôt le graphisme, je dors avec photoshop sous l'oreiller...

  15. #15
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
    Inscrit en
    mars 2002
    Messages
    34 895
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 64
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 34 895
    Points : 56 606
    Points
    56 606

    Par défaut

    Il ne reste plus à combiner ce script avec le script du miroir
    il suffit de mettre l'image est le reflet dans un même div et de lui appliquer le fondu enchainé... ( plat typiquement savoyard et masochiste )
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.com|www.saftair.com| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  16. #16
    Invité de passage
    Inscrit en
    mars 2010
    Messages
    3
    Détails du profil
    Informations forums :
    Inscription : mars 2010
    Messages : 3
    Points : 3
    Points
    3

    Par défaut Fondu enchainé

    Bon, bah j'ai trouvé une solution, je me suis gratté les neurones et j'ai fait ma bannière sous flash, au final ça pèse pas lourd et c'est facile à insérer dans le code. Et puis qu'importe le flacon... j'ai obtenu le résultat escompté.
    PS: Merci quand même !
    Fichiers attachés Fichiers attachés

  17. #17
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
    Inscrit en
    mars 2002
    Messages
    34 895
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 64
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 34 895
    Points : 56 606
    Points
    56 606

    Par défaut

    un simple point virgule suffisait
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.com|www.saftair.com| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  18. #18
    Invité de passage
    Inscrit en
    décembre 2003
    Messages
    1
    Détails du profil
    Informations forums :
    Inscription : décembre 2003
    Messages : 1
    Points : 1
    Points
    1

    Par défaut Utiliser le script plusieurs fois sur la même page

    Bonjour,

    je voudrais utiliser le script de Bovino plusieurs fois (9) sur une même page avec 9 séries de photos...

    Est ce possible ?

    Merci d'avance de votre aide !

  19. #19
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    21 963
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 43
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 21 963
    Points : 81 124
    Points
    81 124

    Par défaut

    Citation Envoyé par Malanico Voir le message
    Bonjour,

    je voudrais utiliser le script de Bovino plusieurs fois (9) sur une même page avec 9 séries de photos...

    Est ce possible ?

    Merci d'avance de votre aide !
    vous lancez le script en passant en paramètre le nom de classe CSS des élément à enchainer.
    Oui, il suffit de lancer le script avec des noms de classes différents
    Code :
    1
    2
    3
    4
    new Fondu('classe_1');
    new Fondu('classe_2');
    ...
    new Fondu('classe_n')
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  20. #20
    Expert Confirmé Sénior Avatar de vodiem
    Homme Profil pro Diem VO
    Vivre
    Inscrit en
    avril 2006
    Messages
    2 842
    Détails du profil
    Informations personnelles :
    Nom : Homme Diem VO
    Âge : 42
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Vivre
    Secteur : Conseil

    Informations forums :
    Inscription : avril 2006
    Messages : 2 842
    Points : 4 005
    Points
    4 005

    Par défaut

    merci Bovino

    je n'ai pas regardé le code de plus près.
    je déplore qu'il n'y a pas une partie réservé et commenté dans le code pour le paramétrage du délai entre fondu et délai de transition.
    je craignais de voir le chargement des images comme dans la démo mais ca va.
    pas de soucis particulier, simple d'utilisation : merci.


Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •