API Pro only

The API allows Fresco to be used with just Javascript, as an alternative to using the fresco class on links. The most common use of the API is opening multiple items from a single link.

Fresco.show()

A single item can be shown by giving Fresco.show() a url:

<a href='#' id='example-1'>Show Image</a>

<script type='text/javascript'>
$(document).ready(function() {
  $('#example-1').on('click', function(event) {
    // the page will scroll up without this
    event.preventDefault();

    // Fresco API code goes here
    Fresco.show('image.jpg');
  });
});
</script>
Show Image

Add a caption by using an object instead:

Fresco.show({
  url: 'image.jpg',
  caption: 'Caption below the image'
});
Caption

This object also accepts options to customize Fresco:

Fresco.show({
  url: 'http://www.youtube.com/watch?v=c0KYU2j0TM4',
  options: {
    width: 853,
    height: 480,
    youtube: { autoplay: 0 }
  }
});
Options

Groups

Groups can be shown by giving Fresco.show() an array with multiple items:

// use urls
Fresco.show(['image1.jpg', 'image2.jpg']);

// or objects
Fresco.show([
  { url: 'image1.jpg', caption: 'Caption for this image' },
  { url: 'image2.jpg', caption: 'Another caption' }
]);
Group

Options for the entire group can be set using the second argument:

Fresco.show(['image1.jpg', 'image2.jpg'], {
  thumbnails: false
});
Group Options

Open Fresco at a specific position by setting a number as the last argument:

Fresco.show(['image1.jpg', 'image2.jpg'], 2);
Position

Links

Links that use the fresco class can also be opened by passing Fresco.show() an element:

Fresco.show($('#elementid')[0]);

Fresco.hide()

Close Fresco at any time by calling Fresco.hide():

Fresco.hide();

Fresco.disable()

Disables Fresco. When disabled, links using the fresco class will no longer open Fresco but work as regular links. Calls to Fresco.show() will use a fallback to make them behave like regular links.

Fresco.disable();

Use Fresco.fallback(false) should you need to disable this fallback as well:

Fresco.fallback(false).disable();

Fresco.enable()

Enable Fresco if it was previously disabled.

Fresco.enable();

Fresco.fallback()

When Fresco is disabled it will fallback to making Fresco.show() calls open as regular links. By disabling this fallback API calls will do nothing at all.

Fresco.fallback(false);

Fresco.setDefaultSkin()

Sets the name of the default skin, this skin will be used when no skin option is provided.

Fresco.setDefaultSkin('custom');

Contents

* Pro Only