JSFiddle - React, Tailwind, and code Playground

by Joe

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Jquery project</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="lightbox/src/imagelightbox.js"></script>
    <link href="lightbox/src/imagelightbox.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
  </head>

  <body>
    <--form tags have been deleted-->
      <div id="photo-filter">
        <input type="text" id="filter" name="photo-search" placeholder="Search(16pt)">
        <--form tag deleted-->
      </div>
      <div class="content-photos">
        <ul id="thumbnails">
          <li><a class="caption" href="photos/01.jpg" data-imagelightbox="demo" data-ilb2-caption="
Hay Bales
I love hay bales. Took this snap on a drive through the countryside past some straw fields"><img src="images/01.jpg" alt="
Hay Bales" title="1st Photo"></a></li>
          <li><a class="caption" href="photos/02.jpg" data-imagelightbox="demo" data-ilb2-caption="The lake was so calm today. We had a great view of the snow on the mountains from here"><img src="images/02.jpg" alt="Lake" title="1st Photo"></a></li>
          <li><a class="caption" href="photos/03.jpg" data-imagelightbox="demo" data-ilb2-caption="I hiked to the top of the mountain and got this picture of the canyon and trees below."><img src="images/03.jpg" alt="
Canyon" title="1st Photo"></a></li>
          <li><a class="caption" href="photos/04.jpg" data-imagelightbox="demo" data-ilb2-caption="It was amazing to see an iceberg up close, it was so cold but didn’t snow today."><img src="images/04.jpg" alt="Iceberg
" title="1st Photo"></a></li>
          <li><a class="caption" href="photos/05.jpg" data-imagelightbox="demo" data-ilb2-caption="The red cliffs were beautiful. It was really hot in the desert but we did a lot of walking through the canyons."><img src="images/05.jpg"...

JavaScript

$('#filter').change(function() { // This will need to change to the id of your search field
  var searchStr = $(this).val();
  $('#thumbnails li').each(function() { // Here you'll need to update your selector to find each image. As you are not using the class "caption" on any of your images. // '#thumbnails li' or something similar
    var str = $(this).attr("data-ilb2-caption"); //this call pulls the attribute "data-title", you'll need to update it to the attribute value you're using for the caption text. // 'data-ilb2-caption', You should also keep the code clean and add a space between attributes. 'data-imagelightbox="demo"data-ilb2-caption' to 'data-imagelightbox="demo" data-ilb2-caption'
    if (str.indexOf(searchStr) > -1) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
});





$('a[data-imagelightbox="demo"]').imageLightbox({
  arrows: true,
  button: true,
  overlay: true,
  caption: true
});