fancybox(v3)

fancyboxのダウンロード

画像のポップアップ

<a href="image.jpg" data-fancybox="images" data-caption="My caption">
    <img src="thumbnail.jpg" alt="" />
</a>

YouTube

<a data-fancybox href="https://www.youtube.com/watch?v=_sI_Ps7JSEk">
    YouTube video
</a>

MP4

<a data-fancybox data-width="640" data-height="360" href="video.mp4">
    Direct link to MP4 video
</a>

iframe

<a data-fancybox data-type="iframe" data-src="http://codepen.io/fancyapps/full/jyEGGG/" href="javascript:;">
    Webpage
</a>

Inline

<a data-fancybox data-src="#hidden-content" href="javascript:;">
    Trigger the fancybox
</a>

Callbacks

onInit: $.noop, // When instance has been initialized

beforeLoad: $.noop, // Before the content of a slide is being loaded
afterLoad: $.noop, // When the content of a slide is done loading

beforeShow: $.noop, // Before open animation starts
afterShow: $.noop, // When content is done loading and animating

beforeClose: $.noop, // Before the instance attempts to close. Return false to cancel the close.
afterClose: $.noop, // After instance has been closed

onActivate: $.noop, // When instance is brought to front
onDeactivate: $.noop, // When other instance has been activated

Core methods

// Start new fancybox instance
$.fancybox.open( items, opts, index );

// Get refrence to currently active fancybox instance
$.fancybox.getInstance();

// Close currently active fancybox instance (pass `true` to close all instances) 
$.fancybox.close();

// Close all instances and unbind all events
$.fancybox.destroy();

Starting fancybox

{
    src  : '' // Source of the content
    type : '' // Content type: image|inline|ajax|iframe|html (optional)
    opts : {} // Object containing item options (optional)
}

Example of opening image gallery programmatically:

$.fancybox.open([
    {
        src  : '1_b.jpg',
        opts : {
            caption : 'First caption',
            thumb   : '1_s.jpg'
        }
    },
    {
        src  : '2_b.jpg',
        opts : {
            caption : 'Second caption',
            thumb   : '2_s.jpg'
        }
    }
], {
    loop : false
});