Zeile 1: |
Zeile 1: |
− | <html> | + | <noinclude>__NOTOC__ |
| + | TwentyTwenty-Image Widget |
| + | </noinclude> |
| + | <includeonly><style> |
| + | .twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after { |
| + | content: " "; |
| + | display: block; |
| + | background: white; |
| + | position: absolute; |
| + | z-index: 30; |
| + | -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); |
| + | -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); |
| + | box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); } |
| | | |
− | <div class='twentytwenty-container'>
| + | .twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after { |
− | <img src='<!--{$Bild1|escape:'html'}-->' />
| + | width: 3px; |
− | <img src='<!--{$Bild2|escape:'html'}-->' />
| + | height: 9999px; |
− | </div>
| + | left: 50%; |
| + | margin-left: -1.5px; } |
| | | |
− | <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
| + | .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after { |
− | <script src="//cdnjs.cloudflare.com/ajax/libs/mhayes-twentytwenty/2.0.0-beta.1/jquery.twentytwenty.min.js"></script>
| + | width: 9999px; |
| + | height: 3px; |
| + | top: 50%; |
| + | margin-top: -1.5px; } |
| | | |
− | <script type="text/javascript">
| + | .twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay { |
− | $(function(){
| + | position: absolute; |
− | $('.twentytwenty-container').twentytwenty();
| + | top: 0; |
− | }); | + | width: 100%; |
− | </script>
| + | height: 100%; } |
| + | |
| + | .twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay { |
| + | -webkit-transition-duration: 0.5s; |
| + | -moz-transition-duration: 0.5s; |
| + | transition-duration: 0.5s; } |
| + | |
| + | .twentytwenty-before-label, .twentytwenty-after-label { |
| + | -webkit-transition-property: opacity; |
| + | -moz-transition-property: opacity; |
| + | transition-property: opacity; } |
| + | |
| + | .twentytwenty-before-label:before, .twentytwenty-after-label:before { |
| + | color: white; |
| + | font-size: 13px; |
| + | letter-spacing: 0.1em; } |
| + | |
| + | .twentytwenty-before-label:before, .twentytwenty-after-label:before { |
| + | position: absolute; |
| + | background: rgba(255, 255, 255, 0.2); |
| + | line-height: 38px; |
| + | padding: 0 20px; |
| + | -webkit-border-radius: 2px; |
| + | -moz-border-radius: 2px; |
| + | border-radius: 2px; } |
| + | |
| + | .twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before { |
| + | top: 50%; |
| + | margin-top: -19px; } |
| + | |
| + | .twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before { |
| + | left: 50%; |
| + | margin-left: -45px; |
| + | text-align: center; |
| + | width: 90px; } |
| + | |
| + | .twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow { |
| + | width: 0; |
| + | height: 0; |
| + | border: 6px inset transparent; |
| + | position: absolute; } |
| + | |
| + | .twentytwenty-left-arrow, .twentytwenty-right-arrow { |
| + | top: 50%; |
| + | margin-top: -6px; } |
| + | |
| + | .twentytwenty-up-arrow, .twentytwenty-down-arrow { |
| + | left: 50%; |
| + | margin-left: -6px; } |
| + | |
| + | .twentytwenty-container { |
| + | -webkit-box-sizing: content-box; |
| + | -moz-box-sizing: content-box; |
| + | box-sizing: content-box; |
| + | z-index: 0; |
| + | overflow: hidden; |
| + | position: relative; |
| + | -webkit-user-select: none; |
| + | -moz-user-select: none; |
| + | -ms-user-select: none; } |
| + | .twentytwenty-container img { |
| + | max-width: 100%; |
| + | position: absolute; |
| + | top: 0; |
| + | display: block; } |
| + | .twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active :hover.twentytwenty-overlay { |
| + | background: rgba(0, 0, 0, 0); } |
| + | .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label, |
| + | .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label, |
| + | .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label { |
| + | opacity: 0; } |
| + | .twentytwenty-container * { |
| + | -webkit-box-sizing: content-box; |
| + | -moz-box-sizing: content-box; |
| + | box-sizing: content-box; } |
| + | |
| + | .twentytwenty-before-label { |
| + | opacity: 0; } |
| + | .twentytwenty-before-label:before { |
| + | content: attr(data-content); } |
| + | |
| + | .twentytwenty-after-label { |
| + | opacity: 0; } |
| + | .twentytwenty-after-label:before { |
| + | content: attr(data-content); } |
| + | |
| + | .twentytwenty-horizontal .twentytwenty-before-label:before { |
| + | left: 10px; } |
| + | |
| + | .twentytwenty-horizontal .twentytwenty-after-label:before { |
| + | right: 10px; } |
| + | |
| + | .twentytwenty-vertical .twentytwenty-before-label:before { |
| + | top: 10px; } |
| + | |
| + | .twentytwenty-vertical .twentytwenty-after-label:before { |
| + | bottom: 10px; } |
| | | |
− | <style>
| |
− | .twentytwenty-wrapper {
| |
− | -webkit-touch-callout: none; /* iOS Safari */
| |
− | -webkit-user-select: none; /* Safari */
| |
− | -khtml-user-select: none; /* Konqueror HTML */
| |
− | -moz-user-select: none; /* Firefox */
| |
− | -ms-user-select: none; /* Internet Explorer/Edge */
| |
− | user-select: none; /* Non-prefixed version, currently
| |
− | supported by Chrome and Opera */
| |
− | }
| |
| .twentytwenty-overlay { | | .twentytwenty-overlay { |
− | display: none;
| + | -webkit-transition-property: background; |
− | } | + | -moz-transition-property: background; |
− | </style>
| + | transition-property: background; |
| + | background: rgba(0, 0, 0, 0); |
| + | z-index: 25; } |
| + | .twentytwenty-overlay:hover { |
| + | background: rgba(0, 0, 0, 0.5); } |
| + | .twentytwenty-overlay:hover .twentytwenty-after-label { |
| + | opacity: 1; } |
| + | .twentytwenty-overlay:hover .twentytwenty-before-label { |
| + | opacity: 1; } |
| + | |
| + | .twentytwenty-before { |
| + | z-index: 20; } |
| + | |
| + | .twentytwenty-after { |
| + | z-index: 10; } |
| + | |
| + | .twentytwenty-handle { |
| + | height: 38px; |
| + | width: 38px; |
| + | position: absolute; |
| + | left: 50%; |
| + | top: 50%; |
| + | margin-left: -22px; |
| + | margin-top: -22px; |
| + | border: 3px solid white; |
| + | -webkit-border-radius: 1000px; |
| + | -moz-border-radius: 1000px; |
| + | border-radius: 1000px; |
| + | -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); |
| + | -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); |
| + | box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); |
| + | z-index: 40; |
| + | cursor: pointer; } |
| + | |
| + | .twentytwenty-horizontal .twentytwenty-handle:before { |
| + | bottom: 50%; |
| + | margin-bottom: 22px; |
| + | -webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); |
| + | -moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); |
| + | box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); } |
| + | .twentytwenty-horizontal .twentytwenty-handle:after { |
| + | top: 50%; |
| + | margin-top: 22px; |
| + | -webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); |
| + | -moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); |
| + | box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); } |
| + | |
| + | .twentytwenty-vertical .twentytwenty-handle:before { |
| + | left: 50%; |
| + | margin-left: 22px; |
| + | -webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); |
| + | -moz-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); |
| + | box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); } |
| + | .twentytwenty-vertical .twentytwenty-handle:after { |
| + | right: 50%; |
| + | margin-right: 22px; |
| + | -webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); |
| + | -moz-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); |
| + | box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); } |
| + | |
| + | .twentytwenty-left-arrow { |
| + | border-right: 6px solid white; |
| + | left: 50%; |
| + | margin-left: -17px; } |
| + | |
| + | .twentytwenty-right-arrow { |
| + | border-left: 6px solid white; |
| + | right: 50%; |
| + | margin-right: -17px; } |
| + | |
| + | .twentytwenty-up-arrow { |
| + | border-bottom: 6px solid white; |
| + | top: 50%; |
| + | margin-top: -17px; } |
| | | |
− | </html> | + | .twentytwenty-down-arrow { |
| + | border-top: 6px solid white; |
| + | bottom: 50%; |
| + | margin-bottom: -17px; } |
| + | </style><!-- |
| + | --><div class="twentytwenty-container"> |
| + | <img class="Bild1" src="<!--{$Bild1|escape:'html'}-->" width="<!--{$width}-->" /> |
| + | <img class="Bild2" src="<!--{$Bild2|escape:'html'}-->" width="<!--{$width}-->" /> |
| + | </div><!-- |
| + | --><script src="https://www.fuerthwiki.de/wiki/resources/lib/jquery/jquery.js" type="text/javascript"></script><!-- |
| + | --><script> |
| + | RLQ.push(function(){ |
| + | $(function(){ |
| + | $.getScript( "https://www.fuerthwiki.de/wiki/resources/lib/twentytwenty/jquery.event.move.js", function( data, textStatus, jqxhr ) { |
| + | $.getScript( "https://www.fuerthwiki.de/wiki/resources/lib/twentytwenty/jquery.twentytwenty.js", function( data, textStatus, jqxhr ) { |
| + | $('.twentytwenty-container').twentytwenty({ |
| + | no_overlay: true |
| + | }); |
| + | }); |
| + | }); |
| + | }); |
| + | }); |
| + | </script></includeonly> |