Fresco - a beautiful responsive lightbox

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: frescojs.com

1. INCLUDE JS AND CSS FILES

<!-- jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<!-- Make IE8 and below responsive by adding CSS3 MediaQuery support -->
<!--[if lt IE 9]>
  <script type="text/javascript" src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

<!-- Youtube and Vimeo API (improves video on touch devices and gives better HD support) -->
<script type="text/javascript" src="http://www.youtube.com/iframe_api"></script>
<script type="text/javascript" src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

<!-- Fresco -->
<script type="text/javascript" src="/js/fresco/fresco.js"></script>
<link rel="stylesheet" type="text/css" href="/css/fresco/fresco.css"/>

2. HTML

<a href="image1.jpg" class="fresco" data-fresco-group="unique_name">Image 1</a>
<a href="image2.jpg" class="fresco" data-fresco-group="unique_name">Image 2</a>

3. 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

  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 because those devices use a different user interface.
• 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

  =Note: The position will never be shown on touch based devices even if this option is enabled.
• 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

  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

  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, this is mostly 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

  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

  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

  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
  }

4. CALLBACKS

afterPosition: function(position) {
  alert("You've reached position " + position);
}

afterHide: function() {
  alert('Fresco is no longer visible');
}

onShow: function() {
  alert('Fresco is visible');
}