jQuery

【jQuery】レスポンシブで軽量のライトボックスjQuery Rebox

May 20, 2018
rebox

jQuery Reboxはレスポンシブで軽くてシンプルで速いライトボックス

The Options

{
    theme: 'rebox',        // class name parent gets (for your css)
    selector: null,        // the selector to delegate to, should be to the <a> which contains an <img>
    prev: '&larr;',        // use an image, text, whatever for the previous button
    next: '&rarr;',        // use an image, text, whatever for the next button
    loading: '%',          // use an image, text, whatever for the loading notification
    close: '&times;',      // use an image, text, whatever for the close button
    speed: 600,            // speed to fade in or out
    zIndex: 1000,          // zIndex to apply to the outer container
    cycle: true,           // whether to cycle through galleries or stop at ends
    captionAttr: 'title'   // name of the attribute to grab the caption from
    template: 'image',     // the default template to be used (see templates below)
    templates: {           // define templates to create the elements you need function($item, settings)
        image: function($item, settings, callback){ 
            return $('<img src="'+ $item.attr('href') +'" class="'+ s.theme +'-content" />').load(callback);
        }
    }
}

The Methods

// Initialize a rebox instance
$el.rebox({});

// Enable a rebox, generally you don't have to call this
// but if you want to enable and disable this could be useful
$el.rebox('enable');

// Disable a rebox. Again you generally don't need this
// but if you want to enable and disable this could be useful
$el.rebox('disable');

// Go to the next image in the queue
$el.rebox('next');

// Go to the prev image in the queue
$el.rebox('prev');

// Go to a specific index in the queue
$el.rebox('goto', 4);

// Destroy a rebox
$el.rebox('destroy');

// Get or set an option. When value is provided a Set takes place
// If only the key is provided the value will be retrieved
$el.rebox('option', key, value);

// if an object is passed each setting will be applied
$el.rebox('option', { speed: 500 });

// set global defaults
$.rebox.setDefaults({ theme: 'mytheme' });

The Events

// when the control is opened
$el.bind('rebox:open', function(e){});

// when the control is closed
$el.bind('rebox:close', function(e){});

// when the control changes image, passes the index as second parameter
$el.bind('rebox:goto', function(e, i){});

// when the control is disabled
$el.bind('rebox:disable', function(e){});

// when the control is destroyed
$el.bind('rebox:destroy', function(e){});

MIT