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: 10, hide: 10, sync: true },
      loading: { show: 0,  hide: 300, delay: 250 },
      thumbnails: { show: 200, slide: 0, load: 300, delay: 250 },
      window:  { show: 400, hide: 300, position: 180 },
      ui:      { show: 250, hide: 200, delay: 3000 }
    }

    A special option is content.sync, having this enabled hides the current item while showing the next one. Setting it to false will hide the current item before showing the next one:

    effects: { content: { sync: false } }
  • initialTypeOptions

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

    initialTypeOptions: {
      'image': { },
      'youtube': {
        width: 640,
        height: 360
      },
      'vimeo': {
        width: 640,
        height: 360
      }
    }
  • 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.
  • loop

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

    loop: true
  • overflow Pro

    Sets overflow along one or multiple axis, creating a zoom like effect whenever an image overflows. Available options are: none, x, y and both

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

    overflow: 'y'
    = Note: Overflow is not supported on touch based devices.
  • overlay

    Options of the overlay, setting its close option to false 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', 'next', 'close' and false.

    = Note: This only affects ui: 'outside'
  • position

    Shows a position indicator when enabled, disabled by default.

    position: true
  • preload

    Enables or disabled preloading of images. When enabled the image before and after the one shown are preloaded. To disable preloading use:

    preload: false
    = Note: Having thumbnails enabled will automatically preload all images within visible thumbnail range, so disabling preloading will only work when thumbnails are also disabled.
  • spacing

    The spacing around the window based on the overflow option currently active.

    spacing: {
      none: { horizontal: 20, vertical: 20 },
      x: { horizontal: 0, vertical: 0 },
      y: { horizontal: 0, vertical: 0 },
      both: { horizontal: 0, vertical: 0 }
    }
  • 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: Internet Explorer 6 will always use the IE6 skin, a minimal version of the fresco skin.
    = Note: See the Skins section for instructions on creating and customizing skins.
  • thumbnail Pro

    Sets a thumbnail image. Images and Youtube videos have a thumbnail based on their source by default, this option can be used to set an alternative. For every other type this option will have to be set to generate a thumbnail:

    thumbnail: 'thumbnail.jpg'
  • thumbnails Pro

    Enabled or disables the thumbnails below the content.

    thumbnails: false
    = Note: Thumbnails will be disabled when 1 or more items in a group don't have a thumbnail set.
    = Note: Thumbnails aren't used on touch based devices for performance reasons.
  • touchEffects

    These options overwrite those set using the effects option, on touch based devices.

    touchEffects: {
          ui: { show: 175, hide: 175, delay: 5000 }
    }
  • 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'
  • 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
    }
  • 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
    }

Contents

* Pro Only