formstone
Version:
Library of modular front end components.
1 lines • 44.6 kB
JSON
{"main":["lightbox.js","lightbox.css"],"options":[{"name":"customClass","type":"string","default":"''","description":"Class applied to instance"},{"name":"fileTypes","type":"regex","default":"","description":"Image file types"},{"name":"fixed","type":"boolean","default":"false","description":"Flag for fixed positioning"},{"name":"formatter","type":"function","default":"$.noop","description":"Caption format function"},{"name":"infinite","type":"boolean","default":"false","description":"Flag for infinite galleries"},{"name":"labels.close","type":"string","default":"'Close'","description":"Close button text"},{"name":"labels.count","type":"string","default":"'of'","description":"Gallery count separator text"},{"name":"labels.next","type":"string","default":"'Next'","description":"Gallery control text"},{"name":"labels.previous","type":"string","default":"'Previous'","description":"Gallery control text"},{"name":"labels.captionClosed","type":"string","default":"'Close Caption'","description":"Mobile caption toggle text, closed state"},{"name":"labels.captionOpen","type":"string","default":"'View Caption'","description":"Mobile caption toggle text, open state"},{"name":"labels.thumbnailsClosed","type":"string","default":"'Close Thumbnails'","description":"Mobile thumbnails toggle text, closed state"},{"name":"labels.thumbnailsOpen","type":"string","default":"'View Thumbnails'","description":"Mobile thumbnails toggle text, open state"},{"name":"labels.lightbox","type":"string","default":"'Lightbox {guid}'","description":"Lightbox aria label; {guid} replaced with instance GUID"},{"name":"margin","type":"int","default":"50","description":"Margin used when sizing (single side)"},{"name":"maxHeight","type":"int","default":"10000","description":"Maximum height of element modal"},{"name":"maxWidth","type":"int","default":"10000","description":"Maximum width of element modal"},{"name":"minHeight","type":"int","default":"100","description":"Minimum height of modal"},{"name":"minWidth","type":"int","default":"100","description":"Minimum width of modal"},{"name":"overlay","type":"boolean","default":"false","description":"Flag to force 'overlay' ('mobile') rendering"},{"name":"retina","type":"boolean","default":"false","description":"Flag to use 'retina' sizing (halves natural sizes)"},{"name":"requestKey","type":"string","default":"'fs-lightbox'","description":"GET variable for ajax / iframe requests"},{"name":"theme","type":"string","default":"\"fs-light\"","description":"Theme class name"},{"name":"thumbnails","type":"boolean","default":"false","description":"Flag to display thumbnail strip"},{"name":"top","type":"int","default":"0","description":"Target top position; over-rides centering"},{"name":"videoFormatter","type":"","description":"Object of video formatter objects containing a 'pattern' regex and 'format' callback"},{"name":"videoRatio","type":"number","default":"0.5625","description":"Video height / width ratio (9 / 16 = 0.5625)"},{"name":"videoWidth","type":"int","default":"800","description":"Video max width"},{"name":"viewer","type":"boolean","default":"false","description":"Flag to force 'Viewer' rendering, if available"}],"events":[{"name":"open.lightbox","description":"Lightbox opened; Triggered on window"},{"name":"close.lightbox","description":"Lightbox closed; Triggered on window"},{"name":"error.lightbox","description":"Lightbox error; Triggered on window"}],"methods":[{"name":"close","description":"Closes active instance.","examples":["$.lightbox(\"close\");"]},{"name":"defaults","description":"Extends plugin default settings; effects instances created hereafter.","params":[{"name":"options","type":"object","default":"{}","description":"New plugin defaults"}],"examples":["$.lightbox(\"defaults\", { ... });"]},{"name":"destroy","description":"Removes plugin instance.","examples":["$(\".target\").lightbox(\"destroy\");"]},{"name":"resize","description":"Resizes lightbox.","examples":["$.lightbox(\"resize\");"],"params":[{"name":"height","type":"int | false","description":"Target height or false to auto size"},{"name":"width","type":"int | false","description":"Target width or false to auto size"}]}],"name":"Lightbox","type":"widget","description":"A jQuery plugin for simple modals.","dependencies":["jQuery","core.js","touch.js","transition.js","viewer.js (optional)"],"css":[{"name":".fs-lightbox-element","type":"element","description":"Target elmement"},{"name":".fs-lightbox","type":"element","description":"Base widget class"},{"name":".fs-lightbox.fs-lightbox-open","type":"modifier","description":"Indicates open state"},{"name":".fs-lightbox.fs-lightbox-loading","type":"modifier","description":"Indicates loading state"},{"name":".fs-lightbox.fs-lightbox-animating","type":"modifier","description":"Indicates animating state"},{"name":".fs-lightbox.fs-lightbox-mobile","type":"modifier","description":"Indicates mobile display"},{"name":".fs-lightbox.fs-lightbox-fixed","type":"modifier","description":"Indicates fixed positioning"},{"name":".fs-lightbox.fs-lightbox-inline","type":"modifier","description":"Indicates inline content"},{"name":".fs-lightbox.fs-lightbox-iframed","type":"modifier","description":"Indicates iFrame content"},{"name":".fs-lightbox.fs-lightbox-has_caption","type":"modifier","description":"Indicates caption is present"},{"name":".fs-lightbox.fs-lightbox-has_controls","type":"modifier","description":"Indicates controls are present"},{"name":".fs-lightbox-overlay","type":"element","description":"Overlay element"},{"name":".fs-lightbox-close","type":"element","description":"Close element"},{"name":".fs-lightbox-loading_icon","type":"element","description":"Loading icon element"},{"name":".fs-lightbox-container","type":"element","description":"Container element"},{"name":".fs-lightbox-content","type":"element","description":"Content element"},{"name":".fs-lightbox-image","type":"element","description":"Image element"},{"name":".fs-lightbox-video","type":"element","description":"Video element"},{"name":".fs-lightbox-iframe","type":"element","description":"iFrame element"},{"name":".fs-lightbox-tools","type":"element","description":"Tools element"},{"name":".fs-lightbox-meta","type":"element","description":"Meta info element"},{"name":".fs-lightbox-controls","type":"element","description":"Controls container element"},{"name":".fs-lightbox-control","type":"element","description":"Control element"},{"name":".fs-lightbox-control.fs-lightbox-control_previous","type":"modifier","description":"Indicates previous control"},{"name":".fs-lightbox-control.fs-lightbox-control_next","type":"modifier","description":"Indicates next control"},{"name":".fs-lightbox-control.fs-lightbox-control_disabled","type":"modifier","description":"Indicates disbaled state"},{"name":".fs-lightbox-position","type":"element","description":"Position element"},{"name":".fs-lightbox-position_current","type":"element","description":"Current position element"},{"name":".fs-lightbox-position_total","type":"element","description":"Total position element"},{"name":".fs-lightbox-caption","type":"element","description":"Caption element"},{"name":".fs-lightbox-error","type":"element","description":"Error message element"},{"name":".fs-lightbox-thumbnails","type":"element","description":""},{"name":".fs-lightbox-thumbnail_container","type":"element","description":""},{"name":".fs-lightbox-thumbnail_item","type":"element","description":""},{"name":".fs-lightbox-lock","type":"modifier","description":"Indicates locked state; Applied to body element"}],"use":"### Basic\n\nDisplay images and videos in an overlay:\n\n```javascript\n$(\"a\").lightbox();\n```\n\n```markup\n<a href=\"one.jpg\" title=\"Image Caption\">\n <img src=\"one_thumb.jpg\" alt=\"\">\n</a>\n```\n\n### Gallery\n\nLink multiple images or videos together with the `data-lightbox-gallery` attribute:\n\n```markup\n<a href=\"one.jpg\" title=\"Image Caption One\" data-lightbox-gallery=\"photo_gallery\">\n <img src=\"one_thumb.jpg\" alt=\"\">\n</a>\n<a href=\"two.jpg\" title=\"Image Caption Two\" data-lightbox-gallery=\"photo_gallery\">\n <img src=\"two_thumb.jpg\" alt=\"\">\n</a>\n<a href=\"three.jpg\" title=\"Image Caption Three\" data-lightbox-gallery=\"photo_gallery\">\n <img src=\"three_thumb.jpg\" alt=\"\">\n</a>\n```\n\n<h3>Events</h3>\n\nReact to the lightbox by listening for the `open.lightbox` and `close.lightbox` events on the `window`:\n\n```javascript\n$(window).on(\"open.lightbox\", function() {\n // ...\n}).on(\"close.lightbox\", function() {\n // ...\n});\n```","demo":"<h4>Basic</h4>\n\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"gallery\">\r\n <a href=\"https://spacehold.it/1200x900/1.jpg?v=1.20\" class=\"lightbox_image js-lightbox\" title=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\">\r\n <img src=\"https://spacehold.it/300x300/1.jpg\" alt=\"\">\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><a href="large.jpg" class="lightbox" title="Image caption text.">\r\n	<img src="thumbnail.jpg" alt="">\r\n</a></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".lightbox\").lightbox();</code></pre>\r\n </div>\r\n</div>\n\r\n<style>\r\n .inline_content { width: 300px; overflow: hidden; padding: 0 20px; }\r\n .inline_content h2 { margin-top: 20px; }\r\n\r\n .fs-lightbox h3 { font-style: italic; font-size: 16px; margin: 0; padding: 5px 0; }\r\n\r\n .fs-lightbox-mobile .inline_content,\r\n .fs-lightbox-mobile .inline_content h3 { color: #fff; }\r\n</style>\r\n\r\n<script>\r\n Formstone.Ready(function() {\r\n $.lightbox(\"defaults\", {\r\n videoFormatter: {\r\n \"viddler\": {\r\n pattern: /(?:viddler\\.com\\/)((v\\/)|(\\/u\\/\\w\\/)|(embed\\/)|(watch\\?))\\??v?=?([^#\\&\\?\\/]*)/,\r\n format: function formatViddler(parts) {\r\n return '//www.viddler.com/embed/' + parts[6];\r\n }\r\n }\r\n }\r\n });\r\n\r\n $(\".lightbox\").not(\".lightbox_format\").lightbox({\r\n });\r\n\r\n $(\".js-lightbox_format\").lightbox({\r\n formatter: customFormat\r\n });\r\n\r\n $(\".js-lightbox_object\").click(launchObject);\r\n });\r\n\r\n function customFormat() {\r\n return '<h3>' + this.attr(\"title\") + \"</h3>\";\r\n }\r\n\r\n function launchObject() {\r\n $.lightbox( $('<div class=\"inline_content\"><h2>More Content!</h2><p>This was created by jQuery and loaded into the new Lightbox instance.</p></div>'), {\r\n mobile: true,\r\n theme: $(\".js-theme_select\").val()\r\n });\r\n }\r\n</script>\r\n\r\n<h4>Gallery</h4>\n\n<!-- START: FIRSTDEMO -->\n\n<style>\n .gallery { margin: 20px 0; overflow: hidden; }\n\n .lightbox_image { display: block; float: left; margin: 0 2% 10px 0; width: 31.3333%; max-width: 150px; }\n .lightbox_image img { display: block; width: 100%; }\n\n .no-touch .lightbox_image:hover {\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n }\n</style>\n\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"gallery\">\r\n <a href=\"https://spacehold.it/1200x900/1.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"image_gallery\" title=\"Curabitur blandit tempus porttitor.\">\r\n <img src=\"https://spacehold.it/300x300/1.jpg\" alt=\"\">\r\n </a>\n <a href=\"https://spacehold.it/900x1200/2.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"image_gallery\" title=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\">\r\n <img src=\"https://spacehold.it/300x300/2.jpg\" alt=\"\">\r\n </a>\r\n <a href=\"https://spacehold.it/1200x900/3.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"image_gallery\" title=\"Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.\">\r\n <img src=\"https://spacehold.it/300x300/3.jpg\" alt=\"\">\r\n </a>\n\n <!-- <a href=\"//www.youtube.com/embed/zsJpUCWfyPE?rel=0&autoplay=1&fs=1\" class=\"button lightbox\" data-lightbox-gallery=\"image_gallery\" title=\"Sed posuere consectetur est at lobortis.\">\n YouTube Video\n </a> -->\n </div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><a href="large_1.jpg" class="lightbox" data-lightbox-gallery="gallery_name" title="Image caption text.">\r\n	<img src="thumbnail_1.jpg" alt="">\r\n</a>\r\n<a href="large_2.jpg" class="lightbox" data-lightbox-gallery="gallery_name" title="Image caption text.">\r\n	<img src="thumbnail_2.jpg" alt="">\r\n</a>\r\n<a href="large_3.jpg" class="lightbox" data-lightbox-gallery="gallery_name" title="Image caption text.">\r\n	<img src="thumbnail_3.jpg" alt="">\r\n</a></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".lightbox\").lightbox();</code></pre>\r\n </div>\r\n</div>\n\n<!-- END: FIRSTDEMO -->\n\r\n<h4>Thumbnails</h4>\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"gallery\">\r\n <a href=\"https://spacehold.it/1200x900/1.jpg\" class=\"button js-lightbox\" data-lightbox-gallery=\"thumbnail_gallery\" title=\"Curabitur blandit tempus porttitor.\" data-lightbox-thumbnail=\"https://spacehold.it/300x300/1.jpg\" data-lightbox-options='{\"thumbnails\":true}'>\r\n Thumbnail Gallery\r\n </a>\r\n <a href=\"https://spacehold.it/1200x900/1.jpg\" class=\"button js-lightbox\" data-lightbox-gallery=\"mobile_thumbnail_gallery\" title=\"Curabitur blandit tempus porttitor.\" data-lightbox-thumbnail=\"https://spacehold.it/300x300/1.jpg\" data-lightbox-options='{\"thumbnails\":true,\"mobile\":true}'>\r\n Mobile Thumbnail Gallery\r\n </a>\r\n </div>\r\n <div style=\"display: none;\">\r\n <a href=\"https://spacehold.it/900x1200/2.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"thumbnail_gallery\" title=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\" data-lightbox-options='{\"thumbnails\":true}'>\r\n <img src=\"https://spacehold.it/300x200/2.jpg\" alt=\"\">\r\n </a>\r\n <a href=\"https://spacehold.it/1200x900/3.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"thumbnail_gallery\" title=\"Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.\" data-lightbox-options='{\"thumbnails\":true}'>\r\n <img src=\"https://spacehold.it/200x300/3.jpg\" alt=\"\">\r\n </a>\r\n <a href=\"https://spacehold.it/900x1200/4.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"thumbnail_gallery\" title=\"Sed posuere consectetur est at lobortis.\" data-lightbox-options='{\"thumbnails\":true}'>\r\n <img src=\"https://spacehold.it/300x300/4.jpg\" alt=\"\">\r\n </a>\r\n <a href=\"https://spacehold.it/1200x900/5.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"thumbnail_gallery\" title=\"Nulla vitae elit libero, a pharetra augue.\" data-lightbox-options='{\"thumbnails\":true}'>\r\n <img src=\"https://spacehold.it/300x200/5.jpg\" alt=\"\">\r\n </a>\r\n <a href=\"https://spacehold.it/900x1200/6.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"thumbnail_gallery\" title=\"Nullam quis risus eget urna mollis ornare vel eu leo.\" data-lightbox-options='{\"thumbnails\":true}'>\r\n <img src=\"https://spacehold.it/200x300/6.jpg\" alt=\"\">\r\n </a>\r\n <a href=\"https://spacehold.it/1200x900/7.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"thumbnail_gallery\" title=\"Aenean lacinia bibendum nulla sed consectetur.\" data-lightbox-options='{\"thumbnails\":true}'>\r\n <img src=\"https://spacehold.it/300x300/7.jpg\" alt=\"\">\r\n </a>\r\n <a href=\"https://spacehold.it/900x1200/8.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"thumbnail_gallery\" title=\"Sed posuere consectetur est at lobortis.\" data-lightbox-options='{\"thumbnails\":true}'>\r\n <img src=\"https://spacehold.it/300x200/8.jpg\" alt=\"\">\r\n </a>\r\n <a href=\"https://spacehold.it/1200x900/9.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"thumbnail_gallery\" title=\"Praesent commodo cursus magna, vel scelerisque nisl consectetur et.\" data-lightbox-options='{\"thumbnails\":true}'>\r\n <img src=\"https://spacehold.it/200x300/9.jpg\" alt=\"\">\r\n </a>\r\n <a href=\"https://spacehold.it/900x1200/10.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"thumbnail_gallery\" title=\"Nullam quis risus eget urna mollis ornare vel eu leo.\" data-lightbox-options='{\"thumbnails\":true}'>\r\n <img src=\"https://spacehold.it/300x300/10.jpg\" alt=\"\">\r\n </a>\r\n </div>\r\n <div style=\"display: none;\">\r\n <a href=\"https://spacehold.it/1200x900/2.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"mobile_thumbnail_gallery\" title=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\" data-lightbox-options='{\"thumbnails\":true}'>\r\n <img src=\"https://spacehold.it/300x200/2.jpg\" alt=\"\">\r\n </a>\r\n <a href=\"https://spacehold.it/900x1200/3.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"mobile_thumbnail_gallery\" title=\"Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.\" data-lightbox-options='{\"thumbnails\":true}'>\r\n <img src=\"https://spacehold.it/200x300/3.jpg\" alt=\"\">\r\n </a>\r\n <a href=\"https://spacehold.it/1200x900/4.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"mobile_thumbnail_gallery\" title=\"Sed posuere consectetur est at lobortis.\" data-lightbox-options='{\"thumbnails\":true}'>\r\n <img src=\"https://spacehold.it/300x300/4.jpg\" alt=\"\">\r\n </a>\r\n <a href=\"https://spacehold.it/900x1200/5.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"mobile_thumbnail_gallery\" title=\"Nulla vitae elit libero, a pharetra augue.\" data-lightbox-options='{\"thumbnails\":true}'>\r\n <img src=\"https://spacehold.it/300x200/5.jpg\" alt=\"\">\r\n </a>\r\n <a href=\"https://spacehold.it/1200x900/6.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"mobile_thumbnail_gallery\" title=\"Nullam quis risus eget urna mollis ornare vel eu leo.\" data-lightbox-options='{\"thumbnails\":true}'>\r\n <img src=\"https://spacehold.it/200x300/6.jpg\" alt=\"\">\r\n </a>\r\n <a href=\"https://spacehold.it/900x1200/7.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"mobile_thumbnail_gallery\" title=\"Aenean lacinia bibendum nulla sed consectetur.\" data-lightbox-options='{\"thumbnails\":true}'>\r\n <img src=\"https://spacehold.it/300x300/7.jpg\" alt=\"\">\r\n </a>\r\n <a href=\"https://spacehold.it/1200x900/8.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"mobile_thumbnail_gallery\" title=\"Sed posuere consectetur est at lobortis.\" data-lightbox-options='{\"thumbnails\":true}'>\r\n <img src=\"https://spacehold.it/300x200/8.jpg\" alt=\"\">\r\n </a>\r\n <a href=\"https://spacehold.it/900x1200/9.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"mobile_thumbnail_gallery\" title=\"Praesent commodo cursus magna, vel scelerisque nisl consectetur et.\" data-lightbox-options='{\"thumbnails\":true}'>\r\n <img src=\"https://spacehold.it/200x300/9.jpg\" alt=\"\">\r\n </a>\r\n <a href=\"https://spacehold.it/1200x900/10.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"mobile_thumbnail_gallery\" title=\"Nullam quis risus eget urna mollis ornare vel eu leo.\" data-lightbox-options='{\"thumbnails\":true}'>\r\n <img src=\"https://spacehold.it/300x300/10.jpg\" alt=\"\">\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><a href="large_1.jpg" class="lightbox" data-lightbox-gallery="gallery_name" title="Image caption text.">\r\n	<img src="thumbnail_1.jpg" alt="">\r\n</a>\r\n<a href="large_2.jpg" class="lightbox" data-lightbox-gallery="gallery_name" title="Image caption text.">\r\n	<img src="thumbnail_2.jpg" alt="">\r\n</a>\r\n<a href="large_3.jpg" class="lightbox" data-lightbox-gallery="gallery_name" title="Image caption text.">\r\n	<img src="thumbnail_3.jpg" alt="">\r\n</a></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".lightbox\").lightbox({\r\n thumbnails: true\r\n});</code></pre>\r\n </div>\r\n</div>\r\n\r\n<h4>YouTube & Vimeo Videos</h4>\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"gallery\">\r\n <a href=\"//www.youtube.com/embed/zsJpUCWfyPE?rel=0&autoplay=1&fs=1\" class=\"button lightbox\" data-lightbox-gallery=\"video_gallery\" title=\"Sed posuere consectetur est at lobortis.\">\r\n YouTube Video\r\n </a>\r\n <a href=\"//player.vimeo.com/video/15091562?title=0&byline=0&portrait=0&autoplay=1&badge=0\" class=\"button lightbox\" data-lightbox-gallery=\"video_gallery\" title=\"Integer posuere erat a ante venenatis dapibus posuere velit aliquet.\">\r\n Vimeo Video\r\n </a>\r\n <a href=\"//www.viddler.com/embed/7c1804e8/?f=1&player=full&secret=30641456\" class=\"button lightbox\" data-lightbox-gallery=\"video_gallery\" title=\"Maecenas faucibus mollis interdum.\">\r\n Viddler Video (Custom Formatter)\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><a href="//www.youtube.com/embed/XXXXX?rel=0&autoplay=1&fs=1" class="lightbox" data-lightbox-gallery="gallery_name" title="Image caption text.">\r\n	<img src="youtube.jpg" alt="">\r\n</a>\r\n<a href="//player.vimeo.com/video/XXXXX?title=0&byline=0&portrait=0&autoplay=1&badge=0" class="lightbox" data-lightbox-gallery="gallery_name" title="Image caption text.">\r\n	<img src="vimeo.jpg" alt="">\r\n</a>\r\n<a href="//www.viddler.com/embed/XXXXX/?f=1&player=full&secret=XXXXX" class="lightbox" data-lightbox-gallery="gallery_name" title="Image caption text.">\r\n	<img src="viddler.jpg" alt="">\r\n</a></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".lightbox\").lightbox({\r\n videoFormatter: {\r\n \"viddler\": {\r\n pattern: /(?:viddler\\.com\\/)((v\\/)|(\\/u\\/\\w\\/)|(embed\\/)|(watch\\?))\\??v?=?([^#\\&\\?\\/]*)/,\r\n format: function formatViddler(parts) {\r\n return '//www.viddler.com/embed/' + parts[6];\r\n }\r\n }\r\n }\r\n});</code></pre>\r\n </div>\r\n</div>\r\n\r\n<h4>Mobile</h4>\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"gallery\">\r\n <a href=\"https://spacehold.it/1200x900/1.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"gallery_mobile\" data-lightbox-options='{\"mobile\":true}' title=\"\">\r\n <img src=\"https://spacehold.it/300x300/1.jpg\" alt=\"\">\r\n </a>\r\n <a href=\"https://spacehold.it/900x1200/2.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"gallery_mobile\" data-lightbox-options='{\"mobile\":true}' title=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\">\r\n <img src=\"https://spacehold.it/300x300/2.jpg\" alt=\"\">\r\n </a>\r\n <a href=\"https://spacehold.it/1200x900/3.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"gallery_mobile\" data-lightbox-options='{\"mobile\":true}' title=\"Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.\">\r\n <img src=\"https://spacehold.it/300x300/3.jpg\" alt=\"\">\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><a href="large_1.jpg" class="lightbox" title="Image caption text.">\r\n	<img src="thumbnail_1.jpg" alt="">\r\n</a></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".lightbox\").lightbox({\r\n mobile: true\r\n});</code></pre>\r\n </div>\r\n</div>\n\n<h4>Mobile without Viewer</h4>\n<div class=\"demo_container\">\n <div class=\"demo_example\">\n <div class=\"gallery\">\n <a href=\"https://spacehold.it/1200x900/1.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"gallery_mobile\" data-lightbox-options='{\"mobile\":true,\"viewer\":false}' title=\"\">\n <img src=\"https://spacehold.it/300x300/1.jpg\" alt=\"\">\n </a>\n <a href=\"https://spacehold.it/900x1200/2.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"gallery_mobile\" data-lightbox-options='{\"mobile\":true,\"viewer\":false}' title=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\">\n <img src=\"https://spacehold.it/300x300/2.jpg\" alt=\"\">\n </a>\n <a href=\"https://spacehold.it/1200x900/3.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"gallery_mobile\" data-lightbox-options='{\"mobile\":true,\"viewer\":false}' title=\"Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.\">\n <img src=\"https://spacehold.it/300x300/3.jpg\" alt=\"\">\n </a>\n </div>\n </div>\n <div class=\"demo_code\">\n <pre><code class=\"language-html\"><a href="large_1.jpg" class="lightbox" title="Image caption text.">\n	<img src="thumbnail_1.jpg" alt="">\n</a></code></pre>\n <pre><code class=\"language-javascript\">$(\".lightbox\").lightbox({\n mobile: true,\n viewer: false\n});</code></pre>\n </div>\n</div>\n\r\n<h4>Fixed Positioning (desktop only)</h4>\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"gallery\">\r\n <a href=\"https://spacehold.it/1200x900/1.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"gallery_fixed\" data-lightbox-options='{\"fixed\":true}' title=\"Curabitur blandit tempus porttitor.\">\r\n <img src=\"https://spacehold.it/300x300/1.jpg\" alt=\"\">\r\n </a>\r\n <a href=\"https://spacehold.it/900x1200/2.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"gallery_fixed\" data-lightbox-options='{\"fixed\":true}' title=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\">\r\n <img src=\"https://spacehold.it/300x300/2.jpg\" alt=\"\">\r\n </a>\r\n <a href=\"https://spacehold.it/1200x900/3.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"gallery_fixed\" data-lightbox-options='{\"fixed\":true}' title=\"Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.\">\r\n <img src=\"https://spacehold.it/300x300/3.jpg\" alt=\"\">\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><a href="large.jpg" class="lightbox" title="Image caption text.">\r\n	<img src="thumbnail.jpg" alt="">\r\n</a></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".lightbox\").lightbox({\r\n fixed: true\r\n});</code></pre>\r\n </div>\r\n</div>\r\n\r\n<h4>Top Positioning (desktop only)</h4>\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"gallery\">\r\n <a href=\"https://spacehold.it/1200x900/1.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"gallery_top\" data-lightbox-options='{\"top\":25}' title=\"Curabitur blandit tempus porttitor.\">\r\n <img src=\"https://spacehold.it/300x300/1.jpg\" alt=\"\">\r\n </a>\r\n <a href=\"https://spacehold.it/900x1200/2.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"gallery_top\" data-lightbox-options='{\"top\":25}' title=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\">\r\n <img src=\"https://spacehold.it/300x300/2.jpg\" alt=\"\">\r\n </a>\r\n <a href=\"https://spacehold.it/1200x900/3.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"gallery_top\" data-lightbox-options='{\"top\":25}' title=\"Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.\">\r\n <img src=\"https://spacehold.it/300x300/3.jpg\" alt=\"\">\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><a href="large.jpg" class="lightbox" title="Image caption text.">\r\n	<img src="thumbnail.jpg" alt="">\r\n</a></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".lightbox\").lightbox({\r\n top: 25\r\n});</code></pre>\r\n </div>\r\n</div>\r\n\r\n<h4>In-Line Content</h4>\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"gallery\">\r\n <a href=\"#hidden_content\" class=\"button js-lightbox\">Show Hidden Content</a>\r\n </div>\r\n <div id=\"hidden_content\" style=\"display: none;\">\r\n <div class=\"inline_content\">\r\n <h2>Some Content!</h2>\r\n <p>This was hidden on the page and loaded into the new Lightbox instance.</p>\r\n <label>\r\n <input type=\"checkbox\" class=\"\"> Testing a checkbox\r\n </label>\r\n </div>\r\n </div>\r\n <script>\r\n Formstone.Ready(function() {\r\n $(\"input[type=checkbox], input[type=radio]\").checkbox();\r\n });\r\n </script>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><a href="#hidden_content" class="lightbox"\r\n	Open Hidden Content\r\n</a>\r\n<div id="hidden_content" style="display: none;">\r\n	<div class="inline_content">\r\n		<h2>Inline Content!</h2>\r\n	</div>\r\n</div></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".lightbox\").lightbox();</code></pre>\r\n </div>\r\n</div>\r\n\r\n<h4>jQuery Objects</h4>\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"gallery\">\r\n <button class=\"button js-lightbox_object\">Show jQuery Object</button>\r\n </div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><a href="#" class="launch_lightbox"\r\n	Open jQuery Content\r\n</a></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".launch_lightbox\").click(launchLightbox);\r\n\r\nfunction launchLightbox() {\r\n var $content = $('<div class=\"inline_content\"><h2>More Content!</h2></div>');\r\n\r\n $.lightbox( $content );\r\n}</code></pre>\r\n </div>\r\n</div>\r\n\r\n<h4>iFrame</h4>\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"gallery\">\r\n <a href=\"https://en.wikipedia.org/wiki/NASA\" class=\"button js-lightbox\" data-lightbox-options='{\"maxHeight\":600,\"maxWidth\":600}'>View NASA Entry</a>\r\n </div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><a href="http://example.com" class="lightbox">\r\n	Example.com\r\n</a></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".lightbox\").lightbox();</code></pre>\r\n </div>\r\n</div>\r\n\r\n\r\n<h4>Sizing (desktop only)</h4>\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"gallery\">\r\n <a href=\"https://en.wikipedia.org/wiki/NASA\" class=\"button js-lightbox\" data-lightbox-height=\"500\" data-lightbox-width=\"500\">View NASA Entry</a>\r\n </div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><a href="http://example.com" class="lightbox" data-lightbox-height="500" data-lightbox-width="500">\r\n	Example.com\r\n</a></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".lightbox\").lightbox();</code></pre>\r\n </div>\r\n</div>\r\n\r\n<h4>Caption Formating</h4>\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"gallery\">\r\n <a href=\"https://spacehold.it/1200x900/1.jpg\" class=\"lightbox_image js-lightbox_format\" title=\"Curabitur blandit tempus porttitor.\">\r\n <img src=\"https://spacehold.it/300x300/1.jpg\" alt=\"\">\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><a href="large.jpg" class="lightbox" title="Image caption text.">\r\n	<img src="thumbnail.jpg" alt="">\r\n</a></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".lightbox\").lightbox({\r\n formatter: formatLightboxCaption\r\n});\r\n\r\nfunction formatLightboxCaption() {\r\n return \"<h3>\" + $(this).attr(\"title\") + \"</h3>\";\r\n}</code></pre>\r\n </div>\r\n</div>\r\n\r\n<!-- <h4>Retina Support</h4>\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"gallery\">\r\n <a href=\"https://spacehold.it/2400x1800/4.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-options='{\"retina\":true}' title=\"By Apollo 15 astronaut.Bubba73 at en.wikipedia [Public domain], from Wikimedia Commons\">\r\n <img src=\"https://spacehold.it/600x600/4.jpg\" alt=\"\">\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><a href="large-2x.jpg" class="lightbox" title="Image caption text.">\r\n	<img src="thumbnail-2x.jpg" alt="">\r\n</a></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".lightbox\").lightbox({\r\n retina: true\r\n});</code></pre>\r\n </div>\r\n</div> -->\n\r\n<h4>No Theme</h4>\r\n<div class=\"demo_container\">\r\n <div class=\"demo_example\">\r\n <div class=\"gallery\">\r\n <a href=\"https://spacehold.it/1200x900/1.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"image_gallery_2\" title=\"Curabitur blandit tempus porttitor.\" data-lightbox-options='{\"theme\":\"\"}'>\r\n <img src=\"https://spacehold.it/300x300/1.jpg\" alt=\"\">\r\n </a>\r\n <a href=\"https://spacehold.it/900x1200/2.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"image_gallery_2\" title=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\" data-lightbox-options='{\"theme\":\"\"}'>\r\n <img src=\"https://spacehold.it/300x300/2.jpg\" alt=\"\">\r\n </a>\r\n <a href=\"https://spacehold.it/1200x900/3.jpg\" class=\"lightbox_image js-lightbox\" data-lightbox-gallery=\"image_gallery_2\" title=\"Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.\" data-lightbox-options='{\"theme\":\"\"}'>\r\n <img src=\"https://spacehold.it/300x300/3.jpg\" alt=\"\">\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"demo_code\">\r\n <pre><code class=\"language-html\"><a href="large.jpg" class="lightbox" title="Image caption text.">\r\n	<img src="thumbnail.jpg" alt="">\r\n</a></code></pre>\r\n <pre><code class=\"language-javascript\">$(\".lightbox\").lightbox({\r\n theme: \"\"\r\n});</code></pre>\r\n </div>\r\n</div>\r\n","document":"# Lightbox\n\nA jQuery plugin for simple modals.\n\n<!-- HEADER END -->\n\n<!-- NAV START -->\n\n* [Use](#use)\n* [Options](#options)\n* [Events](#events)\n* [Methods](#methods)\n* [CSS](#css)\n\n<!-- NAV END -->\n\n<!-- DEMO BUTTON -->\n\n<a name=\"use\"></a>\n\n## Using Lightbox\n\n\n#### Main\n\n```markup\nlightbox.js\nlightbox.css\n```\n\n\n#### Dependencies\n\n```markup\njQuery\ncore.js\ntouch.js\ntransition.js\nviewer.js (optional)\n```\n\n### Basic\n\nDisplay images and videos in an overlay:\n\n```javascript\n$(\"a\").lightbox();\n```\n\n```markup\n<a href=\"one.jpg\" title=\"Image Caption\">\n <img src=\"one_thumb.jpg\" alt=\"\">\n</a>\n```\n\n### Gallery\n\nLink multiple images or videos together with the `data-lightbox-gallery` attribute:\n\n```markup\n<a href=\"one.jpg\" title=\"Image Caption One\" data-lightbox-gallery=\"photo_gallery\">\n <img src=\"one_thumb.jpg\" alt=\"\">\n</a>\n<a href=\"two.jpg\" title=\"Image Caption Two\" data-lightbox-gallery=\"photo_gallery\">\n <img src=\"two_thumb.jpg\" alt=\"\">\n</a>\n<a href=\"three.jpg\" title=\"Image Caption Three\" data-lightbox-gallery=\"photo_gallery\">\n <img src=\"three_thumb.jpg\" alt=\"\">\n</a>\n```\n\n<h3>Events</h3>\n\nReact to the lightbox by listening for the `open.lightbox` and `close.lightbox` events on the `window`:\n\n```javascript\n$(window).on(\"open.lightbox\", function() {\n // ...\n}).on(\"close.lightbox\", function() {\n // ...\n});\n```\n\n\n<a name=\"options\"></a>\n\n## Options\n\nSet instance options by passing a valid object at initialization, or to the public `defaults` method. Custom options for a specific instance can also be set by attaching a `data-lightbox-options` attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `customClass` | `string` | `''` | Class applied to instance |\n| `fileTypes` | `regex` | | Image file types |\n| `fixed` | `boolean` | `false` | Flag for fixed positioning |\n| `formatter` | `function` | `$.noop` | Caption format function |\n| `infinite` | `boolean` | `false` | Flag for infinite galleries |\n| `labels.close` | `string` | `'Close'` | Close button text |\n| `labels.count` | `string` | `'of'` | Gallery count separator text |\n| `labels.next` | `string` | `'Next'` | Gallery control text |\n| `labels.previous` | `string` | `'Previous'` | Gallery control text |\n| `labels.captionClosed` | `string` | `'Close Caption'` | Mobile caption toggle text, closed state |\n| `labels.captionOpen` | `string` | `'View Caption'` | Mobile caption toggle text, open state |\n| `labels.thumbnailsClosed` | `string` | `'Close Thumbnails'` | Mobile thumbnails toggle text, closed state |\n| `labels.thumbnailsOpen` | `string` | `'View Thumbnails'` | Mobile thumbnails toggle text, open state |\n| `labels.lightbox` | `string` | `'Lightbox {guid}'` | Lightbox aria label; {guid} replaced with instance GUID |\n| `margin` | `int` | `50` | Margin used when sizing (single side) |\n| `maxHeight` | `int` | `10000` | Maximum height of element modal |\n| `maxWidth` | `int` | `10000` | Maximum width of element modal |\n| `minHeight` | `int` | `100` | Minimum height of modal |\n| `minWidth` | `int` | `100` | Minimum width of modal |\n| `overlay` | `boolean` | `false` | Flag to force 'overlay' ('mobile') rendering |\n| `retina` | `boolean` | `false` | Flag to use 'retina' sizing (halves natural sizes) |\n| `requestKey` | `string` | `'fs-lightbox'` | GET variable for ajax / iframe requests |\n| `theme` | `string` | `\"fs-light\"` | Theme class name |\n| `thumbnails` | `boolean` | `false` | Flag to display thumbnail strip |\n| `top` | `int` | `0` | Target top position; over-rides centering |\n| `videoFormatter` | | | Object of video formatter objects containing a 'pattern' regex and 'format' callback |\n| `videoRatio` | `number` | `0.5625` | Video height / width ratio (9 / 16 = 0.5625) |\n| `videoWidth` | `int` | `800` | Video max width |\n| `viewer` | `boolean` | `false` | Flag to force 'Viewer' rendering, if available |\n\n<hr>\n<a name=\"events\"></a>\n\n## Events\n\nEvents are triggered on the target instance's element, unless otherwise stated.\n\n| Event | Description |\n| --- | --- |\n| `open.lightbox` | Lightbox opened; Triggered on window |\n| `close.lightbox` | Lightbox closed; Triggered on window |\n| `error.lightbox` | Lightbox error; Triggered on window |\n\n<hr>\n<a name=\"methods\"></a>\n\n## Methods\n\nMethods are publicly available to all active instances, unless otherwise stated.\n\n### close\n\nCloses active instance.\n\n```javascript\n$.lightbox(\"close\");\n```\n\n### defaults\n\nExtends plugin default settings; effects instances created hereafter.\n\n```javascript\n$.lightbox(\"defaults\", { ... });\n```\n\n#### Parameters\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `options` | `object` | `{}` | New plugin defaults |\n\n### destroy\n\nRemoves plugin instance.\n\n```javascript\n$(\".target\").lightbox(\"destroy\");\n```\n\n### resize\n\nResizes lightbox.\n\n```javascript\n$.lightbox(\"resize\");\n```\n\n#### Parameters\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `height` | `int | false` | | Target height or false to auto size |\n| `width` | `int | false` | | Target width or false to auto size |\n\n<hr>\n<a name=\"css\"></a>\n\n## CSS\n\n| Class | Type | Description |\n| --- | --- | --- |\n| `.fs-lightbox-element` | `element` | Target elmement |\n| `.fs-lightbox` | `element` | Base widget class |\n| `.fs-lightbox.fs-lightbox-open` | `modifier` | Indicates open state |\n| `.fs-lightbox.fs-lightbox-loading` | `modifier` | Indicates loading state |\n| `.fs-lightbox.fs-lightbox-animating` | `modifier` | Indicates animating state |\n| `.fs-lightbox.fs-lightbox-mobile` | `modifier` | Indicates mobile display |\n| `.fs-lightbox.fs-lightbox-fixed` | `modifier` | Indicates fixed positioning |\n| `.fs-lightbox.fs-lightbox-inline` | `modifier` | Indicates inline content |\n| `.fs-lightbox.fs-lightbox-iframed` | `modifier` | Indicates iFrame content |\n| `.fs-lightbox.fs-lightbox-has_caption` | `modifier` | Indicates caption is present |\n| `.fs-lightbox.fs-lightbox-has_controls` | `modifier` | Indicates controls are present |\n| `.fs-lightbox-overlay` | `element` | Overlay element |\n| `.fs-lightbox-close` | `element` | Close element |\n| `.fs-lightbox-loading_icon` | `element` | Loading icon element |\n| `.fs-lightbox-container` | `element` | Container element |\n| `.fs-lightbox-content` | `element` | Content element |\n| `.fs-lightbox-image` | `element` | Image element |\n| `.fs-lightbox-video` | `element` | Video element |\n| `.fs-lightbox-iframe` | `element` | iFrame element |\n| `.fs-lightbox-tools` | `element` | Tools element |\n| `.fs-lightbox-meta` | `element` | Meta info element |\n| `.fs-lightbox-controls` | `element` | Controls container element |\n| `.fs-lightbox-control` | `element` | Control element |\n| `.fs-lightbox-control.fs-lightbox-control_previous` | `modifier` | Indicates previous control |\n| `.fs-lightbox-control.fs-lightbox-control_next` | `modifier` | Indicates next control |\n| `.fs-lightbox-control.fs-lightbox-control_disabled` | `modifier` | Indicates disbaled state |\n| `.fs-lightbox-position` | `element` | Position element |\n| `.fs-lightbox-position_current` | `element` | Current position element |\n| `.fs-lightbox-position_total` | `element` | Total position element |\n| `.fs-lightbox-caption` | `element` | Caption element |\n| `.fs-lightbox-error` | `element` | Error message element |\n| `.fs-lightbox-thumbnails` | `element` | |\n| `.fs-lightbox-thumbnail_container` | `element` | |\n| `.fs-lightbox-thumbnail_item` | `element` | |\n| `.fs-lightbox-lock` | `modifier` | Indicates locked state; Applied to body element |\n\n"}