Discussion :

[masta64]

Bonjour, je suis débutant en javascript et je tente d'apprendre et de m'en sortir avec mes bouquins mais la je cale depuis trois semaine sur un petit problème que peut être vous pourrez m'aider à résoudre !!!

Voilà mon problème j'ai récupérer et modifier un javascript qui me sert pour l'instant à créer mon site et sur ce script il y a une fonction qui permet de passer d'une image à une autre (dans le sens d'insertion html) grâce à une flèche (en image) identifier grâce a son ID qui est "control" et moi je souhaiterait juste modifier cette fonction pour pouvoir placer des boutons (images) qui mèneront eux à des images bien précises (url bien précises) et pas naviguer simplement dans le sens d'insertion xhtml comme le ferais le bouton "next" d'un lecteur CD !!!

J'espère avoir été clair dans mon explications et pas trop vague !!! [cligne]

Je vous joint la partie du code :

Code js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
     function initProject(){
    $("#projects #pagination").hide();
 
    extLink = $("#projects #externalLink a:first").attr("href");
    extLinkTitle = $("#projects #externalLink a:first").attr("title");
 
    pages = [];
    $("#projects #pagination a").each(function(){
        var href = this.getAttribute('href');
        pages.push(href);
    })
 
    if (pages.length <= 1){
        $("#projects #pagination").fadeOut();
    }else{
        var width = (pages.length*61) + "px";
        $("#projects #pagination ul").animate({
            width:width
        },1);
        $("#projects #pagination").fadeIn("slow");
    }
 
    loadImgs();
 
    $("#projects #description").animate({
        opacity:1
    },{duration: 500, easing: "easeInOutQuint"}); 
 
    setTimeout(function(){
        $("#control a").animate({
            opacity:1,
            left:"48px"
        },{duration: 400, easing: "easeInOutQuint"});
        $("#project").attr("left","0px").animate({
            opacity:1,        
        },{duration: 300, easing: "easeInOutQuint"});
    },400);
 
    updateHash(curProject);
}
 
function switchImg(index){
    var position = index*512*-1;
 
    switchDot(index);
    $("#imgContainer").animate({
        opacity:0
    },{duration: 280, easing: "easeInOutQuint"}).animate({
        top:position
    },1);
    setTimeout(function(){
        $("#imgContainer").animate({
            opacity:1
        },{duration: 500, easing: "easeInOutQuint"}); 
    },300);
}
 
function switchDot(index){
    $("#projects #pagination a:not(:eq("+index+"))").animate({
        opacity:0,
    },{duration: 600, easing: "easeInOutQuint"});
    $("#projects #pagination li:not(:eq("+index+"))").animate({
        backgroundPosition: "0 0"
    },100);
 
    $("#projects #pagination a").eq(index).animate({
        opacity:1,
    },{duration: 800, easing: "easeInOutQuint"});
 
    $("#projects #pagination li").eq(index).animate({
        backgroundPosition: "0 -58px"
    },800);
    curPage = index;
}
 
function loadImgs(){
    if (loadedProjects[curProject] == "0"){
        $("#loader").fadeIn();
    }else{
        $("#loader").hide();
    }
    var loadCount = 1;
 
    for (i=0;i<pages.length;i++){
        var img = new Image();
        $(img).load(function() {
            $("#imgContainer").append(this);
            loadCount++;
            if(loadCount > pages.length){
                $("#imgContainer").animate({
                    opacity:1,
                },{duration: 800, easing: "easeInOutQuint"});
 
                if (extLink){
                    var html = $("#imgContainer").html();
                    newHTML = '<a href="'+extLink+'" title="'+extLinkTitle+'" target="_self">'+html+'</a>';
                    $("#imgContainer").html(newHTML);
                }
                loadedProjects[curProject] = 1;
                switchDot(0);
                setTimeout(function(){$("#loader").fadeOut();},800);
            }
        }).error(function () {
            // notify the user that the image could not be loaded
        }).attr('src', pages[I]);
    }
}
 
function checkHash() {
    if ((window.location.hash != recentHash)) {
        hashChange = true;
        recentHash = window.location.hash;
        var hash = window.location.hash;
        if(hash.match(mark)){
            var splitHash = hash.split(/\?/);
            var section = splitHash[0];
            var item = splitHash[1];
            //directTo(section, item);
            if(section == '#portfolio'){
                path = pathPrefix + item + '.html';
                var projectIndex = jQuery.inArray(path, projects);
                curProject = projectIndex;
                $("#projects").load(path,initProject);
            }
        }
    }else{
        hashChange = false;
    }
}
 
function updateHash(index){
    var path = projects[index];
    path = path.replace(/static\/portfolio_/,'');
    path = path.replace(/.html/,'');
    recentHash =  window.location.hash = '#portfolio?'+path;
}

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

attr('src', pages[I]);

tu est dans une boucle sur i ...
il vient d'ou le I ?

ensuite à priori pour aller à la page de ton choix il suffit de passe l'indice de la page i ...

[masta64]

Merci à toi de m'aider, très gentil de prendre de ton temps pour ca !!! ;-)


Alors pour tenter de comprendre (car je te rappel que je débute , du moins je tente) , à priori le "i" provient d'une fonction implémenter qui permet d'avoir une petite fonction cacher, voici le code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
// right arrow - to next project
$(document).bind('keydown', 'right', function(){
    $("#control a").click();
    return false;
});
 
$(document).bind('keydown', 'l', function (evt){cheatcode = cheatcode + "l";});
$(document).bind('keydown', 'o', function (evt){cheatcode = cheatcode + "o";});
$(document).bind('keydown', 'g', function (evt){cheatcode = cheatcode + "g";});
$(document).bind('keydown', 'i', function (evt){cheatcode = cheatcode + "i";});
$(document).bind('keydown', 'n', function (evt){cheatcode = cheatcode + "n";});
$(document).bind('keydown', 'return', function (evt){checkCode();});

Et voici les variables placé au début du js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
/* Variables */
var showAbout = false;
var curLogo = 0;
var cheatcode = "";
var totalProjects;
var projects = [];
var loadedProjects = [];
var pages = [];
var curProject = 0;
var curPage = 0;
var extLink;
var logoIsAnimate = false;
var logoIsMouseOver = false;
var recentHash = '';
var hashChange = false;
var mark = /\?/;

Par contre pourrait tu soit tenter de m'expliquer assez simplement ou me filer un ti exemple pour que je comprenne le principe et que je m'en inspire ensuite car la j'avoue que c'est un peu flou pour moi !!!

PS: ah oui j'oubliais mais je pense que tu l'avait compris, la fonction caché permet de se logger quelque part , ;-)

[SpaceFrog]

i majuscule I pas L minuscule ...
dans ta fonction c'est l

là on est dans un tableau d'indices qui attend un integer qui se trouve dasn la variable i incrémentée ...

[masta64]

Waouh alors la , tu me pose une colle, en plus je pige pas grand choses !
Mais apparemment ca devrais être une page d'erreur personnalisé qui serait chargé en cas d'erreur de chargement, non ?

[masta64]

Ah mais ca doit venir du jquery.min !!!

Mais non en fait ca doit vouloir dire qu'il passe à l'image suivante si il ne trouve pas l'image ???