LouisWhit
7/11/2019 - 9:57 PM

Tab Sortable Gallery

gallery-sortable.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
	<title>Sorting Gallery</title>
	<style></style>
</head>
<body>
	<div class="container container-fluid">
		<div class="row">
			<div data-editor="code" data-title='Sorting Gallery' class="col-md-12 gallery gallery-sortable">
				{gallery:technology-integrations}
			</div>
		</div>
	</div>
</body>
</html>
gallery-sortable.js
content_copyfile_download
$(".gallery-sortable").each(function(index, el) {
        var tabList = ["All"];
        $(".gallery-sortable li").each(function(index, el) {
          var category = $(this).attr("class");
          category = category.replace(" ui-sortable-handle", "");
          $.inArray(category, tabList)
          if ($.inArray(category, tabList) > -1) {

          } else {
            tabList.push(category);
          }
        });
        var tabHtml = "<div class='galleryTabMenu'><ul>";
        $.each(tabList, function(index, el) {
          tabHtml += "<li class='menuTab' data-galtoggle='"+this+"'>"+this+"</li>"
        });
        tabHtml += "</ul></div>"
        $(this).prepend(tabHtml);
      });
      $(".galleryTabMenu li").on('click', function(event) {
        event.preventDefault();
        var showHide = "."+$(this).data('galtoggle');
        if (showHide === ".All") {
          $(".galleryTabMenu li").parent().parent().parent().find(".ui-sortable li").fadeIn();
        } else {
          $(".galleryTabMenu li").parent().parent().parent().find(".ui-sortable li").fadeOut();
          $(showHide).fadeIn();
        }
      });