zip multiple images

by ramdsr26

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip-utils/0.0.2/jszip-utils.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<div class="gallery">

    <div class="imgContainer">
        <img class="thumb" src="https://i.imgur.com/emBm6jv.jpg">
        <img class="thumb" src="https://i.imgur.com/l49aYS3.jpg">
        <img class="thumb" src="https://i.imgur.com/a0bs8oJ.jpg">
        <img class="thumb" src="https://i.imgur.com/PHYkTp9.jpg">
        <img class="thumb" src="https://i.imgur.com/a7fJPfn.jpg">
        <img class="thumb" src="https://i.imgur.com/WCzfMMt.jpg">
        <img class="thumb" src="https://i.imgur.com/QCFXhpg.jpg">
        <img class="thumb" src="https://i.imgur.com/esOG86I.jpg">
        <img class="thumb" src="https://i.imgur.com/LW8EKdK.jpg">
        <img class="thumb" src="https://i.imgur.com/ggECswm.jpg">
        <img class="thumb" src="https://i.imgur.com/CHKrDLa.jpg">
				<video src="https://i.imgur.com/JpljA8l.mp4" autoplay="" loop="" class="thumb" style="max-width: 100%; height: 110px;">
					<source type="video/mp4" src="https://i.imgur.com/JpljA8l.mp4">
				</video>
    </div>
    
    <img class="download" src="https://maxcdn.icons8.com/app/uploads/2016/10/download1.png" onclick="generateZIP()" />
    
</div>

CSS

.gallery {
        text-align: center;
    }
    .gallery>img {
        width: 100px;
        opacity: .8;
    }
    .gallery>img:hover {
        cursor: pointer;
        opacity: 1;
    }
    .imgContainer {
        padding-top: 10px;
    }

    .thumb {
        height: 110px;
        width: 160px;
        margin: 10px;
        padding: 2px;
        box-shadow: 2px 2px 4px rgba(70, 70, 70, 0.6);
        border: 2px solid white;
    }

    .thumb:hover {
        box-shadow: 3px 3px 6px rgba(70, 70, 70, 0.8);
        cursor: pointer;
    }
    .thumbChecked {
        opacity: .8;
        height: 110px;
        width: 160px;
        margin: 10px;
        padding: 2px;
        box-shadow: 2px 2px 4px rgba(70, 70, 70, 0.6);
    }
    .download {
        margin-top: 20px;
        display: none;
        margin: 0 auto;
    }

JavaScript

var links = [];

$('.gallery').on('click', '.thumb', function () {

  $(this).removeClass().addClass('thumbChecked');
  $(this).css("border", "2px solid #c32032");
  links.push($(this).attr('src'));
  console.log(links);
  
  if (links.length != 0) {
    $('.download').css("display", "block");
  }

});


$('.gallery').on('click', '.thumbChecked', function () {

  $(this).removeClass().addClass('thumb');
  $(this).css("border", "2px solid white");
  var itemtoRemove = $(this).attr('src');
  links.splice($.inArray(itemtoRemove, links), 1);
  console.log(links);
  
  if (links.length == 0) {
    $('.download').css("display", "none");
  }

});


function generateZIP() {
  console.log('TEST');
  var zip = new JSZip();
  var count = 0;
  var zipFilename = "Pictures.zip";

  links.forEach(function (url, i) {
    var filename = links[i];
    filename = filename.replace(/[\/\*\|\:\<\>\?\"\\]/gi, '').replace("httpsi.imgur.com","");
    // loading a file and add it in a zip file
    JSZipUtils.getBinaryContent(url, function (err, data) {
      if (err) {
        throw err; // or handle the error
      }
      zip.file(filename, data, { binary: true });
      count++;
      if (count == links.length) {
        zip.generateAsync({ type: 'blob' }).then(function (content) {
          saveAs(content, zipFilename);
        });
      }
    });
  });
}