diff --git a/dist/css/app.css b/dist/css/app.css index d0c9691..d9c4c5b 100644 --- a/dist/css/app.css +++ b/dist/css/app.css @@ -1 +1,131 @@ -.meta-lightbox-overlay{position:fixed;top:0;left:0;z-index:99998;width:100%;height:100%;overflow:hidden;visibility:hidden;opacity:0;box-sizing:border-box}.meta-lightbox-overlay.meta-lightbox-open{visibility:visible;opacity:1}.meta-lightbox-wrap{position:absolute;top:10%;bottom:10%;left:10%;right:10%}.meta-lightbox-content,.meta-lightbox-wrap{display:flex;align-items:center;text-align:center;justify-content:center}.meta-lightbox-content{flex-direction:row;color:#fff;width:100%;height:100%}.meta-lightbox-content .meta-lightbox-ajax{color:#212529}.meta-lightbox-content .meta-lightbox-zoom-wrapper{display:block;height:100%;width:100%}.meta-lightbox-content .meta-lightbox-zoom-wrapper:after{color:#fff;font:normal normal normal 14px/1 FontAwesome;content:"\f00e";position:absolute;bottom:1em;right:1em;text-shadow:1px 1px 1px #000}.meta-lightbox-content .meta-lightbox-zoom-wrapper.no-zoom:after{display:none}.meta-lightbox-title-wrap{position:absolute;bottom:0;left:0;width:100%;z-index:99999;text-align:center}.meta-lightbox-nav{display:none}.meta-lightbox-prev{position:absolute;top:50%;left:0}.meta-lightbox-next{position:absolute;top:50%;right:0}.meta-lightbox-close{position:absolute;top:2%;right:2%;line-height:1em}.meta-lightbox-image{text-align:center}.meta-lightbox-image img{max-width:100%;max-height:100%;width:auto;height:auto;vertical-align:middle}.meta-lightbox-content iframe{width:100%;height:100%}.meta-lightbox-ajax,.meta-lightbox-inline{max-height:100%;overflow:auto}.meta-lightbox-error{display:flex;flex-direction:column;justify-content:center;text-align:center;width:100%;height:100%;color:#fff;text-shadow:0 1px 1px #000}.meta-lightbox-error .alert{margin:0;text-shadow:none}.meta-lightbox-error p{display:table-cell;vertical-align:middle}.meta-lightbox-notouch .meta-lightbox-effect-fade,.meta-lightbox-notouch .meta-lightbox-effect-fadeScale,.meta-lightbox-notouch .meta-lightbox-effect-fall,.meta-lightbox-notouch .meta-lightbox-effect-slideDown,.meta-lightbox-notouch .meta-lightbox-effect-slideLeft,.meta-lightbox-notouch .meta-lightbox-effect-slideRight,.meta-lightbox-notouch .meta-lightbox-effect-slideUp{transition:all .2s ease-in-out}.meta-lightbox-effect-fadeScale .meta-lightbox-wrap{transition:all .3s;transform:scale(.7)}.meta-lightbox-effect-fadeScale.meta-lightbox-open .meta-lightbox-wrap{transform:scale(1)}.meta-lightbox-effect-slideDown .meta-lightbox-wrap,.meta-lightbox-effect-slideLeft .meta-lightbox-wrap,.meta-lightbox-effect-slideRight .meta-lightbox-wrap,.meta-lightbox-effect-slideUp .meta-lightbox-wrap{transition:all .3s cubic-bezier(.25,.5,.5,.9)}.meta-lightbox-effect-slideLeft .meta-lightbox-wrap{transform:translateX(-10%)}.meta-lightbox-effect-slideRight .meta-lightbox-wrap{transform:translateX(10%)}.meta-lightbox-effect-slideLeft.meta-lightbox-open .meta-lightbox-wrap,.meta-lightbox-effect-slideRight.meta-lightbox-open .meta-lightbox-wrap{transform:translateX(0)}.meta-lightbox-effect-slideDown .meta-lightbox-wrap{transform:translateY(-10%)}.meta-lightbox-effect-slideUp .meta-lightbox-wrap{transform:translateY(10%)}.meta-lightbox-effect-slideDown.meta-lightbox-open .meta-lightbox-wrap,.meta-lightbox-effect-slideUp.meta-lightbox-open .meta-lightbox-wrap{transform:translateY(0)}.meta-lightbox-body-effect-fall .meta-lightbox-effect-fall{perspective:1000px}.meta-lightbox-effect-fall .meta-lightbox-wrap{transition:all .3s ease-out;transform:translateZ(300px)}.meta-lightbox-effect-fall.meta-lightbox-open .meta-lightbox-wrap{transform:translateZ(0)}.meta-lightbox-theme-default.meta-lightbox-overlay{background:#666;background:rgba(0,0,0,.6)}.meta-lightbox-theme-default .meta-lightbox-nav{top:10%;width:20%;height:80%;background-repeat:no-repeat;background-position:50% 50%;opacity:.5;color:#fff;font-size:3em;text-decoration:none;text-shadow:1px 1px 0 #000}@media (min-width:576px){.meta-lightbox-theme-default .meta-lightbox-nav{width:8%}}.meta-lightbox-theme-default .meta-lightbox-nav .fa{position:absolute;top:50%;left:50%;margin-top:-1em;margin-left:-.2em}.meta-lightbox-theme-default .meta-lightbox-nav:hover{color:#007bff;opacity:1;background-color:rgba(0,0,0,.5)}.meta-lightbox-theme-default .meta-lightbox-close{display:block;opacity:.5;color:#fff;text-decoration:none;font-size:2em;text-shadow:1px 1px 0 #000;text-align:center;width:1.2em;height:1.2em;line-height:1.2em}.meta-lightbox-theme-default .meta-lightbox-close:focus{color:#007bff;opacity:1;background-color:rgba(0,0,0,.5)}.meta-lightbox-theme-default .meta-lightbox-title{background:#000;color:#fff;padding:7px 15px}.meta-lightbox-theme-default .meta-lightbox-ajax,.meta-lightbox-theme-default .meta-lightbox-inline{color:#000;background:#fff;padding:2em;box-shadow:0 1px 1px rgba(0,0,0,.6)}@media (max-width:576px){.meta-lightbox-wrap{top:5px!important;bottom:5px;left:5px;right:5px}.meta-lightbox-theme-default .meta-lightbox-nav{height:100%;opacity:1;font-size:2em}.meta-lightbox-theme-default .meta-lightbox-nav .fa{margin-left:-.4em}.meta-lightbox-theme-default .meta-lightbox-close{opacity:1}} \ No newline at end of file +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; } + +.meta-MetaWindow .meta-spinner_embed, +.meta-MetaWindow .meta-spinner, +.meta-MetaWindow .meta-error { + display: none; + align-items: center; + justify-content: center; + z-index: 2; + text-align: center; } + +.meta-MetaWindow .meta-spinner_embed, +.meta-MetaWindow .meta-spinner { + font-size: 2rem; + color: #fff; + font-weight: bold; + text-transform: uppercase; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; } + +.meta-MetaWindow .meta-spinner_embed { + display: flex; } + +.meta-MetaWindow-overlay { + background: rgba(96, 125, 139, 0.8); + display: none; + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + align-items: center; + justify-content: center; } + .meta-MetaWindow-overlay__open { + display: flex; } + .meta-MetaWindow-overlay__loading .meta-spinner { + display: flex; } + .meta-MetaWindow-overlay__error .meta-content { + justify-content: center; } + .meta-MetaWindow-overlay__error .meta-error { + display: flex; } + +.meta-MetaWindow .meta-close { + font-size: 1.2rem; + color: #212121; + text-shadow: #fff 0 0 0.25em; + position: absolute; + top: 0; + right: 0; + padding: 0.5em 0.651em; + border: 0; + background: none; + z-index: 2; } + .meta-MetaWindow .meta-close:hover, .meta-MetaWindow .meta-close:focus { + color: #eceff1; + background: #2196f3; + text-shadow: none; } + +.meta-MetaWindow .meta-content { + position: relative; + width: 90%; + height: 90%; + display: flex; + flex-direction: column; } + +.meta-MetaWindow .meta-wrap { + max-height: 100%; + max-width: 100%; + width: 100%; + overflow: auto; } + .meta-MetaWindow .meta-wrap img { + max-width: 100%; + max-height: 100%; } + +.meta-MetaWindow__text .meta-close { + background: #fff; } + +.meta-MetaWindow__text .meta-content { + background: #fff; + color: #000; + padding: 1rem 1rem; + padding-right: 0; } + +.meta-MetaWindow__text .meta-wrap { + padding-right: 1rem; } + +.meta-MetaWindow__image .typography, +.meta-MetaWindow__image .meta-wrap, .meta-MetaWindow__video .typography, +.meta-MetaWindow__video .meta-wrap { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + max-height: 100%; + max-width: 100%; + min-height: 100%; } + +.meta-MetaWindow__video:before, .meta-MetaWindow__embed:before { + content: ""; + display: block; + position: relative; + width: 100%; + padding-top: 56.25%; } + +.meta-MetaWindow__video a[rel='nofollow noreferrer noopener'], .meta-MetaWindow__embed a[rel='nofollow noreferrer noopener'] { + color: #fff; + font-size: 1.2rem; + font-weight: bold; } + .meta-MetaWindow__video a[rel='nofollow noreferrer noopener']:before, .meta-MetaWindow__embed a[rel='nofollow noreferrer noopener']:before { + content: 'Unable to load. Please follow the provided link: '; + display: block; } + +.meta-MetaWindow__video iframe, .meta-MetaWindow__embed iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } + diff --git a/dist/index.html b/dist/index.html index 622712f..f1cfad5 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1,3 +1,139 @@ -
Use data-toggle="lightbox" attribute to attach lightbox action and href to specify URL.
Use data-lightbox-gallery="YOUR_GALLERY_NAME" to group ligthboxes and use next/prev arrows
You can use data-href attribute to specify link and attach lightbox to another element
Note: You can add jquery-zoom plugin and lighbox will zoom photos on hover.
+ Load an Image
+
+
+
+
+ Load JSON
+
+
+
+
+ Load Partial AJAX HTML
+
+ Not Found test
+
+ Embed Youtube link
+
+ Embed Vimeo link
+
+
+ Embed SoundCloud link
+ Embed Instagram
+
+ + Use [data-toggle="lightbox"] attribute to attach lightbox action and + [href] to specify URL. + +
++ + Use [data-lightbox-gallery="YOUR_GALLERY_NAME"] to group ligthboxes with + next/prev arrows + +
++ Use [data-toggle="lightbox"] + [data-href] attribute to toggle lightbox on + regular elements. + Click me! +
+ ++ Note: You can add jquery-zoom plugin and lighbox will + zoom photos on hover. +
+ +