Shiftbox documentation

Configurable options

Default options

This is a list of default options (extract from source code):


                loadingText: "Loading...",

                errorText: "Preview not available",

                zoomSwitch: true,

                zoomSwitchSelector: "#shiftbox-zoom-switch",

                modalSelector: "#shiftbox-modal",

                modalAttachSelector: "body",

                modalLayout: '<div class="modal fade" tabindex="-1" role="dialog" id="shiftbox-modal">' +

                  '<div class="modal-dialog">' +

                    '<div class="modal-content" style="overflow:hidden">' +

                      '<div class="modal-body" style="padding:0">' +

                        '<div id="shiftbox-picture"></div>' +

                        '<div id="shiftbox-button-prev"><img src="/images/shiftbox/prev.png"></div>' +

                        '<div id="shiftbox-button-next"><img src="/images/shiftbox/next.png"></div>' +

                        '<div id="shiftbox-zoom-switch"><img src="/images/shiftbox/zoom.png"></div>' +

                        '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +

                          '<span aria-hidden="true">×</span>' +

                        '</button>' +

                      '</div>' +

                    '</div>' +

                  '</div>' +

                '</div>',

                prevBtnSelector: "#shiftbox-button-prev",

                nextBtnSelector: "#shiftbox-button-next",

                pictureSelector: "#shiftbox-picture"

Explanation

loadingText (string) - Message displayed on modal when image is loading from server.
errorText (string) - Message displayed on modal when image cannot be loaded (e.g. 404 not found occurred).
zoomSwitch (boolean) - Allows to display on mouse/touch move original image size. true to enable, false to disable.
zoomSwitchSelector (string) - jQuery selector to find element which on click will switch zoom state (if zoomSwitch is true)
modalSelector (string) - jQuery modal selector to find Switchbox's modal to display.
modalAttachSelector (string) - jQuery selector of container which modal will be apended to.
modalLayout (string) - HTML code of modal layout to display.
prevBtnSelector (string) - jQuery selector to find element which on click will trigger "previous" on gallery.
nextBtnSelector (string) - jQuery selector to find element which on click will trigger "next" on gallery.
pictureSelector (string) - jQuery selector to find element which will hold img of displayed image.

Example

Separate images

<a href="image.jpg" data-toggle="shiftbox">
    <img src="image_thumb.jpg" alt="Image description" title="Image description" class="img-responsive">
</a>

Regular image (1200x800)

Large image (2020x1377)

Insanely large image (5037x3356)

Gallery images

<a href="image.jpg" data-toggle="shiftbox" data-gallery="gallery">
    <img src="image_thumb.jpg" alt="Image description" title="Image description" class="img-responsive">
</a>