php - Bootstrap Photo Gallery from MySQL database -
new programming , halfway through website development course here questions not dumb. want display 4 random images mysql database (the images stored in uploads folder) , code follows. works fine laying out gallery code bootstrap not displaying images across page anymore. thx in advance help
<?php require 'includes/dbconnection.php'; $sql = "select * uploads order rand () limit 4"; $result=mysqli_query($conn, $sql) or die ('problem: '.$sql)."<br>"; ?> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/custom.css"> <title>pete's fishing adventures</title> </head> <body> <!-- header , navigation --> <?php include 'includes/header.php'; ?> <div class="container"> <!-- body text --> <header> <h3>celebrating ones got away , ones didnt</h3> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. ab libero, cupiditate veniam officiis itaque in porro iure fugit iusto reprehenderit commodi earum cum blanditiis quos error similique quod, facere! hic.</p> </header> <!-- featured carousel --> <div class="carousel slide col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1" data-ride="carousel" id="featured"> <div class="carousel-inner"> <div class="item active"><img class="img-responsive center-block" src="images/carousel1.jpg" alt="carousel1"></div> <div class="item"><img class="img-responsive center-block" src="images/carousel2.jpg" alt="carousel2"></div> <div class="item"><img class="img-responsive center-block" src="images/carousel3.jpg" alt="carousel3"></div> <div class="item"><img class="img-responsive center-block" src="images/carousel4.jpg" alt="carousel4"></div> <div class="item"><img class="img-responsive center-block" src="images/carousel5.jpg" alt="carousel5"></div> </div> <!-- carousel inner --> <a class="left carousel-control" href="#featured" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#featured" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div> <!-- featured carousel --> <div class="clearfix"> </div> <!-- photo gallery --> <div class="row"> <?php if (mysqli_num_rows($result)) { while ($row = mysqli_fetch_array($result)) { ?> <div class="col-xs-3"> <!-- gallery images --> <a class="thumbnail" href="#"> <img src="uploads/<?php echo $row['image_name'];?> " /> <div class="caption"> <h4>gallery 1</h4> <p>some text photo.</p> </div> </a> </div> <!-- end gallery image--> <?php } /* end of while statement */ } /* end if (mysqli_num_rows($result)) */ ?> </div> <!-- end $row --> <!-- end of photo gallery --> <?php } /* end of while statement */ } /* end if (mysqli_num_rows($result)) */ ?> <!-- end of photo gallery --> <!-- body text --> <section> <h2>headline</h2> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. ab libero, cupiditate veniam officiis itaque in porro iure fugit iusto reprehenderit commodi earum cum blanditiis quos error similique quod, facere! hic.</p> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. ab libero, cupiditate veniam officiis itaque in porro iure fugit iusto reprehenderit commodi earum cum blanditiis quos error similique quod, facere! hic.</p> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. ab libero, cupiditate veniam officiis itaque in porro iure fugit iusto reprehenderit commodi earum cum blanditiis quos error similique quod, facere! hic.</p> </section> </div> <!-- end container --> <!-- footer --> <?php include 'includes/footer.php' ?> <script src="js/jquery-2.1.4.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/script.js"></script> </body> </html>
fori think creating galley each photo instead of 1 of them.
i think should...
<div class="row"> <div class="col-xs-3"> <!-- gallery images --> <?php if (mysqli_num_rows($result)) { while ($row = mysqli_fetch_array($result)) { ?> <a class="thumbnail" href="#"> <img class="img-responsive" src="uploads/<?php echo $row['image_name'];?> " > <div class="caption"> <h4>gallery 1</h4> <p>some text photo.</p> </div> </a> <!-- end gallery image--> <?php } /* end of while statement */ } /* end if (mysqli_num_rows($result)) */ ?> </div> </div> <!-- end photo gallery --> so to... first creat new row. create gallery in it. , start loop populate gallery
Comments
Post a Comment