Execution jQuery

Bonjour,

je travaille actuellement sur un site et je dois centrer des images horizontalement (facile

) et verticalement ... la c'est déjà plus chiant car j'ai différente taille d'image et différente largeur. Enfin j'ai tout d'abord cherché à faire avec du css et vertical-align mais sans trop de réussite. Je me tourne donc vers le jQuery car j'étais quasi sur de trouver une solution, ce qui a été le cas mais je n'y ai pas trouvé total satisfaction.

Je vous met une petite image du site pour voir ce qu'il se passe.
Image utilisateur

Lorsque je passe sur l'image miniature du bas j'affiche une grande en dessus. Grace au jQuery il l'aligne horizontalement et verticalement SAUF la première foi ...

<script type="text/javascript">//<!--
/* Au chargement du docuement */
$(document).ready(function() {
	$("#photo").vAlign();
	$("#photo").hAlign();
	
	/* A chaque foi que l'on passe sur un miniature */
	$(".miniature").mouseover(function() {
		$("#photo").vAlign();
		$("#photo").hAlign();
	});
});

/* fonction d'alignement vertical */
(function ($) {
$.fn.vAlign = function() {
return this.each(function(i){
var h = $(this).height();
var oh = $(this).outerHeight();
var mt = (h + (oh - h)) / 2;
$(this).css("margin-top", "-" + mt + "px");
$(this).css("top", "50%");
$(this).css("position", "absolute");
});
};
})(jQuery);

/* fonction d'alignement horizonzal */
(function ($) {
$.fn.hAlign = function() {
return this.each(function(i){
var w = $(this).width();
var ow = $(this).outerWidth();
var ml = (w + (ow - w)) / 2;
$(this).css("margin-left", "-" + ml + "px");
$(this).css("left", "50%");
$(this).css("position", "absolute");
});
};
})(jQuery);
//--></script>

Ma question est donc est t il possible de faire charger le script et simuler son exécution une premiere foi avant que l'utilisateur passe dessus ? Car la la premiere foi que l'on passe sur une miniature l'alignement ne se fait pas correctement mais la seconde foi et plus c'est parfait.

Si jamais vous avez besoin du code qui fait référence je vous le met aussi

<div class="photo">
            <img id="photo" src="images/stories/<?php echo $folder ?>/<?php echo $this->rows->photo2; ?>" style="max-width:800px; max-height:500px;" />
        </div>
    </div>
    <div id="min_bas">
        <div class="nom_projet">
            <?php echo $this->rows->nom_projet; ?>	
        </div>
        <div class="miniatures">
            <div class="miniature <?php if($this->rows->photo2 == '') echo 'cache' ?>" id="miniature_first" ><img src="images/stories/<?php echo $folder ?>/<?php echo $this->rows->photo1; ?>" onmouseover= "document.getElementById('photo').src='../images/stories/<?php echo $folder ?>/<?php echo $this->rows->photo2; ?>'" /></div>
            <div class="miniature <?php if($this->rows->photo4 == '') echo 'cache' ?>" id="miniature_last" ><img src="images/stories/<?php echo $folder ?>/<?php echo $this->rows->photo3; ?>" onmouseover= "document.getElementById('photo').src='../images/stories/<?php echo $folder ?>/<?php echo $this->rows->photo4; ?>'" /></div>
            <div class="miniature <?php if($this->rows->photo6 == '') echo 'cache' ?>"><img src="images/stories/<?php echo $folder ?>/<?php echo $this->rows->photo5; ?>" onmouseover= "document.getElementById('photo').src='../images/stories/<?php echo $folder ?>/<?php echo $this->rows->photo6; ?>'" /></div>
            <div class="miniature <?php if($this->rows->photo8 == '') echo 'cache' ?>"><img src="images/stories/<?php echo $folder ?>/<?php echo $this->rows->photo7; ?>" onmouseover= "document.getElementById('photo').src='../images/stories/<?php echo $folder ?>/<?php echo $this->rows->photo8; ?>'" /></div>
            <div class="miniature <?php if($this->rows->photo10 == '') echo 'cache' ?>"><img src="images/stories/<?php echo $folder ?>/<?php echo $this->rows->photo9; ?>" onmouseover= "document.getElementById('photo').src='../images/stories/<?php echo $folder ?>/<?php echo $this->rows->photo10; ?>'" /></div>
            <div class="miniature <?php if($this->rows->photo12 == '') echo 'cache' ?>"><img src="images/stories/<?php echo $folder ?>/<?php echo $this->rows->photo11; ?>" onmouseover= "document.getElementById('photo').src='../images/stories/<?php echo $folder ?>/<?php echo $this->rows->photo12; ?>'" /></div>
            <div class="miniature <?php if($this->rows->photo14 == '') echo 'cache' ?>"><img src="images/stories/<?php echo $folder ?>/<?php echo $this->rows->photo13; ?>" onmouseover= "document.getElementById('photo').src='../images/stories/<?php echo $folder ?>/<?php echo $this->rows->photo14; ?>'" /></div>
            <div class="miniature <?php if($this->rows->photo16 == '') echo 'cache' ?>"><img src="images/stories/<?php echo $folder ?>/<?php echo $this->rows->photo15; ?>" onmouseover= "document.getElementById('photo').src='../images/stories/<?php echo $folder ?>/<?php echo $this->rows->photo16; ?>'" /></div>
            <div class="miniature <?php if($this->rows->photo18 == '') echo 'cache' ?>"><img src="images/stories/<?php echo $folder ?>/<?php echo $this->rows->photo17; ?>" onmouseover= "document.getElementById('photo').src='../images/stories/<?php echo $folder ?>/<?php echo $this->rows->photo18; ?>'" /></div>
            <div class="miniature <?php if($this->rows->photo20 == '') echo 'cache' ?>"><img src="images/stories/<?php echo $folder ?>/<?php echo $this->rows->photo19; ?>" onmouseover= "document.getElementById('photo').src='../images/stories/<?php echo $folder ?>/<?php echo $this->rows->photo20; ?>'" /></div>
            <div class="miniature <?php if($this->rows->photo22 == '') echo 'cache' ?>"><img src="images/stories/<?php echo $folder ?>/<?php echo $this->rows->photo21; ?>" onmouseover= "document.getElementById('photo').src='../images/stories/<?php echo $folder ?>/<?php echo $this->rows->photo22; ?>'" /></div>
            <div class="miniature <?php if($this->rows->photo24 == '') echo 'cache' ?>"><img src="images/stories/<?php echo $folder ?>/<?php echo $this->rows->photo23; ?>" onmouseover= "document.getElementById('photo').src='../images/stories/<?php echo $folder ?>/<?php echo $this->rows->photo24; ?>'" /></div>
            <div class="miniature <?php if($this->rows->photo26 == '') echo 'cache' ?>"><img src="images/stories/<?php echo $folder ?>/<?php echo $this->rows->photo25; ?>" onmouseover= "document.getElementById('photo').src='../images/stories/<?php echo $folder ?>/<?php echo $this->rows->photo26; ?>'" /></div>
        </div>

D'avance merci pour ceux qui vont ce casser la tête dessus =)

Biwaa

14 février 2011 à 14:57:40

MKBB

14 février 2011 à 18:06:50

Et si tu met les divs conteneurs de tes images en

{
     display:table-cell 
     vertical-align:middle; (ou center je sais pu)
}

ça fonctionne pas ?

15 février 2011 à 7:47:19

Non... et je sais pas pourquoi ... je dois bien le mettre sur la div qui est parente à l'image ou bien ?

17 février 2011 à 15:25:55

normalement c'est sur la div parente (celle qui contient directement l'image).
Tu as une version en ligne qu'on peut voir ?

problème avec modification de css

Execution jQuery

Supprimer

Modérer

Signaler le message aux modérateurs