Image popup Site Web [dimensions]
bonjour,
voilà j'ai fait un site pour une sociète d'antiquité et j'ai fait une sorte de galerie d'images pour les meubles qu'ils vendent. Donc, lorsqu'on clic sur une image, celle-ci s'ouvre en grand.
Mon souci c'est que quand je test le site sur une résolution plus grande, l'image est trop grande et on ne peut même pas remonter en haut. Comme si elle était mangé d'en haut, on ne peut voir que le bas.
voici le code de la page
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| <div id="contenu">
<p class="present_page_photos">
Sur cette page vous trouverez des images du mobilier que nous avons présenté ces dernières
années et que nous continuons à chercher activement . Celà vous permettra de mieux cerner
ce que nous proposons et nous demander une recherche particulière.
</p>
<?php
$actu = $bdd->query('SELECT * FROM archives');
while($ligne = $actu->fetch()){
?>
<div class="images">
<?php
echo '<a href="#?w=1050" rel="popup_block-'.$ligne['id'].'" class="poplight1 photo"><img class="photo" src="'.$ligne['url_image'].'"/></a>';
?>
<br/>
<?php
?>
<a href="#?w=1050" rel="popup_block-<?php echo $ligne['id']; ?>" class="poplight1 descr"><br/>Agrandir...</a>
</div>
<script type="text/javascript" src="js/jquery-1.4.1.js"></script>
<div id="popup_block-<?php echo $ligne['id']; ?>" class="popup_block-<?php echo $ligne['id']; ?> popup">
<?php
if($ligne['dimension']=='3840x2160'){
?>
<img src="<?php echo $ligne['url_image']; ?>" class="photo_popup"/>
<div class="place_descr_img"><br/><?php echo $ligne['description']; ?></div>
<?php
}elseif($ligne['dimension']=='4224x2376'){
?>
<img src="<?php echo $ligne['url_image']; ?>" class="photo_popup_spec"/>
<div class="place_descr_img"> <br/><?php echo $ligne['description']; ?></div>
<?php
}else{
?>
<img src="<?php echo $ligne['url_image']; ?>" class="photo_popup_small"/>
<div class="place_descr_img_droite"> <br/><?php echo $ligne['description']; ?></div>
<?php
}
?>
</div>
<?php
}
?> |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| $(function(){
//Lorsque vous cliquez sur un lien de la classe poplight et que le href commence par #
$('a.poplight1[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Trouver la pop-up correspondante
var popURL = $(this).attr('href'); //Retrouver la largeur dans le href
//Récupérer les variables depuis le lien
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //La première valeur du lien
//Faire apparaitre la pop-up et ajouter le bouton de fermeture
$('#' + popID).fadeIn().css({
'width': Number(popWidth)
})
.prepend('<a href="#" class="close"><img src="http://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/fichiers/close_pop.png" class="btn_close" title="Fermer" alt="Fermer" /></a>');
//Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
var popMargTop = ($('#' + popID).height()) / 2;
var popMargLeft = ($('#' + popID).width()) / 2;
//On affecte le margin
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Effet fade-in du fond opaque
$('body').append('<div id="fade"></div>'); //Ajout du fond opaque noir
//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
return false;
});
//Fermeture de la pop-up et du fond
$('a.close, #fade').live('click', function() { //Au clic sur le bouton ou sur le calque...
$('#fade , .popup').fadeOut(function() {
$('#fade, a.close').remove(); //...ils disparaissent ensemble
});
return false;
});
}); |
