neues Modul zum Testen / Image-Comparison / Bildvergleich vorher/nachher

[sternchen8875]

Auf Basis der Idee von Bupaje hier habe ich Teil 1 umgesetzt: ein Modul für den bekannten Vorher-/Nachher-Bildvergleich. Ich habe bewusst auf Drittanbieter-Software verzichtet, um Abhängigkeiten zu vermeiden und das Modul schlank zu halten.

Mit einem Schieberegler wird ein Bild über das andere gelegt – ideal für Vorher-/Nachher-Vergleiche auf Unternehmensseiten. Ein Screenshot zeigt es anschaulich, unten mein Auto in Nordschweden über dem Polarkreis

Das Modul erlaubt einzelne oder beliebig viele Vergleiche, die in einer Schleife angezeigt werden. Für den Slider gibt es fünf Effekte: vertikal, horizontal, diagonal, Lupe oder Fader, bei dem die Bilder beim Ziehen überblendet werden.

Zusätzlich gibt es praktische Tools: einen CSS-Editor, der eigene CSS-Dateien upgrade-sicher kopiert, und einen verbesserten Template-Editor, der global nutzbare Templates für alle Sections erlaubt.

Das Addon befindet sich noch in der Entwicklung – in etwa zwei Wochen sehen wir, welche Rückmeldungen kommen.

Based on an idea by Bupaje -> https://forum.WebsiteBaker.org/index.php/topic,32448.0.html
, I created Part 1: a module for the popular before/after image comparison. I deliberately avoided third-party software to keep it lightweight and independent.

A slider overlays one image on another – perfect for before/after comparisons on company websites. A screenshot makes it clearer, here’s my car in northern Sweden above the Arctic Circle

The module allows single or unlimited comparisons displayed in a loop. Five slider effects are available: vertical, horizontal, diagonal, magnifier, or fader, where images blend as you drag.

Additional tools include a CSS editor, which safely copies user CSS files, and an improved template editor for globally usable templates across all sections.

The addon is still in development — in about two weeks, we’ll see what feedback comes in.


dutch
Gebaseerd op een idee van Bupaje -> https://forum.WebsiteBaker.org/index.php/topic,32448.0.html
 heb ik deel 1 gemaakt: een module voor de bekende voor-/na-beeldvergelijking. Ik heb bewust geen software van derden gebruikt, zodat het modulair en licht blijft.

Met een schuifregelaar wordt één afbeelding over de andere gelegd – ideaal voor voor-/na-vergelijkingen op bedrijfswebsites. Een screenshot maakt het duidelijk, hier mijn auto in Noord-Zweden boven de poolcirkel

De module laat één of meerdere vergelijkingen in een loop zien. Er zijn vijf schuifregelaareffec ten: verticaal, horizontaal, diagonaal, vergrootglas of fader, waarbij de beelden vloeiend in elkaar overgaan bij het slepen.

Extra tools zijn een CSS-editor, die gebruikersbestanden veilig kopieert, en een verbeterde template-editor voor wereldwijd bruikbare templates in alle secties.

De addon is nog in ontwikkeling – over ongeveer twee weken zien we welke feedback binnenkomt.


Screenshot Frontend



Screenshot Backend



Admin-Comment: change attachement to latest version

[dbs]

Funktioniert sofort 

[sternchen8875]

Rückmeldung über andere Kanäle

- Farbe bei verschiedenen Buttons grau und schlecht zu lesen
Ursache: das WB-eigene W3-CSS ist zu alt. Um nun kein CMS-Upgrade zu erzwingen, liegt jetzt dem Modul eine neue Vesion der w3.css bei

- modulinterne Links und Rückleitungen waren ohne Ankerfunktion
ist behoben in v1.0.0dev2

das neueste ZIP oben im Eingangsbeitrag


Feedback via other channels

- Colour of various buttons is grey and difficult to read
Cause: WB's own W3 CSS is too old. To avoid forcing a CMS upgrade, a new version of w3.css is now included with the module

- Module-internal links and return links did not have an anchor function
Fixed in v1.0.0dev2

The latest ZIP file is available at the top of the initial post.


Feedback via andere kanalen

- Kleur van verschillende knoppen grijs en moeilijk leesbaar
Oorzaak: de eigen W3-CSS van WB is te oud. Om geen CMS-upgrade af te dwingen, is er nu een nieuwe versie van w3.css bij de module gevoegd

- Moduulinterne links en terugkoppelingen hadden geen ankerfunctie
is opgelost in v1.0.0dev2

de nieuwste ZIP bovenaan in het eerste bericht