FürthWiki

Widget:Twentytwenty: Unterschied zwischen den Versionen

Widget Diskussion

Widget:Twentytwenty (Quelltext anzeigen)

Version vom 29. September 2024, 18:20 Uhr

8.333 Bytes hinzugefügt ,  29. September 2024
K
Dokumentation verbessert
(added jquery)
K (Dokumentation verbessert)
 
(34 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
<!doctype html>
<noinclude>__NOTOC__
<html>
Das widget ''Twentytwenty'' stellt technisch die eigentliche Slider-Implementierung bereit und kann auch ohne die [[#Vorlage ImageSlider|Vorlage:ImageSlider]] verwendet werden.
<head>
 
  <meta charset="utf-8">
Die Implementierung des Widgets ist denkbar trivial. Folgende Dinge werden vom Widget getan um den Slider zu realisieren:
  <style>
# Laden von [https://jquery.com/ jQuery], [https://plugins.jquery.com/event.move/ jquery.event.move] und [https://github.com/zurb/twentytwenty jquery.twentytwenty.js].
  .twentytwenty-wrapper {
# Bereitstellung der benötigten [https://github.com/zurb/twentytwenty/blob/master/css/twentytwenty.css CSS Styles].
    -webkit-touch-callout: none; /* iOS Safari */
# Ausführen des jquery-TwentyTwenty-Plugins wie in der [https://github.com/zurb/twentytwenty?tab=readme-ov-file#multiple-instances Dokumentation beschrieben].
      -webkit-user-select: none; /* Safari */
 
      -khtml-user-select: none; /* Konqueror HTML */
== Verwendung ==
        -moz-user-select: none; /* Firefox */
 
          -ms-user-select: none; /* Internet Explorer/Edge */
<code><nowiki>
              user-select: none; /* Non-prefixed version, currently
{{#widget:twentytwenty|Bild1={{filepath:Bild1}}|Bild2={{filepath:Bild2}}|width=auto}}
                                    supported by Chrome and Opera */
</nowiki></code>
  }
 
  .twentytwenty-overlay {
== Offene Punkte ==
    display: none;
 
  }
* Momentan wird jQuery's ''$.getScript'' Funktion genutzt um die benötigten weiteren Plugins zu laden. Dies geschieht momentan nicht sequenziell und ist daher langsam. In Zukunft sollten alle benötigten Scripte gleichzeitig geladen werden.
  </style>
* Moment werden die CSS-Syteles direkt eingebunden. Diese müssen jeden mal aktualisiert werden, wenn das TwentyTwenty-Plugin auf dem Server aktualisiert wird. In Zukunft sollte auch die dazugehörige CSS Datei einmalig, dynamisch geladen werden.
  <script src="//fuerthwiki.de/wiki/resources/lib/jquery/jquery.js"></script>
* Momentan werden die Scripte sowie die CSS-Styles mehrfach geladen, wenn auf einer Seite das widget mehrfach eingebunden ist. In Zukunft sollten MediaWiki's Ressource-Loader genutzt werden um benötigte JavaScript- und CSS-Dateien nur einmalig pro Seite zu laden.
  <script src="//fuerthwiki.de/wiki/resources/lib/twentytwenty/jquery.twentytwenty.min.js"></script>
* Das Laden der benötigten Scripte ist scheinbar ziemlich buggy. So kann es bei einigen Browser dazu kommen, dass der Slider gar nicht geladen wird. Ein ''setTimeout'' hat hier geholfen konnte das Problem aber nicht beheben. *Das Gesamte Widget sollte technisch überarbeitet werden und auf moderne Funktionalitäten von MediaWiki zurückgreifen. Leider sind diese nicht sehr verständlich dokumentiert.*
  <script>
</noinclude>
  $(function(){
<includeonly><style>
    alert("twentytwenty");
.twentytwenty-horizontal .twentytwenty-handle:before,
    $('.twentytwenty-container').twentytwenty();
.twentytwenty-horizontal .twentytwenty-handle:after,
  });
.twentytwenty-vertical .twentytwenty-handle:before,
  </script>
.twentytwenty-vertical .twentytwenty-handle:after {
</head>
content: " ";
<body>
display: block;
  <div class="twentytwenty-container">
background: white;
     <img src="<!--{$Bild1}-->" />
position: absolute;
     <img src="<!--{$Bild2}-->" />
z-index: 30;
  </div>
-webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
</body>
-moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
</html>
box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
}
.twentytwenty-horizontal .twentytwenty-handle:before,
.twentytwenty-horizontal .twentytwenty-handle:after {
width: 3px;
height: 9999px;
left: 50%;
margin-left: -1.5px;
}
.twentytwenty-vertical .twentytwenty-handle:before,
.twentytwenty-vertical .twentytwenty-handle:after {
width: 9999px;
height: 3px;
top: 50%;
margin-top: -1.5px;
}
.twentytwenty-before-label,
.twentytwenty-after-label,
.twentytwenty-overlay {
position: absolute;
top: 0;
width: 100%;
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;
}
.twentytwenty-overlay {
-webkit-transition-property: background;
-moz-transition-property: background;
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;
}
.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(){
  setTimeout(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
          });
        });
      });
  }, 100);
});
</script></includeonly>
Abgerufen von „https://www.fuerthwiki.de/wiki/index.php?title=Spezial:Mobiler_Unterschied/170056...597403“