AmoEba- p.js

let modalId = $('#image-gallery');

$(document)

  .ready(function () {

    loadGallery(true, 'a.thumbnail');

    //This function disables buttons when needed

    function disableButtons(counter_max, counter_current) {

      $('#show-previous-image, #show-next-image')

        .show();

      if (counter_max === counter_current) {

        $('#show-next-image')

          .hide();

      } else if (counter_current === 1) {

        $('#show-previous-image')

          .hide();

      }

    }

    /**a

     *

     * @param setIDs        Sets IDs when DOM is loaded. If using a PHP counter, set to false.

     * @param setClickAttr  Sets the attribute for the click handler.

     */

    function loadGallery(setIDs, setClickAttr) {

      let current_image,

        selector,

        counter = 0;

      $('#show-next-image, #show-previous-image')

        .click(function () {

          if ($(this)

            .attr('id') === 'show-previous-image') {

            current_image--;

          } else {

            current_image++;

          }

          selector = $('[data-image-id="' + current_image + '"]');

          updateGallery(selector);

        });

      function updateGallery(selector) {

        let $sel = selector;

        current_image = $sel.data('image-id');

        $('#image-gallery-title')

          .text($sel.data('title'));

        $('#image-gallery-image')

          .attr('src', $sel.data('image'));

        disableButtons(counter, $sel.data('image-id'));

      }

      if (setIDs == true) {

        $('[data-image-id]')

          .each(function () {

            counter++;

            $(this)

              .attr('data-image-id', counter);

          });

      }

      $(setClickAttr)

        .on('click', function () {

          updateGallery($(this));

        });

    }

  });

// build key actions

$(document)

  .keydown(function (e) {

    switch (e.which) {

      case 37: // left

        if ((modalId.data('bs.modal') || {})._isShown && $('#show-previous-image').is(":visible")) {

          $('#show-previous-image')

            .click();

        }

        break;

      case 39: // right

        if ((modalId.data('bs.modal') || {})._isShown && $('#show-next-image').is(":visible")) {

          $('#show-next-image')

            .click();

        }

        break;

      default:

        return; // exit this handler for other keys

    }

    e.preventDefault(); // prevent the default action (scroll / move caret)

  });

//Filter Button

$(document).ready(function(){

  $(".filter-button").click(function(){

      var value = $(this).attr('data-filter');

      

      if(value == "todo")

      {

          //$('.filter').removeClass('hidden');

          $('.filter').show('1000');

      }

      else

      {

//            $('.filter[filter-item="'+value+'"]').removeClass('hidden');

//            $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');

          $(".filter").not('.'+value).hide('3000');

          $('.filter').filter('.'+value).show('3000');

          

      }

  });

});