Skip to content

Instantly share code, notes, and snippets.

@codingwithsara codingwithsara/list.php Secret
Created Mar 16, 2019

Embed
What would you like to do?
How to Save Image File with PHP & MySQL - #2 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image Test</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-8 border-right">
<ul class="list-unstyled">
<?php for ($i = 0; $i < 3; $i ++): ?>
<li class="media mt-5">
<a href="#lightbox" data-toggle="modal" data-slide-to="<?= $i; ?>">
<img src="cat.jpg" width="100px" height="auto" class="mr-3">
</a>
<div class="media-body">
<h5 class="mt-0 mb-2">Cat.jpg (123.45KB)</h5>
<a href="#">
<i class="far fa-trash-alt"></i> Delete</a>
</div>
</li>
<?php endfor; ?>
</ul>
</div>
<div class="col-md-4 pt-4 pl-4">
<form method="post" enctype="multipart/form-data">
<div class="form-group">
<label>Select an image.</label>
<input type="file" name="image" required>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
</div>
</div>
</div>
<div class="modal carousel slide" id="lightbox" tabindex="-1" role="dialog" data-ride="carousel">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<ol class="carousel-indicators">
<?php for ($i = 0; $i < 3; $i++): ?>
<li data-target="#lightbox" data-slide-to="<?= $i; ?>" <?php if ($i == 0) echo 'class="active"'; ?>></li>
<?php endfor; ?>
</ol>
<div class="carousel-inner">
<?php for ($i = 0; $i < 3; $i++): ?>
<div class="carousel-item <?php if ($i == 0) echo 'active'; ?>">
<img src="cat.jpg" class="d-block w-100">
</div>
<?php endfor; ?>
</div>
<a class="carousel-control-prev" href="#lightbox" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#lightbox" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.