<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<!doctype html>
<title>Example</title>
<link rel="stylesheet" href="stylesheet.css">

	<!-- Responsive Images with Conditional Breakpoints -->
  <section id="responsive-images-breakpoints">
    <div class="container">
    <h2>Responsive Images with Conditional Breakpoints</h2>
    <p>These images will display in one column on small devices (e.g. smartphones), two columns on medium devices (e.g. tablets), and four columns on large devices (e.g. desktops).</p>
		
		
		
		<?php
		
		
	function make_thumb($src, $dest, $desired_width) {

	/* read the source image */
	$source_image = imagecreatefromjpeg($src);
	$width = imagesx($source_image);
	$height = imagesy($source_image);
	
	/* find the "desired height" of this thumbnail, relative to the desired width  */
	$desired_height = floor($height * ($desired_width / $width));
	
	/* create a new, "virtual" image */
	$virtual_image = imagecreatetruecolor($desired_width, $desired_height);
	
	/* copy source image at a resized size */
	imagecopyresampled($virtual_image, $source_image, 0, 0, 0, 0, $desired_width, $desired_height, $width, $height);
	//header("Content-type: image/jpeg"); 
	/* create the physical thumbnail image to its destination */
	imagejpeg($virtual_image, $dest);
}
		
		/** settings **/
$images_dir = "images/";
$thumbs_dir = "images-thumbs/";
$thumbs_width = 200;


//make_thumb( "images/wallhaven-607262.jpg", "images-thumbs/", 200) ;
		
		  $files = glob("images/*.*");
    for ($i=0; $i<count($files); $i++)
    {
      $image = $files[$i];
     $supported_file = array(
             'gif',
               'jpg',
               'jpeg',
               'png'
       );
 
        $ext = strtolower(pathinfo($image, PATHINFO_EXTENSION));
        if (in_array($ext, $supported_file)) {
           //echo basename($image)."<br />"; // show only image name if you want to show full path then use this code // echo $image."<br />";
			//echo "<li><a href='".$dirname.$curimg."'><img src='img.php?src=".$dirname.$curimg."&w=300&zc=1' alt='' /></a></li>n ";
			//echo "<a href='".$image ."'> </a>";
			
            echo "<img class='breakpoint' src=".$image ." alt='Random image' />";
			
			
           } else {
               continue;
           }
         }
	?>
    <img class="breakpoint" src="images/image01.jpg" width="960" height="640" />
    <img class="breakpoint" src="tbn.php" width="960" height="640" />
    <img class="breakpoint" src="images/image03.jpg" width="960" height="640" />
    <img class="breakpoint" src="images/image04.jpg" width="960" height="640" />
    </div>
  </section>
	
	
		
   


  
	
  

<body>
</body>
</html>