Bonjour, j'ai créer une galerie, mais j'aimerais que mes images soient charger dans la galerie sans devoir faire une ligne par image. On m'a dis de passer par getElementById mais je comprend pas son fonctionnement, Je ne sais pas ce qu'il faut mettre dedans. Voila ma fonction onload = function () { var i =1; /* container, X, T, path, [image.src, text] */ /* test d'un chargement automatique des images */ while(document.getElementById("R:\dossier\site\www\fr\galeries\img/nom_nom-0"+i+".jpg.jpg").innerHTML != "") { diap.init("screen", 20,10, "", [ ["R:\dossier\site\www\fr\galeries\img/nom_nom-0"+i+".jpg.jpg", ""], ]); alert('coucou'); i++; } }

Javascript / DHTML : Pb de préchargement des images

Réponse 1 / 42

Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
20 avril 2009 à 16:18

Bonjour,

>>j'ai créer une galerie, mais j'aimerais que mes
>>images soient charger dans la galerie sans devoir faire une ligne par image.
pas compris ce que tu veux faire....

tu parles de préchargement ? à mon avis : évite !
c'est strictement inutile voire nuisible
ta page ne va être accessible que lorsque toutes les images
    auront été chargées ( même celles qu'on ne regadera jamais )
    on va donc attendre un temps certain , alors que, sans préchargement,
    la page est immédiatement accessible, les images s'affichent à
    leur rythme mais surtout au fur et à mesure des besoins
ça doit être utile dans certains cas je pense, sinon on ne trouverait
pas ce genre de choses ici où là... mais je doute !

Cordialement [mon Site] [M'écrire] Bul

Réponse 2 / 42

loblobloblob Messages postés 77 Date d'inscription mardi 7 avril 2009 Statut Membre Dernière intervention 18 mars 2010
20 avril 2009 à 16:27

Désolé, quand je dis pré chargement, je veut dire que toutes mes images seront dans ma galerie sans que j'ai besoin de d'écrire 2OO foi ["R:\dossier\site\www\fr\galeries\img/nom_nom-0"+i+".jpg.jpg", ""]
Mais je ne sais pas comment utiliser getElementById. Si c'est bien par ce moyen qu'il faut faire

Merci

Réponse 3 / 42

Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
20 avril 2009 à 16:35

>>sans que j'ai besoin de d'écrire 2OO fois

while(document.getElementById...

un ID c'est dans une balise html, pas l'url d'un fichier
par exemple
comme on ne sait pas ce qu'est( ce que fait ? ) diap.init,
qu'on n'a pas le html, la "galerie" ( c'est quoi ? )...

difficile d'aider beaucoup plus
@+

Réponse 4 / 42

loblobloblob Messages postés 77 Date d'inscription mardi 7 avril 2009 Statut Membre Dernière intervention 18 mars 2010
20 avril 2009 à 16:56

Bon cmooe je m'en sortais pas je suis passer par getElementsByName,
puis j'ai fait une boucle for pour éviter les pb de boucles infini qui n'en finissait plus.

donc sa marche pour la premiére image, puis il m'anonce par une alerte qu'il va jusqu'a la deuxiéme image puis il s'arréte et je n'ai d'afficher dans ma gallerie que ma premiére image

voila mon code :

alert(document.getElementsByName("jpg"));

    for(var i=1; i!=5; i++)
    {
            alert("dossier/nom-0"+i+".jpg");
            document.getElementsByName("jpg");
            diap.init("screen", 1, 1, "", [
                ["dossier/nom-0"+i+".jpg", ""],
            ]);


    }

Je ne comprend pas pourquoi il s'arrête en cour de route, si je change dans le diap init le 1,1 pour 1,2 par exemple il me met un ID-10-T error... mais il s'arrête aprés le nombre d'image souhaité mais n'affiche rien.

Merci

Réponse 5 / 42

@karamel Messages postés 1854 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 8 avril 2024 153
20 avril 2009 à 20:17

bonjour

si j'ai bien compri tu cherche a connaitre le contenue d'un repertoire et ca en javascript je pense pas que se soit possible

Réponse 6 / 42

Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
21 avril 2009 à 10:10

c'est possible de regarder les fichiers d'un répertoire
uniquement avec IE et FF aujourd'hui
mais un répertoire local, pas sur un site
si c'est en local on peut te donner les liens
    pour voir comment faire
si c'est sur un site, faire avec le langage sur le serveur
   ou met les noms de ces fichiers dans un array, voire
   s'ils ont le même nom fiare une simple boucle comme
   tu sembles le faire
>>si je change dans le diap init le 1,1 pour 1,2 par exemple il me met un

>>ID-10-T error... mais il s'arrête aprés le nombre d'image souhaité mais
n'affiche rien.
alors çà, faut voir avec l'outil que tu utilises !
    diap.init    ça fait quoi ????

Réponse 7 / 42

loblobloblob Messages postés 77 Date d'inscription mardi 7 avril 2009 Statut Membre Dernière intervention 18 mars 2010
21 avril 2009 à 10:12

Je pense que c'est faisable quand même.

Petit test intéressant,

    var tab = new Array();

    document.getElementsByName("jpg");
    for(var i=1; i!=17; i++)
    {
        tab[i]=['dossier/nom0'+i+'.jpg']
        alert(tab[i]);
            diap.init("screen", i/10, 1, "", [
                [tab[i], ""],
            ]);
      }

Il rempli le tableau jusqu'à la 16 ème image comme demandé mais n'affiche que l'image numéro 10

    var tab = new Array();



    document.getElementsByName("jpg");

    for(var i=1; i!=17; i++)

    {

        tab[i]=['dossier/nom0'+i+'.jpg']

        alert(tab[i]);

            diap.init("screen", i/6, 1, "", [

                [tab[i], ""],

            ]);

      }




Il rempli le tableau jusqu'à la 16 ème images mais n'affiche que l'image numéro 6

donc j'en conclus que si je fais

    var tab = new Array();



    document.getElementsByName("jpg");

    for(var i=1; i!=17; i++)

    {

        tab[i]=['dossier/nom0'+i+'.jpg']

        alert(tab[i]);

            diap.init("screen", i/i, 1, "", [

                [tab[i], ""],

            ]);

      }

Il devrais remplir le tableau jusqu'à l'image 16 et toutes les afficher mais il ne rempli le tableau que jusqu'à l'image 2 et n'affiche que la première. Pourquoi?

Merci de bien vouloir m'éclairer

Réponse 8 / 42

loblobloblob Messages postés 77 Date d'inscription mardi 7 avril 2009 Statut Membre Dernière intervention 18 mars 2010
21 avril 2009 à 10:14

j'avais pas vue ta réponse, donc c'est bien possible, je pense comme le montre mon petit test juste avant quee ça doit être un problème d'initialisation du nombre de colonne et de ligne du tableau, mais je n'y arrive pas

Réponse 9 / 42

Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
21 avril 2009 à 10:20

t'avais pas vu, mais tu n'as pas lu non plus je pense.

Réponse 10 / 42

loblobloblob Messages postés 77 Date d'inscription mardi 7 avril 2009 Statut Membre Dernière intervention 18 mars 2010
21 avril 2009 à 10:26

Si mais tu dis qu'en locale sous FF sa marche et je fais mes test en locale. ah moins d'avoir mal compris

Réponse 11 / 42

Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
21 avril 2009 à 10:38

j'ai dis que c'était possible avec IE et FF en local,
mais j'ai dis d'autres choses, plusieurs fois.
tout ce que tu nous fait voir n'affiche rien,
n'examine rien d'un répertoire....
comment pourrait-on te dire où tu fais une erreur
si tu ne nous donnes qu'un extrait inutile ????

Réponse 12 / 42

loblobloblob Messages postés 77 Date d'inscription mardi 7 avril 2009 Statut Membre Dernière intervention 18 mars 2010
21 avril 2009 à 10:51

Si vous voulez je peut lettre tout le code, mais c'est un siteque j'ai repris et j'ai changer que ce que je vous ai montré dans le fichier js :
// //            Javascript Slideshow ======

// script written by Gerard Ferrandez - December 31, 2006

// http://www.dhteumeuleu.com/
// var diap {

    /////////////////////////////////

    BR : 3,     // border size in px

    ZR : .75,   // zoom ratio

    SP : .1,    // speed

    /////////////////////////////////

    V : false,

    S : false,

    G : true,

    resize : function () {
        /* window resize event */

        diap.nw = diap.scr.offsetWidth;

        diap.nh = diap.scr.offsetHeight;

        diap.nwu = (diap.nw * diap.ZR);

        diap.nhu = (diap.nh * diap.ZR);

        diap.nwt = Math.floor((diap.nw * (1 - diap.ZR) * .5) / (diap.NX - 1)) - diap.BR;

        diap.nht = Math.floor((diap.nh * (1 - diap.ZR) * .5) / (diap.NY - 1)) - diap.BR;

        diap.rc = 255 / ((diap.nw / diap.NX) - diap.nwt);

        if (diap.N) {

            diap.setPosition();

            if (!diap.G) diap.delLabels();

        }

    },

    setPosition : function () {
        /* calculate image target position */

        var k = 0;

        var y = this.S ? this.BR + Math.floor((this.NY - this.Y - 1) * (this.nht + this.BR)) : 0;

        for (var j = 0; j < this.NY; j++) {

            var x = this.S ? this.BR + Math.floor((this.NX - this.X - 1) * (this.nwt + this.BR)) : 0;

            for (var i = 0; i < this.NX; i++) {

                var o = this.spa[k++];

                o.y1 = y;

                o.x1 = x;
                o.w1 this.S ? (o this.S ? this.nwu - this.BR : this.nwt) : Math.ceil(this.nw / this.NX) - this.BR;
                o.h1 this.S ? (o this.S ? this.nhu - this.BR : this.nht) : Math.ceil(this.nh / this.NY) - this.BR;
                x +this.S ? ((this.X i) ? this.nwu : this.nwt + this.BR) : Math.ceil(this.nw / this.NX);

            }
            y +this.S ? ((this.Y j) ? this.nhu : this.nht + this.BR) : Math.ceil(this.nh / this.NY);

        }

    },

    delLabels : function () {
        /* remove texts */

        for ( var i = 0; i < diap.N; i++) {

            var o = diap.spa[i];

            if (o.T) diap.scr.removeChild(o.T);

            o.T = false;

        }

    },

    run : function () {
        /* main loop */

        for ( var i = 0; i < diap.N; i++) diap.spa[i].move();

        setTimeout(diap.run, 16);

    },

    init : function (container, NX, NY, path, images) {
        /* initialize script */

        this.scr = id(container);

        if (!this.scr || NX * NY != images.length) { alert('ID-10-T error...'); return false; }

        this.NX = NX;

        this.NY = NY;

        this.spa = {};

        this.resize();

        var k = 0;

        for (var y = 0; y < this.NY; y++) {

            for (var x = 0; x < this.NX; x++) {
                /* create HTML elements */
                var s this.spa[k] document.createElement('div');

                s.img = document.createElement('img');
                /* opacity optimized function */

                /* --- dans le script de base, l'alpha inférieur n'est pas a 10 mais à "0" et le deuxième visibility en "hidden"---*/

                s.img.setOpacity = function (alpha) {
                    if (alpha < 10) alpha 10; else if (alpha > 100) alpha 100;

                    if (alpha == 100) {
                        /* speed opt - remove IE filter */

                        this.style.visibility = 'visible';

                        this.style.filter = '';

                        this.style.opacity = 1;

                        return 100;

                    } else if (alpha == 10) {
                        /* hide image, remove opacity */

                        this.style.visibility = 'visible';

                        this.style.filter = '';

                        this.style.opacity = 10;

                        return 10;

                    }

                    if (this.filters) {
                        /* IE filter */

                        if (!this.filters.alpha) this.style.filter = 'alpha(opacity=' + alpha + ')';

                        else this.filters.alpha.opacity = alpha;
                    /* CSS opacity */

                    } else this.style.opacity = alpha * .01;

                    return alpha;

                }

                s.img.src = id('loading').src;

                s.appendChild(s.img);

                this.scr.appendChild(s);
                /* pre-load image */

                s.pre = new Image();

                s.pre.obj = s;
                s.pre.onload function() { this.obj.img.src this.src; }

                s.pre.src = path + images[k][0];
                /* set image variables */

                s.x = x;

                s.y = y;

                s.x0 = x * (this.nw / this.NX) + (this.nw / this.NX) / 2;

                s.y0 = y * (this.nh / this.NY) + (this.nh / this.NY) / 2;;

                s.x1 = x * (this.nw / this.NX);

                s.y1 = y * (this.nh / this.NY);

                s.w0 = 0;

                s.h0 = 0;

                s.w1 = 0;

                s.h1 = 0;

                s.V = 0;

                s.t = images[k][1];

                s.T = false;
                /* function move image */

                s.move = function() {
                    /* position images */

                    this.style.left   = px(this.x0 += (this.x1 - this.x0) * diap.SP);

                    this.style.top    = px(this.y0 += (this.y1 - this.y0) * diap.SP);

                    this.style.width = px(this.w0 += (this.w1 - this.w0) * diap.SP);

                    this.style.height = px(this.h0 += (this.h1 - this.h0) * diap.SP);

                    if (this != diap.S) {
                        /* set image background color */

                        if (Math.abs(this.w1 - this.w0) > 1) {

                            var c = (!diap.G && this.V > 0) ? 255 : 16 + Math.round(255 - diap.rc * (this.w0 - diap.nwt));

                            this.style.background = 'RGB(255,255,255)';

                            /*this.style.background = 'RGB(143,196,239)';*/

                            /*this.style.background = 'RGB('.concat(c, ',', c, ',', c, ')');*/

                        }

                        if (this == diap.V) {
                            /* on mouseover: fade in */

                            if (this.V < 100) this.img.setOpacity(this.V += 5);

                        } else {
                            /* fade out */

                            if (this.V >= 0 && diap.G != this) this.img.setOpacity(this.V -= 2);

                        }

                    }
                    /* text effect */

                    if (this.T) this.dispLabel();

                }
                /* display text function (typewriter FX) */

                s.dispLabel = function() {

                    if (diap.G || diap.S == this) {
                        /* zoomed image */

                        this.T.style.left = px(this.x0);

                        this.T.style.top   = px(this.y0);

                        this.T.style.width = px(this.w0);

                    } else {
                        /* calculate text position */

                        var xt = diap.S.x0 + this.w0 + diap.BR;

                        if (this.y == diap.Y) {

                            this.T.style.top = px(this.y0 - this.f - diap.BR);
                            if (this.y 0) var xt diap.S.x0;

                        } else this.T.style.top = px(this.y0 - (this.y <= diap.Y ? diap.BR : 0));

                        if (this.x > diap.X) this.T.style.left = px(diap.S.w0 + diap.S.x0 - diap.nwu * .5);

                        else this.T.style.left = px(xt);

                        if (this != diap.V) {
                            /* text type out */

                            this.Tp--;

                            this.T.innerHTML = this.t.substring(0, this.Tp);

                            if (this.Tp < 1) {

                                diap.scr.removeChild(this.T);

                                this.T = false;

                            }

                        } else {

                            if (this.Tp < this.t.length) {
                                /* text type in */

                                this.Tp++;

                                this.T.innerHTML = this.t.substring(0, this.Tp);

                            }

                        }

                    }

                }
                /* create text function */

                s.createLabel = function () {

Réponse 13 / 42

loblobloblob Messages postés 77 Date d'inscription mardi 7 avril 2009 Statut Membre Dernière intervention 18 mars 2010
21 avril 2009 à 10:54

j'ai repris un site existant que je dois mettre a jour, la première partie du code n'a pas changer, mais si vous voulez je peut vous mettre l'intégralité du code :
// //            Javascript Slideshow ======

// script written by Gerard Ferrandez - December 31, 2006

// http://www.dhteumeuleu.com/
// var diap {

    /////////////////////////////////

    BR : 3,     // border size in px

    ZR : .75,   // zoom ratio

    SP : .1,    // speed

    /////////////////////////////////

    V : false,

    S : false,

    G : true,

    resize : function () {
        /* window resize event */

        diap.nw = diap.scr.offsetWidth;

        diap.nh = diap.scr.offsetHeight;

        diap.nwu = (diap.nw * diap.ZR);

        diap.nhu = (diap.nh * diap.ZR);

        diap.nwt = Math.floor((diap.nw * (1 - diap.ZR) * .5) / (diap.NX - 1)) - diap.BR;

        diap.nht = Math.floor((diap.nh * (1 - diap.ZR) * .5) / (diap.NY - 1)) - diap.BR;

        diap.rc = 255 / ((diap.nw / diap.NX) - diap.nwt);

        if (diap.N) {

            diap.setPosition();

            if (!diap.G) diap.delLabels();

        }

    },

    setPosition : function () {
        /* calculate image target position */

        var k = 0;

        var y = this.S ? this.BR + Math.floor((this.NY - this.Y - 1) * (this.nht + this.BR)) : 0;

        for (var j = 0; j < this.NY; j++) {

            var x = this.S ? this.BR + Math.floor((this.NX - this.X - 1) * (this.nwt + this.BR)) : 0;

            for (var i = 0; i < this.NX; i++) {

                var o = this.spa[k++];

                o.y1 = y;

                o.x1 = x;
                o.w1 this.S ? (o this.S ? this.nwu - this.BR : this.nwt) : Math.ceil(this.nw / this.NX) - this.BR;
                o.h1 this.S ? (o this.S ? this.nhu - this.BR : this.nht) : Math.ceil(this.nh / this.NY) - this.BR;
                x +this.S ? ((this.X i) ? this.nwu : this.nwt + this.BR) : Math.ceil(this.nw / this.NX);

            }
            y +this.S ? ((this.Y j) ? this.nhu : this.nht + this.BR) : Math.ceil(this.nh / this.NY);

        }

    },

    delLabels : function () {
        /* remove texts */

        for ( var i = 0; i < diap.N; i++) {

            var o = diap.spa[i];

            if (o.T) diap.scr.removeChild(o.T);

            o.T = false;

        }

    },

    run : function () {
        /* main loop */

        for ( var i = 0; i < diap.N; i++) diap.spa[i].move();

        setTimeout(diap.run, 16);

    },

    init : function (container, NX, NY, path, images) {
        /* initialize script */

        this.scr = id(container);

        if (!this.scr || NX * NY != images.length) { alert('ID-10-T error...'); return false; }

        this.NX = NX;

        this.NY = NY;

        this.spa = {};

        this.resize();

        var k = 0;

        for (var y = 0; y < this.NY; y++) {

            for (var x = 0; x < this.NX; x++) {
                /* create HTML elements */
                var s this.spa[k] document.createElement('div');

                s.img = document.createElement('img');
                /* opacity optimized function */

                /* --- dans le script de base, l'alpha inférieur n'est pas a 10 mais à "0" et le deuxième visibility en "hidden"---*/

                s.img.setOpacity = function (alpha) {
                    if (alpha < 10) alpha 10; else if (alpha > 100) alpha 100;

                    if (alpha == 100) {
                        /* speed opt - remove IE filter */

                        this.style.visibility = 'visible';

                        this.style.filter = '';

                        this.style.opacity = 1;

                        return 100;

                    } else if (alpha == 10) {
                        /* hide image, remove opacity */

                        this.style.visibility = 'visible';

                        this.style.filter = '';

                        this.style.opacity = 10;

                        return 10;

                    }

                    if (this.filters) {
                        /* IE filter */

                        if (!this.filters.alpha) this.style.filter = 'alpha(opacity=' + alpha + ')';

                        else this.filters.alpha.opacity = alpha;
                    /* CSS opacity */

                    } else this.style.opacity = alpha * .01;

                    return alpha;

                }

                s.img.src = id('loading').src;

                s.appendChild(s.img);

                this.scr.appendChild(s);
                /* pre-load image */

                s.pre = new Image();

                s.pre.obj = s;
                s.pre.onload function() { this.obj.img.src this.src; }

                s.pre.src = path + images[k][0];
                /* set image variables */

                s.x = x;

                s.y = y;

                s.x0 = x * (this.nw / this.NX) + (this.nw / this.NX) / 2;

                s.y0 = y * (this.nh / this.NY) + (this.nh / this.NY) / 2;;

                s.x1 = x * (this.nw / this.NX);

                s.y1 = y * (this.nh / this.NY);

                s.w0 = 0;

                s.h0 = 0;

                s.w1 = 0;

                s.h1 = 0;

                s.V = 0;

                s.t = images[k][1];

                s.T = false;
                /* function move image */

                s.move = function() {
                    /* position images */

                    this.style.left   = px(this.x0 += (this.x1 - this.x0) * diap.SP);

                    this.style.top    = px(this.y0 += (this.y1 - this.y0) * diap.SP);

                    this.style.width = px(this.w0 += (this.w1 - this.w0) * diap.SP);

                    this.style.height = px(this.h0 += (this.h1 - this.h0) * diap.SP);

                    if (this != diap.S) {
                        /* set image background color */

                        if (Math.abs(this.w1 - this.w0) > 1) {

                            var c = (!diap.G && this.V > 0) ? 255 : 16 + Math.round(255 - diap.rc * (this.w0 - diap.nwt));

                            this.style.background = 'RGB(255,255,255)';

                            /*this.style.background = 'RGB(143,196,239)';*/

                            /*this.style.background = 'RGB('.concat(c, ',', c, ',', c, ')');*/

                        }

                        if (this == diap.V) {
                            /* on mouseover: fade in */

                            if (this.V < 100) this.img.setOpacity(this.V += 5);

                        } else {
                            /* fade out */

                            if (this.V >= 0 && diap.G != this) this.img.setOpacity(this.V -= 2);

                        }

                    }
                    /* text effect */

                    if (this.T) this.dispLabel();

                }
                /* display text function (typewriter FX) */

                s.dispLabel = function() {

                    if (diap.G || diap.S == this) {
                        /* zoomed image */

                        this.T.style.left = px(this.x0);

                        this.T.style.top   = px(this.y0);

                        this.T.style.width = px(this.w0);

                    } else {
                        /* calculate text position */

                        var xt = diap.S.x0 + this.w0 + diap.BR;

                        if (this.y == diap.Y) {

                            this.T.style.top = px(this.y0 - this.f - diap.BR);
                            if (this.y 0) var xt diap.S.x0;

                        } else this.T.style.top = px(this.y0 - (this.y <= diap.Y ? diap.BR : 0));

                        if (this.x > diap.X) this.T.style.left = px(diap.S.w0 + diap.S.x0 - diap.nwu * .5);

                        else this.T.style.left = px(xt);

                        if (this != diap.V) {
                            /* text type out */

                            this.Tp--;

                            this.T.innerHTML = this.t.substring(0, this.Tp);

                            if (this.Tp < 1) {

                                diap.scr.removeChild(this.T);

                                this.T = false;

                            }

                        } else {

                            if (this.Tp < this.t.length) {
                                /* text type in */

                                this.Tp++;

                                this.T.innerHTML = this.t.substring(0, this.Tp);

                            }

                        }

                    }

                }
                /* create text function */

                s.createLabel = function () {

                    this.T = document.createElement('div');

                    this.T.className = 'label';

                    if (!diap.G && this.x > diap.X) this.T.style.textAlign = 'right';

                    this.f = 4 + Math.round(Math.sqrt(diap.nht * 2));

                    if(this == diap.S) {

                        this.f *= 2;

                        this.T.style.background = 'none';

                        this.T.style.textAlign = 'center';

                    }

                    this.T.style.fontSize = ''.concat(this.f, 'px');

                    this.T.innerHTML   = this.t;

                    this.T.style.left = px(-1000);

                    this.T.style.width = px(diap.nwu * .5);

                    this.T.style.height = px(this.f + 3);

                    this.Tp = 0;

                    diap.scr.appendChild(this.T);

                }
                /* on mouse over event */

                s.onmouseover = function() {

                    if (diap.S != this && diap.G != this) {
                        /* display image */

                        this.img.setOpacity(100);

                        this.V = this.img.setOpacity(20);

                    }
                    /* create text */

                    if (!this.T) this.createLabel();

                    diap.V = this;

                }
                /* on click event */

                s.onclick = function() {
                    /* memorize selected image */

                    diap.X = this.x;

                    diap.Y = this.y;

                    diap.V = false;

                    diap.G = false;

                    this.V = this.img.setOpacity(100);

                    diap.delLabels();

                    if (diap.S == this) {
                        /* zoom out - grid mode on */

                        diap.S = false;

                        diap.G = this;

                        for (var i = 0; i < diap.N; i++) diap.spa[i].createLabel();

                    } else {
                        /* zoom in */

                        diap.S = this;

                        this.createLabel();

                    }

                    diap.setPosition();

                }

                s.createLabel();

                s.ondblclick = s.onclick;

                s.ondrag = function () { return false; }

                k++;

            }

        }

        this.N = NX * NY;
        /* add resize event */

        this.resize();

        addEvent(window, 'resize', diap.resize);
        /* start main loop */

        this.run();

    }

}
/* create diaporama */

onload = function () {

        /* container, X, T, path, [image.src, text] */
    var tab = new Array();

    document.getElementsByName("jpg");

    for(var i=1; i!=17; i++)
    {
        tab[i]=['dossier/nom-0'+i+'.jpg']
        alert(tab[i]);
            diap.init("screen", 10/i, 1, "", [[tab[i], ""],]);

    }




    }

Réponse 14 / 42

Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
21 avril 2009 à 11:11

oulah.... pourquoi faire simple quand on peut faire compliqué !!
pas d'étude des fichiers d'un répertoire dans ce que tu nous donnes.
il y a bien un preload ( donc nuisible ) inclus.
je ne vais surement pas tout décortiquer, il faudrait voir ce
que cela donne avant tes modifs sur un site, mais si cela se trouve,
une simple balise marquee ferait parfaitement l'affaire.

Réponse 15 / 42

loblobloblob Messages postés 77 Date d'inscription mardi 7 avril 2009 Statut Membre Dernière intervention 18 mars 2010
21 avril 2009 à 11:18

voila ce que sa donne quand on rentre les adresses des images une par une dans le diap init

http://www.urbica.net/fr/galeries/galerie_architecture.php

Réponse 16 / 42

Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
21 avril 2009 à 11:35

bah, avec FF ( pas testé avec d'autre ), j'ai beau cliquer sur n'importe quelle
galerie ou rafraîchir... au bout de 10' rien n'est toujours affiché, je patiente
néanmoins... pour voir ( j'ai un modem 56 k ! )

Réponse 17 / 42

loblobloblob Messages postés 77 Date d'inscription mardi 7 avril 2009 Statut Membre Dernière intervention 18 mars 2010
21 avril 2009 à 11:44

En gros, il y a 16 images en miniature ranger dans un tableau, quand on clique sur une image
celle-ci grossi poussant les autres sur les cotés et quand on reclique sur l'image celle-ci redevient comme au début

Réponse 18 / 42

Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
21 avril 2009 à 11:49

ah... ça y est ! ( ouf... comme quoi le proload est à sucrer ! )
en fait de galerie, ce sont des images affichées, dont l'opacité
change au survol et qui s'agrandit lors du click ( avec un ch'tiot
effet ... )
donc, tu dois mal appeler la fonction diap.init lors de ta boucle
comment fais-tu pour "rentrer les adresses des images une par une" ?
( sinon, il faut que j'aille décortiquer tes .js ... )
@+

Réponse 19 / 42

loblobloblob Messages postés 77 Date d'inscription mardi 7 avril 2009 Statut Membre Dernière intervention 18 mars 2010
21 avril 2009 à 12:05

onload = function () {

diap.init("screen", 2,2, "", [

        ["dossier/nom-01.jpg", ""],

        ["dossier/nom-02.jpg", ""],

        ["dossier/nom-03.jpg", ""],

        ["dossier/nom-04.jpg", ""],

]);

}

A la place du for (var=1 ...) avec le tableau

Réponse 20 / 42

Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
21 avril 2009 à 12:32

je ne fais que pour ce que tu nous montres !
simplifions d'abord

l'appel :
diap(    [    ["dossier/nom-01.jpg", ""],
              ["dossier/nom-02.jpg", ""],
              ["dossier/nom-03.jpg", ""],
              ["dossier/nom-04.jpg", ""],
          ]
     );
la fonction :
function diap(t)
{    alert(t);    }

on peut donc faire ( par exemple )
var t=new Array();
for ( var n=0;n<4;n++)
{    t.push("dossier/nom-0"+(n+1)+".jpg");    }
diap (t);

c'est une Array qu'on passe comme paramètre.

Pb de préchargement des images

42 réponses

Votre réponse

Discussions similaires