From afc3b17ae3c5a3ea39ca4f8a3510dbc6c3ccd354 Mon Sep 17 00:00:00 2001 From: Julie Choquet <julie.choquet@ensiie.fr> Date: Sun, 8 May 2016 16:40:16 +0200 Subject: [PATCH] click photo dans mes identifications --- Timeline/carousel.php | 7 +++- Timeline/css/modal.css | 5 +++ Timeline/js/modal.js | 2 +- Timeline/mes_posts.php | 74 +++++++++++++++++++++++++++++++++++++++++- Timeline/timeline.php | 17 ++-------- 5 files changed, 88 insertions(+), 17 deletions(-) diff --git a/Timeline/carousel.php b/Timeline/carousel.php index ccab2c2..223c31b 100755 --- a/Timeline/carousel.php +++ b/Timeline/carousel.php @@ -120,6 +120,11 @@ $i=0; foreach ($photos as $pic) { + + $tab = $tabPhotos[$i]; + $id = $tab[2]; + $idsoiree = $tab[6]; + if($i == 0) { echo "<div class='active item' data-slide-number='$i'>"; @@ -128,7 +133,7 @@ { echo "<div class='item' data-slide-number='$i'>"; } - echo "<img src='$pic' class='img-responsive img-rounded' style='margin:0px auto;max-height:350px;'/>"; + echo "<img src='$pic' id='$id' idsoiree='$idsoiree' class='img-responsive img-rounded' style='margin:0px auto;max-height:350px;' data-toggle='modal' data-target='#myModal'/>"; echo '</div>'; $i=$i+1; } diff --git a/Timeline/css/modal.css b/Timeline/css/modal.css index 8d0662b..ee521fc 100755 --- a/Timeline/css/modal.css +++ b/Timeline/css/modal.css @@ -43,3 +43,8 @@ border-bottom-left-radius: 4px; } +img { + margin-right: auto; + margin-left: auto; + max-height: 400px; +} \ No newline at end of file diff --git a/Timeline/js/modal.js b/Timeline/js/modal.js index 5bb45d3..cc72ba2 100755 --- a/Timeline/js/modal.js +++ b/Timeline/js/modal.js @@ -7,7 +7,7 @@ $(document).ready(function (){ var src = $(this).attr('src'); var idphoto = $(this).attr('id'); - var idsoiree = '<?php echo $idsoiree; ?>'; + var idsoiree = $(this).attr('idsoiree'); $('#image-content').html('<div class="thumbnail"><img src="' + src + '" class="img-responsive" /></div>'); diff --git a/Timeline/mes_posts.php b/Timeline/mes_posts.php index cbe0090..206ea42 100755 --- a/Timeline/mes_posts.php +++ b/Timeline/mes_posts.php @@ -8,7 +8,7 @@ function getPhotosMesPosts($db) { $id=$_SESSION['login']; - $stmt = $db->query("SELECT soiree.annee, soiree.name, photo.idphoto, photo.extension, photo.composteur, soiree.theme FROM photo INNER JOIN soiree ON photo.idsoiree=soiree.idsoiree WHERE photo.idposteur='$id'"); + $stmt = $db->query("SELECT soiree.annee, soiree.name, photo.idphoto, photo.extension, photo.composteur, soiree.theme, soiree.idsoiree FROM photo INNER JOIN soiree ON photo.idsoiree=soiree.idsoiree WHERE photo.idposteur='$id'"); $stmt->setFetchMode(PDO::FETCH_NUM); $result = $stmt->fetchAll(); return $result; @@ -58,10 +58,12 @@ <!-- Js carousel --> <script src="js/carousel.js"></script> + <script type="text/javascript" src="js/modal.js"></script> <!-- fichier css perso --> <link rel="stylesheet" href="css/menu.css"> <link rel="stylesheet" href="css/mes_posts.css"> + <link rel="stylesheet" type="text/css" href="css/modal.css"> </head> @@ -82,9 +84,79 @@ echo '<div class="col-sm-3">'; echo '<button class="btn btn-default btn-block" id="button"><a href="ajout.php">Poster une photo</a></button>'; echo '</div>'; + echo '</div>'; } ?> + <div id="myModal" class="modal fade" role="dialog"> + <div class="modal-dialog modal-lg"> + + <div class="modal-content"> + + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal">×</button> + <h4 class="modal-title"></h4> + </div> + + <div class="modal-body"> + <div class="row"> + <div class="col-lg-12 col-sm-12" id="image-content"> + <!-- Va contenir l'image --> + </div> + <div class="col-lg-12 col-sm-12 hidden-xs"> + <div> + <div id="com-content" class="container-fluid"> + <div class="row"> + + <div class="comment-tabs"> + <ul class="nav nav-tabs" role="tablist"> + <li class="active"><a href="#list-comment" role="tab" data-toggle="tab"><h4>Commentaires</h4></a></li> + <li><a href="#add-comment" role="tab" data-toggle="tab"><h4>Ajouter un commentaire</h4></a></li> + </ul> + <div class="tab-content"> + <div class="tab-pane active" id="list-comment"> + <ul class="media-list" style="overflow-y: scroll; max-height: 240px;"> + + </ul> + </div> + <div class="tab-pane" id="add-comment"> + <form action="#" method="post" class="form-horizontal" id="commentForm" role="form"> + <div class="form-group"> + <label for="email" class="col-sm-2 control-label">Commentaire</label> + <div class="col-sm-10"> + <textarea class="form-control" name="addComment" id="addComment" rows="5"></textarea> + </div> + </div> + <div class="form-group"> + <div class="col-sm-offset-2 col-sm-10"> + <button class="btn btn-success btn-circle text-uppercase" type="submit" id="submitComment"><span class="glyphicon glyphicon-send"></span>Envoyer</button> + </div> + </div> + </form> + </div> + + </div> + </div> + </div> + </div> + </div> + + </div> + + </div> + </div> <!-- close modal body --> + + <div class="modal-footer"> + <button class='btn btn-primary vote' data-toggle='tooltip' title='Vote pour la photo la plus trash'>Trash<span class='badge'>15</span></button> + <button class='btn btn-primary vote' data-toggle='tooltip' title='Vote pour la photo où ça pécho sec'>Love<span class='badge'>15</span></button> + <button class='btn btn-primary vote' data-toggle='tooltip' title='Photo de toute beauté'>Like<span class='badge'>15</span></button> + </div> + + </div> + + </div> + </div> + <?php include 'footer.php'; ?> diff --git a/Timeline/timeline.php b/Timeline/timeline.php index cc5527c..dc4b77d 100755 --- a/Timeline/timeline.php +++ b/Timeline/timeline.php @@ -63,19 +63,8 @@ } - function test($tab) { - foreach($tab as $a) - { - - - echo $a[0].$a[1]. PHP_EOL; - - } - } - - - function printTimeline($tab, $annee, $name) { + function printTimeline($tab, $annee, $name, $idsoiree) { // $tab[0] idphoto // 1 extension @@ -140,7 +129,7 @@ echo "<div class='timeline-panel'>"; echo "<div class='timeline-heading'>"; - echo "<img class='img-responsive' src='$path' id='$idphoto' data-toggle='modal' data-target='#myModal'/>"; + echo "<img class='img-responsive' src='$path' id='$idphoto' idsoiree='$idsoiree' data-toggle='modal' data-target='#myModal'/>"; echo '</div>'; echo "<div class='timeline-body'>"; echo "<blockquote><p>".$com."</p><footer>D'après ".$surnom."</footer></blockquote>"; @@ -260,7 +249,7 @@ </div> <ul class="timeline"> - <?php printTimeline($tabOrd, $annee, $name); ?> + <?php printTimeline($tabOrd, $annee, $name, $idsoiree); ?> <li class="clearfix" style="float: none;"></li> </ul> -- GitLab