简单的PHP,回显
  • ... 目录中的所有图像
  • 简单的PHP,回显<li> ... </ li>目录中的所有图像

    问题描述:

    I'm attempting to make a simple responsive gallery using bootstrap 3 and a simple php script to display all images in a specific directory I in response to another question on here.

    The issue I'm having is echoing the the required <li></li> tags rather then <br></br> as demonstrated below.


    here is how I currently display the images, within the <li></li>tag with a class to display the images layout/positioning, called in the <ul></ul> tag.

    <div class="container">
              <ul class="row">
                <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                    <img class="img-responsive" src="images/kitchens.jpg">
                </li>
                <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                    <img class="img-responsive" src="images/garden.jpg">
                </li>
                <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                    <img class="img-responsive" src="images/front.jpg">
                </li>
              </ul>
    </div> <!-- /container --> 
    

    this is the PHP im using in response to question i found here https://*.com/a/19255786/3599850

    <?php
    $files = glob("images/*.*");
    
    for ($i=0; $i<count($files); $i++) {
        $image = $files[$i];
        print $image ."<br />";
        echo             
    
        '<img src="'.$image .'" alt="Random image" />'."<br /><br />";
    }
    
    ?>
    

    This is my attempt :(

    <?php
    $files = glob("images/*.*");
    
    for ($i=0; $i<count($files); $i++) {
        $image = $files[$i];
        print $image ."<br />";
        echo
    
        '<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
        <img src="'.$image .'" alt="Random image" /></li>'."<li /><li />";
    }
    
    ?>
    

    You have too many closing </li> tags :

    <?php
    $files = glob("images/*.*");
    
    for ($i=0; $i<count($files); $i++) {
        $image = $files[$i];
        echo '<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"><img  class="img-responsive" src="'.$image .'" /></li>';
    }
    
    ?>
    

    And you don't need the print $image ."<br />";