[Update] New version of FancyBox for CMSimple(_XH)

Third Party Plugins to CMSimple - how to install, use and create plugins

Moderator: Tata

Post Reply
Holger
Site Admin
Posts: 3470
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany

[Update] New version of FancyBox for CMSimple(_XH)

Post by Holger » Sat Oct 22, 2016 4:55 pm

Hi,

nach langer Zeit und auf Wunsch einiger User, habe ich noch einmal das FancyBox-Plugin überarbeitet. Basis ist noch immer die Version 1.3.4, die unter MIT / GPL kostenlos verwendet werden kann.
Änderungen:
  • CSS3 anstatt Grafiken für Rahmen etc.
  • Inline-CSS für alte IE's entfernt
  • Kompatibel mit jQuery 1.9+ und jQuery 3.0+ (getestet mit 3.1.1)
  • Kein jQuery-Migrate-Plugin mehr nötig
  • Navigationselemente und optional Titel werden nach dem Laden eine einstellbare Zeit eingeblendet
  • Klick in die Boxmitte zeigt Navigation und optional Titel für einstellbare Zeit an
  • Größe im Browser optimiert. Margin und Padding (= der weiße Rahmen um die FancyBox) lässt sich per Konfiguration anpassen
  • Bessere Kompatibilität auf Touch-Geräten (Navigationsicon blieb nach Tap immer sichtbar. Stichwort: :hover und Touchgeräte)
Optional lässt sich mit dem CMSimple_(XH)-Plugin auch Support für Mobile- / Touchgeräte aktivieren:
  • Wischen nach links: vorheriges Element
  • Wischen nach rechts: nächstes Element
  • Während Wischgesten wird scrollen der Seite blockiert
  • Gerät drehen: aktuelles Element wird neu geladen und skaliert
Die Mobile-Erweiterungen sollten auf halbwegs modernen Mobilebrowsern funktionieren. Basis sind die Touch- und Orientation-Events aus jQueryMobile 1..5-pre.

Die aktuelle Version 4.0 des Plugins funktioniert auch mit dem aktuellen CMSimple 4.6.4 - aus der Richtung kam auch eine große Zahl Anfragen in der Sache.

Demo: http://holgerirmler.de/fcbtmp/?Galerie_1
Download: http://cmsimple.holgerirmler.de/?Plugin ... e:Download

***********************************************************************************************************************************
***********************************************************************************************************************************
Hi,

because of a lot requests I've created a new version of my FancyBox-Plugin. It's still using fancybox version 1.3.4 so you can use it under the MIT / GPL for free.

Changes:
  • CSS3 instead graphics for design elements.
  • Inline-CSS for older IE's removed
  • Runs with jQuery 1.9+ and jQuery 3.0+ (tested with 3.1.1)
  • Does not require jQuery-Migrate-Plugin
  • Shows and fades out the navigation elements and (as an option) the title after a configurable time
  • A click or tap on the middle of the box shows the navigation icons again
  • Size in the viewport optimized. Margin and padding (= the white border around the FancyBox) is now configurable
  • Better compatibility on touch devices (tries to fix the sticky navigation arrow caused by CSS :hover)
The CMSimple(_XH) plugin offers optional support for mobil- / touchdevices:
  • Swipe left for prev. element
  • Swipe right for next element
  • Locks scrolling when swiping the box
  • On orientation change, FancyBox reloads to resize the active element
The mobile-features should work on modern mobile-browsers. jQueryMobile 1..5-pre is used to detect the touch- and orientation events.

Because of a lot of requests, this new version 4.0 is also compatible with CMSimple 4.6.4.

Demo: http://holgerirmler.de/fcbtmp/?Galerie_1
Download: http://cmsimple.holgerirmler.de/?Plugin ... e:Download

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: [Update] New version of FancyBox for CMSimple(_XH)

Post by frase » Sun Oct 23, 2016 10:00 am

Danke,
hatte ich mir schon länger gewünscht. ;-)
Scheint alles gut zu funktionieren (Schnelltest).

Einziger "Verwirrungs"punkt:
Holger wrote:Wischen nach links: vorheriges Element
Wischen nach rechts: nächstes Element
Das hätte ich genau andersherum erwartet.
Man hat das Gefühl, man blättert rückwärts.
Ist das normal?
Bin nicht so ein Dauer-Smartphone/Tablet-User.

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: [Update] New version of FancyBox for CMSimple(_XH)

Post by Tata » Sun Oct 23, 2016 1:42 pm

Einige Bemerkungen:
1. In Sprachdatei befinden sich die Anweisungen (die letzte 3 Zeilen):

Code: Select all

     $plugin_tx['hi_fancybox']['cf_fcb_showIframeLoading']="Toggle loading animation while loading iframes";
     $plugin_tx['hi_fancybox']['cf_fcb_padding']="Space between FancyBox wrapper and content. It's the width of the white border. Set to 0px to remove the border.";
     $plugin_tx['hi_fancybox']['cf_fcb_margin']="Space between viewport and FancyBox wrapper"; 
In config.php sind sie aber nicht verlinkt.
2. manchmal funktioniert nicht das "overlay" - die bilder werden ohne Rahmen am schwarzen Hintergrund gezeigt.
3. Mit "zoom_i" habe ich auch Problem - der eingegebene GoogleMaps Embed-Code ist nicht akzeptiert und Auf der Weisen Seite steht:
The Google Maps Embed API must be used in an iframe.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: [Update] New version of FancyBox for CMSimple(_XH)

Post by frase » Sun Oct 23, 2016 2:26 pm

Tata wrote:3. Mit "zoom_i" habe ich auch Problem - der eingegebene GoogleMaps Embed-Code ist nicht akzeptiert und Auf der Weisen Seite steht:
Bei mir funktioniert es - Beispiel:

Code: Select all

<p><a class="zoom_i" href="https://maps.google.com/?output=embed&f=q&q=The%20White%20House%20Washington,%20DC,%20United%20States&ll=38.8976763,-77.03652979999998&layer=t&hq=The%20White%20House%20Washington,%20DC,%20United%20States&t=m&z=15&">Weißes Haus in Washington</a></p>
Der Editor macht daraus:

Code: Select all

<p><a class="zoom_i" href="https://maps.google.com/?output=embed&f=q&q=The%20White%20House%20Washington,%20DC,%20United%20States&ll=38.8976763,-77.03652979999998&layer=t&hq=The%20White%20House%20Washington,%20DC,%20United%20States&t=m&z=15&">Weißes Haus in Washington</a></p>
Er umschreibt also "&" mit "&" Und es funktioniert trotzdem.
Es ist auch egal, ob "http" oder "https".

Aaaahhh!
Jetzt habe ich mal das "Migrate-Plugin" bei jQuery ausgeschaltet - und es geht NICHT!
Also: In der jQuery-Konfiguration MUSS "Migrate" angeklickt sein!
Das widerspricht Holgers Ankündigung ganz oben :?:

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: [Update] New version of FancyBox for CMSimple(_XH)

Post by Tata » Sun Oct 23, 2016 3:06 pm

Bei mir ist es auch angeklickt. Doch funyt es nicht.
Schau mal an http://ukastelana.cmsimple.sk/userfiles ... ny_listok/
PW im PM
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: [Update] New version of FancyBox for CMSimple(_XH)

Post by frase » Sun Oct 23, 2016 4:04 pm

Wenn man die Fancybox ohne Rahmen haben will, dann muss man in der Konfiguration bei Padding und Margin statt "0px" NUR "0" eintragen, sonst klappt es nicht.
Das war das Problem bei Tata.

Mir scheint, dass die Einheit "px" überhaupt nicht angegeben werden darf???

Holger
Site Admin
Posts: 3470
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany

Re: [Update] New version of FancyBox for CMSimple(_XH)

Post by Holger » Sun Oct 23, 2016 5:06 pm

Hallo zusammen,
frase wrote:hatte ich mir schon länger gewünscht.
Hattest Du mir aber nicht gesagt ;) .
frase wrote:Einziger "Verwirrungs"punkt:
Holger wrote:Wischen nach links: vorheriges Element
Wischen nach rechts: nächstes Element

Das hätte ich genau andersherum erwartet.
Man hat das Gefühl, man blättert rückwärts.
Hmm, darüber hab' ich mindestens ein halbes Jahr nachgedacht. Es stimmt, es ist eigentlich umgehrt, als man erwartet. Aber da die Navigationspfeile beim Wischen eingeblendet werden sieht es "andersrum" auch irgendwie falsch aus... :?
Tata wrote:In config.php sind sie aber nicht verlinkt.
Da sollte eigentlich alles passen. Hab's eben nochmal kontrolliert. Eventuell hast Du noch die alte config.php beim Update behalten?
frase wrote:Aaaahhh!
Jetzt habe ich mal das "Migrate-Plugin" bei jQuery ausgeschaltet - und es geht NICHT!
Also: In der jQuery-Konfiguration MUSS "Migrate" angeklickt sein!
Das widerspricht Holgers Ankündigung ganz oben :?:
Iframes, pfff. Das habe ich komplett ausgeblendet...
Ja es stimmt. Da ist mir ein $.browser entwischt. Das lässt sich aber ganz leicht beheben und dann klappt's auch mit den Iframes ohne Migrate-Plugin.
frase wrote:Mir scheint, dass die Einheit "px" überhaupt nicht angegeben werden darf???
Darf schon, aber dann in Hochkommas, also '10px'. Das steht nicht wirklich unmissverständlich in der ToolTip-Hilfe. Aber, die Einheit ist nicht nötig, weil intern eh immer px verwendet wird. Da muss ich in der Beschreibung also auch nochmal nachbessern...

Insgesamt bin ich froh, dass ihr den Kram testet (hab' ich - zumindest beim Iframe - wohl stark vernachlässigt) und das es bis jetzt noch überschaubare Probleme gibt.
Auch wenn's im Moment nur Kleinigkeiten sind; ein Bugfix-Update werde ich vermutlich heute nicht mehr schaffen. Aber vielleicht findet sich auch noch der ein oder andere Bug in der Zwischenzeit.

LG,
Holger

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: [Update] New version of FancyBox for CMSimple(_XH)

Post by cmb » Sun Oct 23, 2016 5:41 pm

Holger wrote:
frase wrote:Einziger "Verwirrungs"punkt:
Holger wrote:Wischen nach links: vorheriges Element
Wischen nach rechts: nächstes Element

Das hätte ich genau andersherum erwartet.
Man hat das Gefühl, man blättert rückwärts.
Hmm, darüber hab' ich mindestens ein halbes Jahr nachgedacht. Es stimmt, es ist eigentlich umgehrt, als man erwartet. Aber da die Navigationspfeile beim Wischen eingeblendet werden sieht es "andersrum" auch irgendwie falsch aus... :?
Ich hab's mir (noch) nicht angeschaut, aber eigentlich ist das mit dem Wischen eine klare Sache: man stelle sich einfach ein Band von Bildern vor, dass durch das Wischen verschoben wird. Wischen nach rechts, schiebt das Band nach rechts, so dass das linke (also vorherige Bild) in die Mitte rückt.
Holger wrote:Insgesamt bin ich froh, dass ihr den Kram testet […]
Ja, testen ist wichtig, und das kann der Entwickler allein bei Web-Apps nicht leisten. Automatisierte Selenium-Tests könnten aber helfen; die müssen aber auch erst geschrieben werden. :-(
Christoph M. Becker – Plugins for CMSimple_XH

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: [Update] New version of FancyBox for CMSimple(_XH)

Post by frase » Mon Oct 24, 2016 7:00 am

@Christoph
cmb wrote:Automatisierte Selenium-Tests könnten aber helfen
Hm, das hast du schon verschiedentlich erwähnt - aber es scheint keiner zu reagieren?
Für mich ist das alles eher wie eine "Textprobe aus dem Voynich-Manuskript" (was wirklich mal einer dekodieren sollte).
Vielleicht machst du mal irgendwo eine Erklärung, was es ist, was es bringt usw.?

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: [Update] New version of FancyBox for CMSimple(_XH)

Post by frase » Mon Oct 24, 2016 8:22 am

@Tata
Es gibt auf deiner Seite noch die Fancybox z.B. für die Zimmer.
http://ukastelana.cmsimple.sk/?Penzi%C3%B3n
Mir sind da einige Probleme aufgefallen.
Der Pfeil nach rechts (>) ist verschoben und die (graue) Zeile für den Titel passt auch nicht so richtig.

Ursache ist im Stylesheet (Zeile 2): box-sizing: border-box;

Wenn du das ausschaltest, sind die Design-Probleme weg - aber das gesamte Layout ist zerstört.

Im Moment habe ich keinen Vorschlag zur Abhilfe.
Vielleicht Ludwig?

Post Reply