Salut,
J'ai écrit un solution javascript avec jQuery pour obtenir des images popup positionnées au centre de l'écran et qui se replacent en cas de redimensionnement de la fenêtre ce qui devrait régler les différences entre tablettes et desktop.
Je l'utilise actuellement sur ce site
les Choses de l'Astronomie si tu veux voir sur une situation en réel pour des images et pour googlemap.
Je te laisse essayer le code ci-dessous où j'ai mis en situation le javascript
J'espère que ça répond à ton problème
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Centrer les pop-up à l'affichage</title>
<style type="text/css">
.btn-close {
display: none;
position: absolute;
top: -10px;
right: -10px;
height: 30px;
width: 30px;
line-height: 30px;
text-align: center;
font-family: arial;
font-size: 20px;
font-weight: bold;
background: #fff;
border-radius: 30px;
cursor: pointer;
}
img {max-width: 100%;}
</style>
</head>
<body>
<div id="main" >
<ul>
<li><a href="http://cdpresse.fr/wp-content/uploads/2010/12/Melies-le-voyage-dans-la-lune.jpg" class="img pop">La Lune</a></li>
<li><a href="http://system.solaire.free.fr/soleil10.jpg" class="img pop">Le Soleil</a></li>
<li><a href="http://www.notre-planete.info/actualites/images/planete/globe_west_2048NASA.jpg" class="img pop">La Terre</a></li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//=======================================================
// Gestion de l'affichage "popup"
//=======================================================
var popup = {
divPop: "",
init : function() {
// Affichage des images à fournir en pop-up désignées par la classe .img
if ($(".img").length > 0) {
// Préchargement des images afin d'avoir accès aux dimensions
var i=0;
var image = new Array();
$(".img").each(function(){
//(new Image()).src = this;
image[i] = new Image();
image[i].src = this;
i++
});
console.log(image[0]);
// Mise en place des gestionnaires d'évènement pour appel à fonction img() lors du click
$(".img").on('click', function(){
popup.img($(this).attr("href"));
return false;
});
}
},
img : function(href) {
// Ajoute la div dans la div principale
$("#main").append('<div class="popup img"><img src="'+href+'" alt=" "/></div>');
popup.divPop = $("div.popup");
// appel fonction show()
this.show();
},
show : function(){
// définition des css pour la div d'opacité "wrapFade"
var cssWrapFade = {
"position": "fixed",
"display": "none",
"height": "100%",
"width": "100%",
"z-index": 1000,
"background": "#000",
"opacity": "0.5",
"left": 0,
"top": 0
};
// définition des css temporaires...
var cssDivPopup = {
"position": "fixed",
"z-index":10000,
"opacity": 1,
"max-width": "80%",
"margin": "0"
};
// insertion de la div d'opacité
$("body").append('<div id="wrapFade"></div>');
// affichage de la div d'opacité et insertion du bouton X
$("#wrapFade").css(cssWrapFade).fadeIn();
// affichage de la div popup
popup.divPop.css(cssDivPopup);
// Appel de la fonction responsive()
// pour adaptation de la position de la div
// en fonction de la dimension disponible à l'affichage
cssRespons = popup.responsive();
// On cache puis on applique les css et on affiche
popup.divPop.hide()
.css(cssRespons).delay(500)
.fadeIn()
.prepend('<span class="btn-close">X</span>');
$("span.btn-close").hide().delay(700)
.fadeIn();
// Ajout gestionnaire event close sur fond et X
$("span.btn-close, #wrapFade").on("click", function(){
popup.close();
});
},
close : function(){
$("#wrapFade").fadeOut(function(){
$(this).remove();
});
popup.divPop.fadeOut(function(){
$(this).remove();
});
},
responsive : function(){
// On récupère les dimensions avec les bordures en outer
var width = -(popup.divPop.outerWidth())/2+"px";
var height = -(popup.divPop.outerHeight())/2+"px";
return ({
"left": "50%",
"top": "50%", // centrage au milieu
"margin-top": height, // puis décalage d'une moitié de hauteur
"margin-left": width,
});
}
};
//=======================================================
// Gestion des effets du redimensionnement de la fenêtre
//=======================================================
$(window).resize(function(){
// gestion du redimensionnement du popup
if (popup.divPop.length !== 0){
popup.responsive();
}
});
//=======================================================
// Lancement s'il y a des éléments à pop-upper !
//=======================================================
if ($(".pop").length !== 0){
popup.init();
}
})();
</script>
</body>
</html>
[/i][/i]
Modifié par ArnoldM (01 Nov 2012 - 00:31)
