Skip to main content

Fullscreen

This demo opens a fullscreen search page when the searcher clicks a search icon. Your site doesn't need a search box for this: the fullscreen page brings its own. Click the magnifying glass below to try it. View the ss360Config to check the configuration.

  • results.fullScreenConfig.trigger is the CSS selector of the element that opens the fullscreen search, for example <button id="ss360-search-trigger">.
  • results.fullScreenConfig.caption is the heading shown on the fullscreen page.

In Design & Publish: Settings → General → How to show results → Fullscreen, then set the Trigger.

See Search results for all results options.

window.ss360Config = {
   siteId: '83460', /* Replace with your site id */
   searchBox: {
      selector: '#searchBox' /* Replace with the css selector of your search box */
   },
   results: {
      fullScreenConfig: {
         trigger: '#ss360-search-trigger',
         caption: 'Search the Demo Kitchen'
      }
   }
};
{"siteId":"83460","searchBox":{"selector":"#searchBox"},"results":{"fullScreenConfig":{"trigger":"#ss360-search-trigger","caption":"Search the Demo Kitchen"}}}