Problème zoombox - scroll horizontal

inokuda
Javascript

Bonjour à tous !

Je suis en train de créer mon portfolio, et j'ai décidé d'utiliser zoombox pour l'affichage de mes créations.
J'ai bien intégré tout le code et cela fonctionne parfaitement. Seulement je me retrouve face à un problème.

Mon portfolio est entièrement à l'horizontal. Lorsque l'on clique sur le menu, la page défile horizontalement grâce à du javascript qui permet un scroll progressif. Il se constitue de 4 "pages" (des div successives en float:left), et lorsque l'on est sur une page, on ne voit pas les autres. (j'espère que mon descriptif est clair)

Lorsque l'on est tout à gauche de mon scroll (donc sur la "div d'accueil"), le zoombox s'affiche parfaitement bien, au milieu de l'écran. Mais si je vais jusqu'à la "div réalisations", qui se trouve à environ 4000 pixels à droite, lorsque l'on clique sur une image, la zoombox part s'afficher tout à gauche, donc hors de l'écran.

J'ai zieuté un peu la page zoombox.js, je pense que mon problème nécessite la modification de la fonction "open" :

// Final position/size of the box after the animation
    var css = {
        width : width,
        height: height,
        left : (windowW() - width) / 2,
        top : (windowH() - height) / 2,
        marginTop : scrollY(),
        opacity:1
    };

Je comprends l'astuce pour centrer la zoombox sur la page quelque-soit sa taille (adaptation à la taille de l'image), mais j'ignore s'il est possible de l'afficher au milieu de l'écran, malgré le scroll horizontal.
Je n'ai pas les connaissances suffisantes pour modifier tout le code, et je n'ai pas tout saisi aux fonctions windowW et windowH.

Pensez-vous que ma requête est réalisable ? Si oui, que dois-je modifier ?
Ou avez-vous une idée d'astuce pour pallier ce problème ? (utiliser la position de ma div pour placer la zoombox par exemple...)

Merci d'avance !

1 réponse

inokuda
Auteur

Wouhou !
Désolée d'avoir posté trop vite ^^ (c'est le syndrome du cerveau en bouillie quand je code trop longtemps)

J'ai réussi à résoudre mon problème !
J'ai effectivement modifié la fonction "open" dans le fichier zoombox.js, j'ai modifié le calcul fait pour positionner l'image comme ceci :

// Final position/size of the box after the animation
    var css = {
        width : width,
        height: height,
        left : (windowW() - width) / 2+$(window).scrollLeft(),
        top : (windowH() - height) / 2,
        marginTop : scrollY(),
        opacity:1
    };

Si ça peut servir à quelqu'un... ;)