
// media box settings for modern artisan webpages
// 2021.01.22  whh created


$('#grid').mediaBoxes({
    filterContainer: '#filter',
    considerFilteringInPopup: true,
    dropDownEvent: 'hover',
    multipleFilterLogic: 'AND',
    search: '#search',
    sortContainer: '#sort',
    getSortData: {
        title: '.media-box-title', //When you sort by title, it will only look in the elements with the class "media-box-title"
        text: '.media-box-text', //When you sort by text, it will only look in the elements with the class "media-box-text"
    },
    overlayEffect: 'reveal-top-100%',
    thumbnailOverlay: true, //Show the overlay on mouse over
    boxesToLoadStart: 6,
    boxesToLoad: 6,
    minBoxesPerFilter: 6,
    lazyLoad: false,
    horizontalSpaceBetweenBoxes: 50,
    verticalSpaceBetweenBoxes: 20,
    columnWidth: 'auto',
    columns: 6,
    resolutions: [
          {
              maxWidth: 960,
              columnWidth: 'auto',
              columns: 4,
          },
          {
              maxWidth: 650,
              columnWidth: 'auto',
              columns: 4,
          },
          {
              maxWidth: 450,
              columnWidth: 'auto',
              columns: 4,
          },
                      {
              maxWidth: 350,
              columnWidth: 'auto',
              columns: 4,
          },
      ],
      waitUntilThumbLoads: false,
      waitForAllThumbsNoMatterWhat: false,
      thumbnailOverlay: true,
      overlayEffect: 'fade',
      overlaySpeed: 200,
      overlayEasing: 'default',
      showOnlyLoadedBoxesInPopup: false,
      considerFilteringInPopup: false,
      deepLinking: false,


      LoadingWord: 'Loading...',
      loadMoreWord: 'Expand Portfolio',
      noMoreEntriesWord: false,
      popup: 'fancybox',
      alignTop: false,
      preload: [0,2],
      magnificPopup: true,
      percentage: false,
      gallery: true,
      fancybox :  {
          loop                : true, // Enable infinite gallery navigation
          margin              : [0, 0], // Space around image, ignored if zoomed-in or viewport smaller than 800px
          keyboard            : true, // Enable keyboard navigation
          arrows              : true, // Should display navigation arrows at the screen edges
          infobar             : true, // Should display infobar (counter and arrows at the top)
          toolbar             : true, // Should display toolbar (buttons at the top)
          buttons             :   [ // What buttons should appear in the top right corner.
                                      'slideShow',
                                      'fullScreen',
                                      'thumbs',
                                      'close'
                                  ],
          idleTime            : 3, // Detect "idle" time in seconds
          protect             : true, // Disable right-click and use simple image protection for images
          animationEffect     : 'zoom', // Open/close animation type, it could be: false, 'zoom', 'fade', 'zoom-in-out'
          animationDuration   : 330, // Duration in ms for open/close animation
          transitionEffect    : 'fade', // it could be: false, 'fade', 'slide', 'circular', 'tube', 'zoom-in-out', 'rotate'
          transitionDuration  : 330, // Duration in ms for transition animation
          slideShow           : { autoStart : true, speed : 4000 }, // slideshow settings
          fullScreen          : { autoStart : true, }, // activate or deactivate fullscreen when open
          thumbs              : { autoStart : true, hideOnClose : true },    // Display thumbnails on opening/closing
          touch               : { vertical : true, momentum : true }, // Allow to drag content
          compensateScrollbar : '.fancybox-compensate-for-scrollbar',
      },

      //some sharing hidden options :D
      //facebook: true,
      //twitter: true,
      //googleplus: true,
      //pinterest: true,

    });


    $('#grid2').mediaBoxes({
        filterContainer: '#filter',
        considerFilteringInPopup: true,
        dropDownEvent: 'hover',
        multipleFilterLogic: 'AND',
        search: '#search',
        sortContainer: '#sort',
        getSortData: {
            title: '.media-box-title', //When you sort by title, it will only look in the elements with the class "media-box-title"
            text: '.media-box-text', //When you sort by text, it will only look in the elements with the class "media-box-text"
        },
        overlayEffect: false,
        thumbnailOverlay: false, //Show the overlay on mouse over
        boxesToLoadStart: 4,
        boxesToLoad: 4,
        minBoxesPerFilter:4,
        lazyLoad: false,
        horizontalSpaceBetweenBoxes: 50,
        verticalSpaceBetweenBoxes: 20,
        columnWidth: 'auto',
        columns: 4,
        resolutions: [
              {
                  maxWidth: 960,
                  columnWidth: 'auto',
                  columns: 4,
              },
              {
                  maxWidth: 650,
                  columnWidth: 'auto',
                  columns: 4,
              },
              {
                  maxWidth: 450,
                  columnWidth: 'auto',
                  columns: 4,
              },
                          {
                  maxWidth: 350,
                  columnWidth: 'auto',
                  columns: 4,
              },
          ],
          waitUntilThumbLoads: false,
          waitForAllThumbsNoMatterWhat: false,
          thumbnailOverlay: true,
          overlayEffect: 'fade',
          overlaySpeed: 200,
          overlayEasing: 'default',
          showOnlyLoadedBoxesInPopup: false,
          considerFilteringInPopup: false,
          deepLinking: false,


          LoadingWord: 'Loading...',
          loadMoreWord: 'Expand Portfolio',
          noMoreEntriesWord: false,
          popup: 'none',
          alignTop: false,
          preload: [0,2],
          magnificPopup: true,
          percentage: false,
          gallery: true,
          fancybox :  {
              loop                : true, // Enable infinite gallery navigation
              margin              : [0, 0], // Space around image, ignored if zoomed-in or viewport smaller than 800px
              keyboard            : true, // Enable keyboard navigation
              arrows              : true, // Should display navigation arrows at the screen edges
              infobar             : true, // Should display infobar (counter and arrows at the top)
              toolbar             : true, // Should display toolbar (buttons at the top)
              buttons             :   [ // What buttons should appear in the top right corner.
                                          'slideShow',
                                          'fullScreen',
                                          'thumbs',
                                          'close'
                                      ],
              idleTime            : 3, // Detect "idle" time in seconds
              protect             : true, // Disable right-click and use simple image protection for images
              animationEffect     : 'zoom', // Open/close animation type, it could be: false, 'zoom', 'fade', 'zoom-in-out'
              animationDuration   : 330, // Duration in ms for open/close animation
              transitionEffect    : 'fade', // it could be: false, 'fade', 'slide', 'circular', 'tube', 'zoom-in-out', 'rotate'
              transitionDuration  : 330, // Duration in ms for transition animation
              slideShow           : { autoStart : true, speed : 4000 }, // slideshow settings
              fullScreen          : { autoStart : true, }, // activate or deactivate fullscreen when open
              thumbs              : { autoStart : true, hideOnClose : true },    // Display thumbnails on opening/closing
              touch               : { vertical : true, momentum : true }, // Allow to drag content
              compensateScrollbar : '.fancybox-compensate-for-scrollbar',
          },

          //some sharing hidden options :D
          //facebook: true,
          //twitter: true,
          //googleplus: true,
          //pinterest: true,

        });
