javascript - How to show one image in modal -
<div class="row mt-xlg"> <h5 class="text-semibold text-uppercase mt-lg">timeline photos</h5> <?php $query1="select * user_photos_offline ssmid='$ssmid' , status='1' order date_uploaded desc"; $sql=mysql_query($query1); $count=mysql_num_rows($sql); $results=array(); while($row=mysql_fetch_assoc($sql)){ // $results[]=$row['image']; ?> <div class="col-md-3"> <img src="upload_images/<?php echo $row['image']?>" class="img-responsive" id='image' alt="" style='height:200px;' data-toggle="modal" data-target="#largemodal"> <!--here got images database--> <!--for example got total 10 images database--> <!--for example clicking 3rd image of tatal 10 images--> <div class="modal fade" id="largemodal" tabindex="-1" role="dialog" aria-labelledby="largemodallabel" aria-hidden="true" style="display: none;"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="largemodallabel">original image</h4> </div> <div class="modal-body"> <img src="img/girl.png" class="img-responsive" id='image' alt="" style='height:400px;width:100%'> <!--from here want show 3rd image of tatal 10 images--> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> </div> </div> </div> </div> </div> <?php } ?> </div>
i had fetch database tatally 10 images,if clicking 3rd image means,i want show third images,i dont know write code question know means tell me friends
you must add 1 modal @ end of page (out side of loop) , add each image of list without modal:
<img src="upload_images/<?php echo $row['image']?>" class="img-responsive" alt="" onclick="showimg('upload_images/<?php echo $row['image']?>')">
then need java-script snip code:
function showimg(url) { //load image $('.modal-body img').attr('src',url); //show modal $('#largemodal').modal(); }
i hope you
Comments
Post a Comment