<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GALERIE PHOTOS</title>
<link href="css/style_general.css" rel="stylesheet" type="text/css" />
<link href="css_pirobox/style_5/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js_gallery/jquery_1.5-jquery_ui.min.js"></script>
<script type="text/javascript" src="js_gallery/pirobox_extended_feb_2011.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$.piroBox_ext({
	piro_speed :700,
	bg_alpha : 0.5,
	piro_scroll : true,
	piro_drag :false,
	piro_nav_pos: 'bottom'
});
});
</script>

<style type="text/css">#the_gallery{margin-left:auto;
margin-right:auto;
background:#fff;
width:1100px;
height:750px;
overflow-y:scroll;
text-align:center;
}

#the_gallery:hover{background:#ddd;}

#the_gallery img{margin:10px;}

#the_gallery p{
	
	min-width:300px;
	max-width:870px;
height:auto;
padding:10px;
padding-left:40px;
padding-right:30px;
background:#777;
float:left;
display:inline;
font-size:40px;
color:#fff;
line-height:45px;
border-radius:15px;
margin-left:-15px;
box-shadow:1px 1x 10px #eee;}

#retour{width:100px;
height:22px;
background:blue;
color:#fff;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
margin-top:20px;
padding:5px;
color:#fff;
text-align:center;
border-radius:8px;
}

#retour:hover{background:#d93a1b;}

#retour a{color:#fff;
font-size:17px;
text-decoration:none;}

 img.zoomEffect {
-moz-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}

img.zoomEffect:hover {
-moz-transform: rotate(0deg) scale(1.1);
-webkit-transform: rotate(0deg) scale(1.1);
-o-transform: rotate(0deg) scale(1.1);
-ms-transform: rotate(0deg) scale(1.1);
transform: rotate(0deg) scale(1.1);
}



</style>

</head>
<body style="background:#777;">
<div id="retour"><a href="galerie_photos.php">Retour</a></div>
<div id="the_gallery" style="width:1000px; text-align:center;">

<div id="gallery">

    <?php 
	     if(isset($_GET['mark']))
  {
include('connexion_mysql.php'); 
$retour = 'SELECT description FROM galerie WHERE id="'.$_GET['mark'].'"';
$res = $conn->query($retour);
while ($donnees = mysqli_fetch_array($res)) // On fait une boucle
{$description = stripslashes($donnees['description']);}?>

<p><?php echo $description; ?></p>

<ul style="list-style:none; float:left; margin-top:10px;background:transparent; width:1000px; height:auto; margin-left:-20px; padding-bottom:20px;">
&nbsp;&nbsp;<a href="#" style="float:left; text-decoration:none;">Cliquez sur une photo pour l'agrandir </a><br />
       <?php 
$retour1 = 'SELECT * FROM photosplus WHERE id_galerie="'.$_GET['mark'].'"';
$res = $conn->query($retour1);
while ($donnees = mysqli_fetch_array($res)) // On fait une boucle
{$photo = stripslashes($donnees['photo']);
echo'<li>
        <a href="uploads/'.$photo.'" rel="gallery"  class="pirobox_gall" title="" style="width:600px; height:600px;">
            <img class="zoomEffect" src="uploads/'.$photo.'" style="height:200px; border:4px solid #fff; box-shadow:1px 1px 5px #ddd;"  />
        </a>
    </li>';}}?>
	
    

</ul>

    
    </div>
   

</div>
</body>
</html>
