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 ???

[masta64]

Bon je remonte le topic car j'ai plus ou moins trouver la solutions, car pour l'instant tout fonctionne mis à part quelques petits bugs et j'aimerais vous soumettre mon code pour que vous me disiez si il n'y aurait pas moyens de simplifier et par la même occasion de corriger le bug au moment du rechargement de la page avec le bouton actualiser du navigateur (rien ne s'affiche) ainsi qu'un bug au niveau des subnav (qui ne s'actualise pas avec la bonne width !!!

Donc si quelqu'un généreux de son temps et désireux d'apprendre à un débutant passe par là ;-)

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
 
$(document).ready(function() {
 
    // NAVIGATION 
 
    $('#nav').each(function() {
        var $links = $(this).find('a'),
            panelIds = $links.map(function() { return this.hash; }).get().join(","),
            $panels = $(panelIds),
            $panelWrapper = $panels.filter(':first').parent(),
            delay = 500;
 
        $panels.hide();
 
        $links.click(function() {
            var $link = $(this),
                link = (this);
 
            if ($link.is('.selected')) {
                return;
            }
 
            $links.removeClass('selected');
            $link.addClass('selected');
 
            $panels.animate({ opacity : 0 }, delay);
            $panelWrapper.animate({
                width: 0
            }, delay, function() {
                var width = $panels.hide().filter(link.hash).show().css('opacity', 1).outerWidth();
 
                $panelWrapper.animate({
                    width: width
                }, delay);
            });    
        });
 
        var showtab = window.location.hash ? '[hash=' + window.location.hash + ']' : ':first';
 
        $links.filter(showtab).click();
 
    });
 
        // SUBNAVIGATION 
 
    $('#subnav').each(function() {
        var $links = $(this).find('a'),
            subpanelIds = $links.map(function() { return this.hash; }).get().join(","),
            $subpanels = $(subpanelIds),
            $subpanelWrapper = $subpanels.filter(':first').parent(),
            delay = 500;
 
        $subpanels.hide();
 
        $links.click(function() {
            var $link = $(this),
                link = (this);
 
            if ($link.is('.selected')) {
                return;
            }
 
            $links.removeClass('selected');
            $link.addClass('selected');
 
            $subpanels.animate({ opacity : 0 }, delay);
            $subpanelWrapper.animate({
                width: 0
            }, delay, function() {
                var width = $subpanels.hide().filter(link.hash).show().css('opacity', 1).outerWidth();
 
                $subpanelWrapper.animate({
                    width: width
                }, delay);
            });    
        });
 
        var showtab = window.location.hash ? '[hash=' + window.location.hash + ']' : ':first';
 
        $links.filter(showtab).click();
 
    });

PS: ah oui j'oubliais, j'ai refait totalement le code, plus rien a voir avec le code de départ!!!