Simple Gallery Example

by mylastof

HTML

<script src="https://cdn.rawgit.com/fccoelho7/simpleGallery.js/master/dist/simple-gallery.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/fccoelho7/simpleGallery.js/master/dist/simple-gallery.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.2/Sortable.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<form
  class="form-upload"
  enctype="multipart/form-data"
  method="GET"
  action="https://aubott.com/upload"
>
  <input
    type="hidden"
    name="gallery"
    value='[{"url":"https://unsplash.it/300?image=85","title":"No description"},{"url":"https://unsplash.it/300?image=54","title":"No description"},{"url":"https://unsplash.it/300?image=106","title":"No description"},{"url":"https://unsplash.it/300?image=15","title":"No description"}]'
  />
  <label for="">Image Gallery</label>
  <div class="input-upload btn">
    <span class="fa fa-cloud-upload"></span> Upload
    <input class="upload" type="file" multiple="multiple" accept="image/*" />
  </div>
  <div class="gallery-container"></div>
  <p><strong>Output:</strong> <span class="output"></span></p>
</form>

CSS

body {
	background-color: #f9f9f9;
	font-size: 14px;
}

JavaScript

new SimpleGallery('.form-upload')

const intervalID = window.setInterval(function() {
	const input = document.querySelector('input[name="gallery"]')
	const value = (input.value) ? input.value : []
	document.querySelector('.output').innerHTML = value
}, 500);