Zoombox centré

Afin de fixer l'image il suffit d'ajouter ce code dans le css

#zoombox .zoombox_container{
    position:fixed;
        margin-top:0!important;
    z-index:100;
}

Le important permet de prendre le dessus sur la valeur margin-top qui est défini dans zoombox.js. Il est tout à fait possible d'aller aussi supprimer le margin-top dans le code javascript. Mais je penses que c'est plus simple ainsi :)

pas vraiment besoin de javascript.

je ne connais pas zoombox mais à mon avis il suffi d'ajouter en css un position:fixed sur le container principal

Je n'y avais pas pensé c'est pourtant la chose la plus simple qui existe c'est vrai, je vais voir si je peux trouver ça.

<u>Edit :</u> Je n'ai pas trouvé je suis toujours preneur de solution ...

Bonjour.

Je confirme ce qu'a dit jbou43.
Mais tu peux aussi le faire en jquery si tu veux animé le "recentrage".

CSS

.zoomBox{
    position:fixed;
}

Jquery

//avec une div de style
        <div id="zoombox" style="height:50px; width:50px; position:relative; left:50%; top:400px; background-color:red;"></div>
        //code js
    $(function(){
        $(this).bind('scroll',function(event){
        var newPosition = 400+window.pageYOffset+'px';
            $('#zoombox').animate({'top':newPosition});
        });
    });

P.S: J'ai utiliser un petit carré rouge comme zoombox, il va de soit que tu dois ajouté la zoombox. Je ne t'ai montrer qu'une solution pour centré un element.
Attention, ne pas oublis d'ajouté jquery UI j'ai utilisé .animate() pour donner un effet visuel sympas.

Ce code ne fixerait pas juste les images dans la pages plutôt ?

.zoomBox{  
        position:fixed;  
    }

Ce code fixe un élément tous court. Sa peut fixé un contenaire par exemple (div).
Si tu as des conflits je t'invite a démarrer d'un exemple plus symple pour le mieux le comprendre et ensuite d’intégrer ta zoombox.
Oublis pas que tu peux appliquer du CSS avec Jquery quand bon te semble (ex: quand l'image est bien centré).

En fait je sais utiliser position:fixed mais je l'ai testé à différents endroits dans le CSS de zoombox. Je suis pas foutu de trouver où le mettre car même dans la div.container comme elle est en position:absolute ça veut dire que ça va interagir avec une autre div qui elle sera en position:relative.

J'espère avoir été assez clair ...

Merci pour ton aide en tout cas.

Sans exemple dure de dire mais si ton bloc parent est en absolue pas de problème. En relative il faut alors jouer sur des flottants.
Montre ton code.

Le bloc .container est bien en absolute mais on ne peut pas combiné un postion:absolute et un position:fixed ou je me trompe ?

Ha nn ^^ j'avais pas vus que je l'avais laisser.
Non pas du tout, sauf si tu en as besoins. Mais dans l'exemple du dessus pas obliger.

Bonjour,

Pour l'exemple d'un contenante déplaçable j'avais utilisé de l'absolute. Mais tu peux utilisé "fixed" normalement tu ne perturbe pas le flux.

J'ai jeter un rapide coup d'oeil sur la version de grafiakrt.
J'ai ajouter ligne 36 dans la generation de code html

<div class="container" id="containerX">\

Dans la fonction

function load(){}

j'ai ajotué en dessous du timer une fonction

centrage();

Et toute à la fin du code:

function centrage(){
        $(this).bind('scroll',function(event){
            //récupération la valeur du scrool + adition du top
            var POS = $('html').scrollTop()+118+'px';
            $('#containerX').animate({'top':POS},250);
        }); 
}

A retravailler bien sur ! étant donner qu'il faut le rendre compatible; recalculer la valeur du Top de la nouvelle boite (lors du changement d'image).
Mais avec un peu de travail et une bonne relecture/comprehension du code tu devrais arriver au rendu que tu veux.

Ah cool je crois avoir compris et je vais essayer de bidouiller ça, si ce n'est la fonction "bind()" sert a quoi ?

C'est une fonction qui permet d'attacher un gestionnaire d’événement, je le préfère car il permet de faire par exemple,

$(this).bind('mouseover mouseout', fonctionOnOff);

Très bien j'arrive à saisir alors le "event" qui en entre parenthèse dans "function()" est obligatoire ?

He je n'ai pas compris ta question.

Dans ce début de code est-ce que "event" est obligatoire entre parenthèse ?

$(this).bind('scroll',function(event)

Très bien je te remercie je vais essayer de faire ça alors et je poste une solution si j'en obtiens une.

Voilà je ce que j'ai pu faire grâce à Golendercaria :

function center(){  
    $(this).bind('scroll',function(){
        var height = $('#zoombox .container').height();
        var css = {
        top : (windowH() - height) / 2,
        marginTop : scrollY(),
    };
        $('#container').animate(css,0);
    });   
}