Options

Options can be set using the data-fresco-options attribute. Some options are only available using Fresco Pro.

<a href="image.jpg" class="fresco" data-fresco-options="ui: 'inside'">Show Image</a>

Or when used with groups, the data-fresco-group-options attribute.

<a href="image1.jpg"
   class="fresco"
   data-fresco-group="options_example"
   data-fresco-group-options="thumbnails: false, ui: 'inside'">Image 1</a>
<a href="image2.jpg"
   class="fresco"
   data-fresco-group="options_example">Image 2</a>
<a href="image3.jpg"
   class="fresco"
   data-fresco-group="options_example">Image 3</a>

When using the Javascript API these would translate to:

Fresco.show({ url: 'image.jpg', options: { ui: 'inside' } });
Fresco.show(['image1.jpg', 'image2.jpg', 'image3.jpg'], { thumbnails: false, ui: 'inside' });
  • effects

    Sets the duration of individual effects, or disables them when set to false.

    effects: false

    These are all the available options:

    effects: {
      content: { show: 0, hide: 0 },
      spinner: { show: 150, hide: 150 },
      window: { show: 440, hide: 300 },
      thumbnail: { show: 300, delay: 150 },
      thumbnails: { slide: 0 }
    }
  • height

    This option only truly affects youtube content, for everything else this option will translate to maxHeight.

    height: 720
    Note: Fresco provides this option because Youtube currently doesn't allow fetching video dimensions like Vimeo yet. Star this ticket if you'd like to see support for it at some point: https://code.google.com/p/gdata-issues/issues/detail?id=4329
  • initialTypeOptions

    Initial options for different types, available types are image, vimeo and youtube. This option is there for use within skins where it can help to adjust defaults and avoid code repetition.

    initialTypeOptions: {
      'image': { },
      'vimeo': {
        width: 1280
      },
      'youtube': {
        width: 1280,
        height: 720
      }
    }
  • keyboard

    Enable or disable individual keyboard buttons or all of them when set to false. Useful for when the content requires keyboard interaction.

    keyboard: false

    Use an object to toggle individual buttons:

    keyboard: {
      left: true,
      right: true,
      esc: false
    }
    Note: The keys left and right are only enabled when using the image type. Any other type of content might require these keys.
  • loadedMethod

    Sets the method used to decide when an image is loaded. The default is naturalWidth, which starts showing the image as soon as dimensions are known.

    The alternative is using onload, which shows the image as soon as onload fires. This can give the image more time to render, but is slower.

    loadedMethod: 'onload'
    Note: Fresco uses Voilà internally to handle loading. More info on image loading is available on voila.nickstakenburg.com
  • loop

    When set to true a group becomes a continuous loop, keeping navigation buttons enabled at all times:

    loop: true
  • maxHeight

    Sets a maximum height for the content.

    maxHeight: 500
  • maxWidth

    Sets a maximum width for the content.

    maxWidth: 500
  • overflow Pro

    Sets overflow along the y-axis, creating a zoom like effect whenever an image overflows.

    See the documentation on overflow for examples on using this option.

    overflow: true
    Note: Overflow is not supported on touch based devices.
  • overlay

    Options of the overlay, setting its close: false will prevents clicks on the overlay from closing the window.

    overlay: { close: false }
  • onClick

    What to do when clicking the area overlapping an image. Available options are: 'previous-next' or 'close'

  • position

    Shows a position indicator when set to true, or hides it when set to false.

    position: false
  • preload

    Sets the items to preload before and after the current item, or disables preloading when set to false.

    preload: [1,2] // preload 1 before and 2 after
    preload: false // disables preloading
  • spinner

    Disables the loading icon when set to false.

    spinner: false
  • spinnerDelay

    Delay in miliseconds to wait before showing the spinner.

    spinnerDelay: 300
  • skin

    Sets the skin, the options of this skin will be applied as a starting point for other options. Available skins are: fresco and any added custom skins.

    skin: 'fresco'
    Note: See the Skins section for instructions on creating and customizing skins.
  • sync

    Hides the current item while showing the next one when set to true (the default). Setting it to false will hide the current item before showing the next one.

    sync: false
  • thumbnail Pro

    This option can be used to set an alternative thumbnail image, it will be based on the source if this option isn't set.

    thumbnail: 'thumbnail.jpg'
    Note: See the Usage documentation for more information on optimizing thumbnails for performance.
  • thumbnails Pro

    Enabled or disables the thumbnails below the content.

    thumbnails: false
    Note: Thumbnails aren't used on touch based devices for performance reasons.
  • ui Pro

    Sets position of user interface elements. The default is outside which positions everything outside of the content, inside puts the elements on top of the content:

    ui: 'inside'

    On small screens Fresco will switch to an alternative UI mode to optimize use of the viewport. This mode uses the entire screen for navigation and doesn't close Fresco when clicking the overlay.

  • uiDelay Pro

    The duration in miliseconds to wait before hiding UI elements that can be toggled on mouseover:

    uiDelay: 3000
  • vimeo Pro

    Sets the player parameters of a Vimeo video, available options can be found in the Vimeo documentation: Vimeo Player Embedding.

    vimeo: {
      autoplay: 1,
      title: 1,
      byline: 1,
      portrait: 0,
      loop: 0
    }
  • width

    This option only truly affects youtube content, for everything else this option will translate to maxWidth.

    width: 1280
    Note: Fresco provides this option because Youtube currently doesn't allow fetching video dimensions like Vimeo yet. Star this ticket if you'd like to see support for it at some point: https://code.google.com/p/gdata-issues/issues/detail?id=4329
  • youtube Pro

    Sets the player parameters of a Youtube video, available options can be found in the Youtube documentation: YouTube Embedded Players and Player Parameters.

    youtube: {
      autohide: 1,
      autoplay: 1,
      controls: 1,
      enablejsapi: 1,
      hd: 1,
      iv_load_policy: 3,
      loop: 0,
      modestbranding: 1,
      rel: 0,
      vq: 'hd1080'
    }

Contents

* Pro Only