Bonjour,

étant graphiste print et débutant dans ce vaste univers du web, je suis en train de mettre au point mon portfolio, via un tuto que vous avez proposé. Tout marche niquel, cependant, lorsque je clique sur un icone d'image (pour visualiser en grand une image ou un autre), le scroll de mon navigateur web remonte constamment et cela crée une navigation "galère".

Le mieux est de le tester soit-même: PORTFOLIO ICI

Merci de m'éclairer sur la manipulation à suivre afin d'améliorer ce système de portfolio accessible pour un novice tel que moi!

7 réponses


n'oublie pas de mettre un return false dans la fonction click()

slt,

$(document).ready(function(){
    $("#gallery_big img").hide();

    $("#gallery a").click(function(b){ // n'oublie pas de rajouter le "b", ou toute autre chose
        b.preventDefault(); // stop le comportement par défaut du navigateur, surtout ici sur un lien ;)
    if (
        $("#" + this.rel).is(":hidden")) {
        $("#gallery_big img").hide();
        $("#" + this.rel).show();
    }

    });
});

en espérant que sa fonctionne un peu mieux :)

pour info : event.preventDefault.

Have fun

woofer01
Auteur

Merci beaucoup pour ces informations précieuses, mais au final, ce type de rendu ne correspond pas à mes attentes..

Aussi, je me suis penché sur un autre type de box, et je suis tombé sur LIGHTBOX, mais là encore, j'ai un gros bug à l'affichage:

=>Voici le rendu souhaité: ICI

=>Et voici mon rendu aprés intégration...: ICI

(on peut aussi remarquer que le design, sur la page portfolio, ne se décalle pas (en l'occurence le tableau blanc de mon contenu, en bas) comparé aux autres pages ou il y'a une petite marge entre la feuille "dépliant" et le pied de celle-ci (2 images donc 2 div). Si vous avez 2sec pour regarder ceci, je vous en remercie d'avance!

Merci encore pour la rapidité de l'aide apportée, qui plus est, pertinente!

ha, lightbox :/
je ne l'utilise pas depuis que je connais la lib maison made in grafikart -> ZoomBox.

Par contre désolé, je n'est pas trop le tps aujourd'hui de voir pkoi ta page bug comme sa... Essaye la zoombox de GA, tu trouvera pas mal d'info et de tutos pour son utilisation ici même.

Si tu ne souhaite pas changer tu peux toujours essayer une autre "box" lightBox2, je me souviens l'avoir utilisée a l'époque est son intégration n'avais pas posé de problème particulier.

Concernant la petite marge, je n'ai pas tout bien compris, mais sauf erreur cf ton CSS :

#conteneur {
width: 970px;
margin: auto;
}

tu dois avoir un hauteur limite, et vu que tu n'as mis ni margin/padding, je suppose que qd il a pas la place il colle les 2... (contenu 1 & 2)

woofer01
Auteur

Meme problème avec ZOOMBOX.... :/

Pour la "marge, en gros, ma <div id="conteneur"> comprend le contenu du site (texte...). L'image intégrée (tableau blanc transparent) est divisé en 2: <div id="contenu">, image extensible à l'infini pour le contenu textuel, et <div id="contenu2"> qui correspond au pied du tableau. Et les 2 ne se calent pas l'un aprés l'autre, il y'a une petite marge entre les 2..

ha, mince, je pensais que c'été fait volontaire la marge :/.
Ton conteneur faut lui mettre : height: 100%;

Concernant la lightbox, je dois avouer que je n'ai pas trouvé de solution. C'est assez inattendu comme pb...
Vérifie aussi ton HTML, t'as peut être une div ou un span,etc... mal fermé, ou dans ton JS... Mais normalement se comportement n'apparait pas, l'éditeur du plug à du prévoir de passer au dessus du CSS quelqu'il soit..

woofer01
Auteur

Idem... Rien à faire, j'ai beau avoir regardé TOUTE les balises, rien! J'attends peut-etre que "Grafikart" passe par-là et qu'il examine ceci, sait-on jamais, avec son regard expert. En attendant, je continue de chercher, en vain...