forked from friendica/friendica-addons
AddOn Fancybox
This addon loads all media attachments of a post into a "fancybox" instead of linking directly to the media. Each post gets its own attachment library, when there are more than one media attached you can scroll through them.
This commit is contained in:
parent
30329df0dd
commit
ae28f6ef01
9
fancybox/CHANGELOG.md
Normal file
9
fancybox/CHANGELOG.md
Normal file
|
@ -0,0 +1,9 @@
|
|||
### Version 1.01
|
||||
|
||||
* One gallery for each post
|
||||
* All media attached to a post are added to the posts gallery.
|
||||
* Loop scrolling: You can step from last media to first and vice versa.
|
||||
### Version 1.00
|
||||
|
||||
* First test version released.
|
||||
* One fancybox per page displaying first media of each post.
|
19
fancybox/README.md
Normal file
19
fancybox/README.md
Normal file
|
@ -0,0 +1,19 @@
|
|||
# Post image gallery using fancybox
|
||||
|
||||
Addon author: [Grischa Brockhaus](https://brockha.us)
|
||||
|
||||
## Description
|
||||
|
||||
This addon loads all media attachments of a post into a "fancybox" instead of linking directly to the media.
|
||||
|
||||
Each post gets its own attachment library, when there are more than one media attached you can scroll through them.
|
||||
|
||||
## Licenses
|
||||
|
||||
### Fancybox Library
|
||||
|
||||
This AddOn is using the jQuery library [fancybox](https://github.com/fancyapps/fancybox).
|
||||
|
||||
The fancyBox libryry is licensed under the GPLv3 license for all open source applications. A commercial license is required for all commercial applications (including sites, themes and apps you plan to sell).
|
||||
|
||||
[Read more about fancyBox license](https://github.com/fancyapps/fancybox).
|
62
fancybox/asset/fancybox/README.md
Normal file
62
fancybox/asset/fancybox/README.md
Normal file
|
@ -0,0 +1,62 @@
|
|||
# fancyBox 3.5.7
|
||||
|
||||
jQuery lightbox script for displaying images, videos and more.
|
||||
Touch enabled, responsive and fully customizable.
|
||||
|
||||
See the [project page](http://fancyapps.com/fancybox/3/) for documentation and a demonstration.
|
||||
|
||||
Follow [@thefancyapps](//twitter.com/thefancyapps) for updates.
|
||||
|
||||
|
||||
## Quick start
|
||||
|
||||
1\. Add latest jQuery and fancyBox files
|
||||
|
||||
```html
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
|
||||
|
||||
<link href="/path/to/jquery.fancybox.min.css" rel="stylesheet">
|
||||
<script src="/path/to/jquery.fancybox.min.js"></script>
|
||||
```
|
||||
|
||||
|
||||
2\. Create links
|
||||
|
||||
```html
|
||||
<a data-fancybox="gallery" href="big_1.jpg">
|
||||
<img src="small_1.jpg">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="gallery" href="big_2.jpg">
|
||||
<img src="small_2.jpg">
|
||||
</a>
|
||||
```
|
||||
|
||||
|
||||
3\. Enjoy!
|
||||
|
||||
|
||||
## License
|
||||
|
||||
fancyBox is licensed under the [GPLv3](http://choosealicense.com/licenses/gpl-3.0) license for all open source applications.
|
||||
A commercial license is required for all commercial applications (including sites, themes and apps you plan to sell).
|
||||
|
||||
[Read more about fancyBox license](http://fancyapps.com/fancybox/3/#license).
|
||||
|
||||
## Bugs and feature requests
|
||||
|
||||
If you find a bug, please report it [here on Github](https://github.com/fancyapps/fancybox/issues).
|
||||
|
||||
Guidelines for bug reports:
|
||||
|
||||
1. Use the GitHub issue search — check if the issue has already been reported.
|
||||
2. Check if the issue has been fixed — try to reproduce it using the latest master or development branch in the repository.
|
||||
3. Isolate the problem — create a reduced test case and a live example. You can use CodePen to fork any demo found on documentation to use it as a template.
|
||||
|
||||
A good bug report shouldn't leave others needing to chase you up for more information.
|
||||
Please try to be as detailed as possible in your report.
|
||||
|
||||
|
||||
Feature requests are welcome. Please look for existing ones and use GitHub's "reactions" feature to vote.
|
||||
|
||||
Please do not use the issue tracker for personal support requests - use Stack Overflow ([fancybox-3](http://stackoverflow.com/questions/tagged/fancybox-3) tag) instead.
|
3
fancybox/asset/fancybox/fancybox.config.js
Normal file
3
fancybox/asset/fancybox/fancybox.config.js
Normal file
|
@ -0,0 +1,3 @@
|
|||
$(document).ready(function() {
|
||||
$.fancybox.defaults.loop = "true";
|
||||
});
|
895
fancybox/asset/fancybox/jquery.fancybox.css
vendored
Normal file
895
fancybox/asset/fancybox/jquery.fancybox.css
vendored
Normal file
|
@ -0,0 +1,895 @@
|
|||
body.compensate-for-scrollbar {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fancybox-active {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.fancybox-is-hidden {
|
||||
left: -9999px;
|
||||
margin: 0;
|
||||
position: absolute !important;
|
||||
top: -9999px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.fancybox-container {
|
||||
-webkit-backface-visibility: hidden;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
outline: none;
|
||||
position: fixed;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
top: 0;
|
||||
-ms-touch-action: manipulation;
|
||||
touch-action: manipulation;
|
||||
transform: translateZ(0);
|
||||
width: 100%;
|
||||
z-index: 99992;
|
||||
}
|
||||
|
||||
.fancybox-container * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fancybox-outer,
|
||||
.fancybox-inner,
|
||||
.fancybox-bg,
|
||||
.fancybox-stage {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.fancybox-outer {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.fancybox-bg {
|
||||
background: rgb(30, 30, 30);
|
||||
opacity: 0;
|
||||
transition-duration: inherit;
|
||||
transition-property: opacity;
|
||||
transition-timing-function: cubic-bezier(.47, 0, .74, .71);
|
||||
}
|
||||
|
||||
.fancybox-is-open .fancybox-bg {
|
||||
opacity: .9;
|
||||
transition-timing-function: cubic-bezier(.22, .61, .36, 1);
|
||||
}
|
||||
|
||||
.fancybox-infobar,
|
||||
.fancybox-toolbar,
|
||||
.fancybox-caption,
|
||||
.fancybox-navigation .fancybox-button {
|
||||
direction: ltr;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
transition: opacity .25s ease, visibility 0s ease .25s;
|
||||
visibility: hidden;
|
||||
z-index: 99997;
|
||||
}
|
||||
|
||||
.fancybox-show-infobar .fancybox-infobar,
|
||||
.fancybox-show-toolbar .fancybox-toolbar,
|
||||
.fancybox-show-caption .fancybox-caption,
|
||||
.fancybox-show-nav .fancybox-navigation .fancybox-button {
|
||||
opacity: 1;
|
||||
transition: opacity .25s ease 0s, visibility 0s ease 0s;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.fancybox-infobar {
|
||||
color: #ccc;
|
||||
font-size: 13px;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
height: 44px;
|
||||
left: 0;
|
||||
line-height: 44px;
|
||||
min-width: 44px;
|
||||
mix-blend-mode: difference;
|
||||
padding: 0 10px;
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.fancybox-toolbar {
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.fancybox-stage {
|
||||
direction: ltr;
|
||||
overflow: visible;
|
||||
transform: translateZ(0);
|
||||
z-index: 99994;
|
||||
}
|
||||
|
||||
.fancybox-is-open .fancybox-stage {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fancybox-slide {
|
||||
-webkit-backface-visibility: hidden;
|
||||
/* Using without prefix would break IE11 */
|
||||
display: none;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
outline: none;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding: 44px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
transition-property: transform, opacity;
|
||||
white-space: normal;
|
||||
width: 100%;
|
||||
z-index: 99994;
|
||||
}
|
||||
|
||||
.fancybox-slide::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
font-size: 0;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.fancybox-is-sliding .fancybox-slide,
|
||||
.fancybox-slide--previous,
|
||||
.fancybox-slide--current,
|
||||
.fancybox-slide--next {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fancybox-slide--image {
|
||||
overflow: hidden;
|
||||
padding: 44px 0;
|
||||
}
|
||||
|
||||
.fancybox-slide--image::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fancybox-slide--html {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.fancybox-content {
|
||||
background: #fff;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding: 44px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.fancybox-slide--image .fancybox-content {
|
||||
animation-timing-function: cubic-bezier(.5, 0, .14, 1);
|
||||
-webkit-backface-visibility: hidden;
|
||||
background: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
left: 0;
|
||||
max-width: none;
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
-ms-transform-origin: top left;
|
||||
transform-origin: top left;
|
||||
transition-property: transform, opacity;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
z-index: 99995;
|
||||
}
|
||||
|
||||
.fancybox-can-zoomOut .fancybox-content {
|
||||
cursor: zoom-out;
|
||||
}
|
||||
|
||||
.fancybox-can-zoomIn .fancybox-content {
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.fancybox-can-swipe .fancybox-content,
|
||||
.fancybox-can-pan .fancybox-content {
|
||||
cursor: -webkit-grab;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.fancybox-is-grabbing .fancybox-content {
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.fancybox-container [data-selectable='true'] {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.fancybox-image,
|
||||
.fancybox-spaceball {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
max-height: none;
|
||||
max-width: none;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fancybox-spaceball {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fancybox-slide--video .fancybox-content,
|
||||
.fancybox-slide--map .fancybox-content,
|
||||
.fancybox-slide--pdf .fancybox-content,
|
||||
.fancybox-slide--iframe .fancybox-content {
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fancybox-slide--video .fancybox-content {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.fancybox-slide--map .fancybox-content {
|
||||
background: #e5e3df;
|
||||
}
|
||||
|
||||
.fancybox-slide--iframe .fancybox-content {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.fancybox-video,
|
||||
.fancybox-iframe {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
display: block;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Fix iOS */
|
||||
.fancybox-iframe {
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.fancybox-error {
|
||||
background: #fff;
|
||||
cursor: default;
|
||||
max-width: 400px;
|
||||
padding: 40px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fancybox-error p {
|
||||
color: #444;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
|
||||
.fancybox-button {
|
||||
background: rgba(30, 30, 30, .6);
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: 44px;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
transition: color .2s;
|
||||
vertical-align: top;
|
||||
visibility: inherit;
|
||||
width: 44px;
|
||||
}
|
||||
|
||||
.fancybox-button,
|
||||
.fancybox-button:visited,
|
||||
.fancybox-button:link {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.fancybox-button:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.fancybox-button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.fancybox-button.fancybox-focus {
|
||||
outline: 1px dotted;
|
||||
}
|
||||
|
||||
.fancybox-button[disabled],
|
||||
.fancybox-button[disabled]:hover {
|
||||
color: #888;
|
||||
cursor: default;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Fix IE11 */
|
||||
.fancybox-button div {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.fancybox-button svg {
|
||||
display: block;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fancybox-button svg path {
|
||||
fill: currentColor;
|
||||
stroke-width: 0;
|
||||
}
|
||||
|
||||
.fancybox-button--play svg:nth-child(2),
|
||||
.fancybox-button--fsenter svg:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fancybox-button--pause svg:nth-child(1),
|
||||
.fancybox-button--fsexit svg:nth-child(1) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fancybox-progress {
|
||||
background: #ff5268;
|
||||
height: 2px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
-ms-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
-ms-transform-origin: 0;
|
||||
transform-origin: 0;
|
||||
transition-property: transform;
|
||||
transition-timing-function: linear;
|
||||
z-index: 99998;
|
||||
}
|
||||
|
||||
/* Close button on the top right corner of html content */
|
||||
|
||||
.fancybox-close-small {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
color: #ccc;
|
||||
cursor: pointer;
|
||||
opacity: .8;
|
||||
padding: 8px;
|
||||
position: absolute;
|
||||
right: -12px;
|
||||
top: -44px;
|
||||
z-index: 401;
|
||||
}
|
||||
|
||||
.fancybox-close-small:hover {
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.fancybox-slide--html .fancybox-close-small {
|
||||
color: currentColor;
|
||||
padding: 10px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.fancybox-slide--image.fancybox-is-scaling .fancybox-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fancybox-is-scaling .fancybox-close-small,
|
||||
.fancybox-is-zoomable.fancybox-can-pan .fancybox-close-small {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Navigation arrows */
|
||||
|
||||
.fancybox-navigation .fancybox-button {
|
||||
background-clip: content-box;
|
||||
height: 100px;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: calc(50% - 50px);
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.fancybox-navigation .fancybox-button div {
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.fancybox-navigation .fancybox-button--arrow_left {
|
||||
left: 0;
|
||||
left: env(safe-area-inset-left);
|
||||
padding: 31px 26px 31px 6px;
|
||||
}
|
||||
|
||||
.fancybox-navigation .fancybox-button--arrow_right {
|
||||
padding: 31px 6px 31px 26px;
|
||||
right: 0;
|
||||
right: env(safe-area-inset-right);
|
||||
}
|
||||
|
||||
/* Caption */
|
||||
|
||||
.fancybox-caption {
|
||||
background: linear-gradient(to top,
|
||||
rgba(0, 0, 0, .85) 0%,
|
||||
rgba(0, 0, 0, .3) 50%,
|
||||
rgba(0, 0, 0, .15) 65%,
|
||||
rgba(0, 0, 0, .075) 75.5%,
|
||||
rgba(0, 0, 0, .037) 82.85%,
|
||||
rgba(0, 0, 0, .019) 88%,
|
||||
rgba(0, 0, 0, 0) 100%);
|
||||
bottom: 0;
|
||||
color: #eee;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
left: 0;
|
||||
line-height: 1.5;
|
||||
padding: 75px 44px 25px 44px;
|
||||
pointer-events: none;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
z-index: 99996;
|
||||
}
|
||||
|
||||
@supports (padding: max(0px)) {
|
||||
.fancybox-caption {
|
||||
padding: 75px max(44px, env(safe-area-inset-right)) max(25px, env(safe-area-inset-bottom)) max(44px, env(safe-area-inset-left));
|
||||
}
|
||||
}
|
||||
|
||||
.fancybox-caption--separate {
|
||||
margin-top: -50px;
|
||||
}
|
||||
|
||||
.fancybox-caption__body {
|
||||
max-height: 50vh;
|
||||
overflow: auto;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.fancybox-caption a,
|
||||
.fancybox-caption a:link,
|
||||
.fancybox-caption a:visited {
|
||||
color: #ccc;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.fancybox-caption a:hover {
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Loading indicator */
|
||||
|
||||
.fancybox-loading {
|
||||
animation: fancybox-rotate 1s linear infinite;
|
||||
background: transparent;
|
||||
border: 4px solid #888;
|
||||
border-bottom-color: #fff;
|
||||
border-radius: 50%;
|
||||
height: 50px;
|
||||
left: 50%;
|
||||
margin: -25px 0 0 -25px;
|
||||
opacity: .7;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 50px;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
@keyframes fancybox-rotate {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Transition effects */
|
||||
|
||||
.fancybox-animated {
|
||||
transition-timing-function: cubic-bezier(0, 0, .25, 1);
|
||||
}
|
||||
|
||||
/* transitionEffect: slide */
|
||||
|
||||
.fancybox-fx-slide.fancybox-slide--previous {
|
||||
opacity: 0;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
|
||||
.fancybox-fx-slide.fancybox-slide--next {
|
||||
opacity: 0;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
|
||||
.fancybox-fx-slide.fancybox-slide--current {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
/* transitionEffect: fade */
|
||||
|
||||
.fancybox-fx-fade.fancybox-slide--previous,
|
||||
.fancybox-fx-fade.fancybox-slide--next {
|
||||
opacity: 0;
|
||||
transition-timing-function: cubic-bezier(.19, 1, .22, 1);
|
||||
}
|
||||
|
||||
.fancybox-fx-fade.fancybox-slide--current {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* transitionEffect: zoom-in-out */
|
||||
|
||||
.fancybox-fx-zoom-in-out.fancybox-slide--previous {
|
||||
opacity: 0;
|
||||
transform: scale3d(1.5, 1.5, 1.5);
|
||||
}
|
||||
|
||||
.fancybox-fx-zoom-in-out.fancybox-slide--next {
|
||||
opacity: 0;
|
||||
transform: scale3d(.5, .5, .5);
|
||||
}
|
||||
|
||||
.fancybox-fx-zoom-in-out.fancybox-slide--current {
|
||||
opacity: 1;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
/* transitionEffect: rotate */
|
||||
|
||||
.fancybox-fx-rotate.fancybox-slide--previous {
|
||||
opacity: 0;
|
||||
-ms-transform: rotate(-360deg);
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
|
||||
.fancybox-fx-rotate.fancybox-slide--next {
|
||||
opacity: 0;
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
.fancybox-fx-rotate.fancybox-slide--current {
|
||||
opacity: 1;
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
/* transitionEffect: circular */
|
||||
|
||||
.fancybox-fx-circular.fancybox-slide--previous {
|
||||
opacity: 0;
|
||||
transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
|
||||
}
|
||||
|
||||
.fancybox-fx-circular.fancybox-slide--next {
|
||||
opacity: 0;
|
||||
transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
|
||||
}
|
||||
|
||||
.fancybox-fx-circular.fancybox-slide--current {
|
||||
opacity: 1;
|
||||
transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
/* transitionEffect: tube */
|
||||
|
||||
.fancybox-fx-tube.fancybox-slide--previous {
|
||||
transform: translate3d(-100%, 0, 0) scale(.1) skew(-10deg);
|
||||
}
|
||||
|
||||
.fancybox-fx-tube.fancybox-slide--next {
|
||||
transform: translate3d(100%, 0, 0) scale(.1) skew(10deg);
|
||||
}
|
||||
|
||||
.fancybox-fx-tube.fancybox-slide--current {
|
||||
transform: translate3d(0, 0, 0) scale(1);
|
||||
}
|
||||
|
||||
/* Styling for Small-Screen Devices */
|
||||
@media all and (max-height: 576px) {
|
||||
.fancybox-slide {
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
.fancybox-slide--image {
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.fancybox-close-small {
|
||||
right: -6px;
|
||||
}
|
||||
|
||||
.fancybox-slide--image .fancybox-close-small {
|
||||
background: #4e4e4e;
|
||||
color: #f2f4f6;
|
||||
height: 36px;
|
||||
opacity: 1;
|
||||
padding: 6px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
.fancybox-caption {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
@supports (padding: max(0px)) {
|
||||
.fancybox-caption {
|
||||
padding-left: max(12px, env(safe-area-inset-left));
|
||||
padding-right: max(12px, env(safe-area-inset-right));
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Share */
|
||||
|
||||
.fancybox-share {
|
||||
background: #f4f4f4;
|
||||
border-radius: 3px;
|
||||
max-width: 90%;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fancybox-share h1 {
|
||||
color: #222;
|
||||
font-size: 35px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
.fancybox-share p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.fancybox-share__button {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 40px;
|
||||
margin: 0 5px 10px 5px;
|
||||
min-width: 130px;
|
||||
padding: 0 15px;
|
||||
text-decoration: none;
|
||||
transition: all .2s;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fancybox-share__button:visited,
|
||||
.fancybox-share__button:link {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.fancybox-share__button:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.fancybox-share__button--fb {
|
||||
background: #3b5998;
|
||||
}
|
||||
|
||||
.fancybox-share__button--fb:hover {
|
||||
background: #344e86;
|
||||
}
|
||||
|
||||
.fancybox-share__button--pt {
|
||||
background: #bd081d;
|
||||
}
|
||||
|
||||
.fancybox-share__button--pt:hover {
|
||||
background: #aa0719;
|
||||
}
|
||||
|
||||
.fancybox-share__button--tw {
|
||||
background: #1da1f2;
|
||||
}
|
||||
|
||||
.fancybox-share__button--tw:hover {
|
||||
background: #0d95e8;
|
||||
}
|
||||
|
||||
.fancybox-share__button svg {
|
||||
height: 25px;
|
||||
margin-right: 7px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
vertical-align: middle;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.fancybox-share__button svg path {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.fancybox-share__input {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #d7d7d7;
|
||||
border-radius: 0;
|
||||
color: #5d5b5b;
|
||||
font-size: 14px;
|
||||
margin: 10px 0 0 0;
|
||||
outline: none;
|
||||
padding: 10px 15px;
|
||||
width: 100%;
|
||||
}
|
||||
/* Thumbs */
|
||||
|
||||
.fancybox-thumbs {
|
||||
background: #ddd;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
margin: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
padding: 2px 2px 4px 2px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
top: 0;
|
||||
width: 212px;
|
||||
z-index: 99995;
|
||||
}
|
||||
|
||||
.fancybox-thumbs-x {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.fancybox-show-thumbs .fancybox-thumbs {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fancybox-show-thumbs .fancybox-inner {
|
||||
right: 212px;
|
||||
}
|
||||
|
||||
.fancybox-thumbs__list {
|
||||
font-size: 0;
|
||||
height: 100%;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fancybox-thumbs-x .fancybox-thumbs__list {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
}
|
||||
|
||||
.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-track {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-thumb {
|
||||
background: #2a2a2a;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.fancybox-thumbs__list a {
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
height: 75px;
|
||||
margin: 2px;
|
||||
max-height: calc(100% - 8px);
|
||||
max-width: calc(50% - 4px);
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.fancybox-thumbs__list a::before {
|
||||
border: 6px solid #ff5268;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transition: all .2s cubic-bezier(.25, .46, .45, .94);
|
||||
z-index: 99991;
|
||||
}
|
||||
|
||||
.fancybox-thumbs__list a:focus::before {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.fancybox-thumbs__list a.fancybox-thumbs-active::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Styling for Small-Screen Devices */
|
||||
@media all and (max-width: 576px) {
|
||||
.fancybox-thumbs {
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.fancybox-show-thumbs .fancybox-inner {
|
||||
right: 110px;
|
||||
}
|
||||
|
||||
.fancybox-thumbs__list a {
|
||||
max-width: calc(100% - 10px);
|
||||
}
|
||||
}
|
5632
fancybox/asset/fancybox/jquery.fancybox.js
vendored
Normal file
5632
fancybox/asset/fancybox/jquery.fancybox.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
1
fancybox/asset/fancybox/jquery.fancybox.min.css
vendored
Normal file
1
fancybox/asset/fancybox/jquery.fancybox.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
13
fancybox/asset/fancybox/jquery.fancybox.min.js
vendored
Normal file
13
fancybox/asset/fancybox/jquery.fancybox.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
17
fancybox/createrelease
Executable file
17
fancybox/createrelease
Executable file
|
@ -0,0 +1,17 @@
|
|||
MODULE=fancybox
|
||||
|
||||
cd ..
|
||||
|
||||
# read actual version from module.json
|
||||
|
||||
# old releases not needed anymore
|
||||
mkdir -p $MODULE/dist
|
||||
rm $MODULE/dist/*
|
||||
|
||||
# create release for actual version
|
||||
zip -r9 $MODULE/dist/release.zip $MODULE/* -x $MODULE/dist/\* -x $MODULE/test/\* $MODULE/createrelease
|
||||
|
||||
echo release/release.zip created.
|
||||
|
||||
cd $MODULE
|
||||
|
BIN
fancybox/dist/release.zip
vendored
Normal file
BIN
fancybox/dist/release.zip
vendored
Normal file
Binary file not shown.
61
fancybox/fancybox.php
Normal file
61
fancybox/fancybox.php
Normal file
|
@ -0,0 +1,61 @@
|
|||
<?php
|
||||
/**
|
||||
* Name: Fancybox
|
||||
* Description: Open media attachments of posts into a fancybox overlay.
|
||||
* Version: 1.01
|
||||
* Author: Grischa Brockhaus <grischa@brockha.us>
|
||||
*/
|
||||
|
||||
use Friendica\App;
|
||||
use Friendica\Core\Hook;
|
||||
use Friendica\DI;
|
||||
|
||||
function fancybox_install()
|
||||
{
|
||||
Hook::register('head', __FILE__, 'fancybox_head');
|
||||
Hook::register('footer', __FILE__, 'fancybox_footer');
|
||||
Hook::register('prepare_body_final', __FILE__, 'fancybox_render');
|
||||
}
|
||||
|
||||
function fancybox_head(App $a, string &$b)
|
||||
{
|
||||
DI::page()->registerStylesheet(__DIR__ . '/asset/fancybox/jquery.fancybox.min.css');
|
||||
}
|
||||
function fancybox_footer(App $a, string &$str)
|
||||
{
|
||||
DI::page()->registerFooterScript(__DIR__ . '/asset/fancybox/jquery.fancybox.min.js');
|
||||
DI::page()->registerFooterScript(__DIR__ . '/asset/fancybox/fancybox.config.js');
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
prepare_body_final
|
||||
|
||||
Called at the end of prepare_body(). Hook data:
|
||||
|
||||
item: item array (input)
|
||||
html: converted item body (input/output)
|
||||
|
||||
*/
|
||||
|
||||
function fancybox_render(App $a, array &$b) {
|
||||
$matches = [];
|
||||
$pattern='#<div class="body-attach">.*?</div>#s';
|
||||
$gallery = 'gallery';
|
||||
if (array_key_exists('item', $b)) {
|
||||
$item = $b['item'];
|
||||
if (array_key_exists('uri-id', $item)) {
|
||||
$gallery = $gallery . '-' . $item['uri-id'];
|
||||
}
|
||||
}
|
||||
$html = $b['html'];
|
||||
while (preg_match($pattern, $html, $matches, PREG_OFFSET_CAPTURE)) {
|
||||
if (is_array($matches)) $matches=$matches[0];
|
||||
$part = $matches[0];
|
||||
$replaced = str_replace('<a href', '<a data-fancybox="' . $gallery . '" href', $part);
|
||||
$replaced = str_replace('<div class="body-attach"', '<div class="body-attach done"', $replaced);
|
||||
$html =str_replace($part, $replaced, $html);
|
||||
}
|
||||
$html = str_replace('class="body-attach done"', 'class="body-attach"', $html);
|
||||
$b['html'] = $html;
|
||||
}
|
BIN
fancybox/test/fancybox-3.5.7.zip
Normal file
BIN
fancybox/test/fancybox-3.5.7.zip
Normal file
Binary file not shown.
21
fancybox/test/imagetest.html
Normal file
21
fancybox/test/imagetest.html
Normal file
|
@ -0,0 +1,21 @@
|
|||
<html>
|
||||
<head>
|
||||
<!-- https://github.com/friendica/friendica/tree/stable/doc -->
|
||||
<!-- https://github.com/friendica/friendica/blob/stable/doc/Addons.md -->
|
||||
<!-- https://stackoverflow.com/questions/44409223/show-image-in-a-popup-when-i-click-button -->
|
||||
<!-- https://github.com/fancyapps/fancybox -->
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.0/jquery.fancybox.min.css" rel="stylesheet" />
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.0/jquery.fancybox.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="body-attach"><a data-fancybox="gallery" href="https://social.beachcom.org/system/media_attachments/files/109/395/536/026/043/860/original/cb17a73a2a5cd86f.jpeg"><img src="https://friends.brockha.us/photo/preview/600/3734" alt="" title=""></a>
|
||||
<br>
|
||||
<div class="clear"></div></div>
|
||||
|
||||
<div class="body-attach"><a data-fancybox="gallery" href="https://media.troet.cafe/troet.cafe/media_attachments/files/109/393/109/756/233/529/original/4290ef9eb5d7b799.jpeg"><img src="https://friends.brockha.us/photo/preview/1024/3729" alt="Tardis cookie jar and Tardis book, like River Songs diary." title="Tardis cookie jar and Tardis book, like River Songs diary."></a>
|
||||
<br>
|
||||
<div class="clear"></div></div>
|
||||
|
||||
</body>
|
||||
</html>
|
14
fancybox/test/test.html
Normal file
14
fancybox/test/test.html
Normal file
|
@ -0,0 +1,14 @@
|
|||
<p>Blubber Start</p>
|
||||
<div class="clearfix"></div>
|
||||
|
||||
<hr />
|
||||
<div class="wall-item-content post" id="wall-item-content-21657">
|
||||
|
||||
<div class="wall-item-body e-content p-name" id="wall-item-body-21657" dir="auto">Aktuell blockieren Unterstützer:innen der Letzten Generation das Rollfeld des BER.<br>Einige haben sich auf dem Asphalt festgeklebt, andere fahren mit Rad über den Rangierbereich und bringen so den Flugverkehr zum Erliegen. Vor dem Betreten des BER informierten sie die Polizei. <a href="https://t.co/c6UGVfPDI9" target="_blank" rel="noopener noreferrer">https://t.co/c6UGVfPDI9</a><div class="body-attach"><a href="https://climatejustice.social/system/media_attachments/files/109/400/027/751/450/406/original/9217a95e2bca723f.jpg"><img src="https://friends.brockha.us/photo/preview/1024/4292" alt="" title=""></a>
|
||||
<br>
|
||||
<a href="https://climatejustice.social/system/media_attachments/files/109/400/028/270/759/610/original/33b8b6d69d0d98fa.jpg"><img src="https://friends.brockha.us/photo/preview/600/4294" alt="" title=""></a>
|
||||
<br>
|
||||
<a href="https://climatejustice.social/system/media_attachments/files/109/400/028/712/968/943/original/2affd82b2c9a50c9.jpg"><img src="https://friends.brockha.us/photo/preview/600/4296" alt="" title=""></a>
|
||||
<br>
|
||||
<div class="clear"></div></div></div>
|
||||
<p>Blubber Ende</p>
|
14
fancybox/test/test.out.html
Normal file
14
fancybox/test/test.out.html
Normal file
|
@ -0,0 +1,14 @@
|
|||
<p>Blubber Start</p>
|
||||
<div class="clearfix"></div>
|
||||
|
||||
<hr />
|
||||
<div class="wall-item-content post" id="wall-item-content-21657">
|
||||
|
||||
<div class="wall-item-body e-content p-name" id="wall-item-body-21657" dir="auto">Aktuell blockieren Unterstützer:innen der Letzten Generation das Rollfeld des BER.<br>Einige haben sich auf dem Asphalt festgeklebt, andere fahren mit Rad über den Rangierbereich und bringen so den Flugverkehr zum Erliegen. Vor dem Betreten des BER informierten sie die Polizei. <a href="https://t.co/c6UGVfPDI9" target="_blank" rel="noopener noreferrer">https://t.co/c6UGVfPDI9</a><div class="body-attach"><a data-fancybox="gallery" href="https://climatejustice.social/system/media_attachments/files/109/400/027/751/450/406/original/9217a95e2bca723f.jpg"><img src="https://friends.brockha.us/photo/preview/1024/4292" alt="" title=""></a>
|
||||
<br>
|
||||
<a data-fancybox="gallery" href="https://climatejustice.social/system/media_attachments/files/109/400/028/270/759/610/original/33b8b6d69d0d98fa.jpg"><img src="https://friends.brockha.us/photo/preview/600/4294" alt="" title=""></a>
|
||||
<br>
|
||||
<a data-fancybox="gallery" href="https://climatejustice.social/system/media_attachments/files/109/400/028/712/968/943/original/2affd82b2c9a50c9.jpg"><img src="https://friends.brockha.us/photo/preview/600/4296" alt="" title=""></a>
|
||||
<br>
|
||||
<div class="clear"></div></div></div>
|
||||
<p>Blubber Ende</p>
|
Loading…
Reference in a new issue