• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

iLightbox: Wischen funktioniert nicht auf dem Smartphone

S

Sempervivum

Banned
Hallo,
ich habe mir vor einiger Zeit iLightbox von Codecanyon gekauft und habe ein Problem damit. Leider antwortet der Entwickler nicht, deshalb suche ich hier Hilfe. Auf dem Desktop-PC funktioniert sie einwandfrei, aber auf dem Smartphone (ich benutze Samsung Ace 3, d. h. Android) funktioniert das Blättern in den Bildern durch Wischbewegungen sehr häufig nicht. Stattdessen scheinen die Wischbewegungen auf den Hintergrund, d. h. das Karussel zu wirken.
Hier meine Testseite:
Homepage von Ulrich Bangert
Der z-Index der Elemente der Lightbox ist sehr hoch. Warum werden die Wischbewegungen trotzdem nicht von ihnen abgefangen sondern wirken auf den Hintergrund? Oder woran liegt es sonst, dass es nicht funktioniert?
Viele Grüße - Ulrich
 
Zuletzt bearbeitet:
Ich könnte mir vorstellen, dass ein Event (in dem Fall der Hintergrund) das Touch Event früher als das andere abfängt.

Kannst du uns mal ein wenig Code zeigen oder ist das alles externer Code (Codecanyon)?
 
Also in meinem Chrome funktioniert das auch nicht wirklich gut. Das Problem scheint zu sein, dass das mousemove-Event nicht, das das Wischen reagieren soll, nicht auf dem document, sondern nur auf den Containern der Bilder registriert ist. Wenn man also mit der Maus zu schnell ist, dann bewegt sich nichts weiter.

Auch scheint die Selektion nicht deaktivert zu sein.
 
Hallo kkapsner,
danke für die Antwort. Das Problem liegt jedoch nicht auf dem Desktop-PC sondern auf dem Smartphone, wenn man mit dem Finger wischt. Dass das Event auf den Containern liegt, ist wahrscheinlich so gewollt, weil nur durch Wischen auf das Bild geblättert werden soll. Tippt man dagegen in den freien Raum daneben, wird die Lightbox geschlossen.
Wischt man auf dem Smartphone geht es ein paar Mal und dann nicht mehr. Man erkennt dann jedoch, dass sich beim Wischen das Karussel im Hintergrund dreht, d. h. es wirkt offenbar darauf.
Ist denn dabei der z-Index nicht wirksam, denn eigentlich sollten doch die Gesten nur auf das Element wirken, was nach z-Index im Vordergrund liegt?
 
Zuletzt bearbeitet:
PS: Hab's jetzt auch mal im Chrome getestet und dort funktioniert das Wischen tatsächlich nicht zuverlässig, wenn man ins Bild klickt. Nimmt man stattdessen den Rahmen, funktioniert es jedoch anscheinend einwandfrei.
PPS: So, das Problem mit dem Chrome habe ich beseitigt:
Code: 
$('img').on('dragstart', function (event) { event.preventDefault(); });
Wäre schön, wenn jemand zum eigentlichen Problem noch eine Idee hätte.
 
Zuletzt bearbeitet:
Also bei mir funktioniert's im Chrome (und auch im FF) immer noch nicht einwandfrei... das mousemove gehört auf das document und nicht auf die Kontainer. Das mousemove macht ja auch erst etwas, wenn vorher ein mousedown auf dem Kontainer stattgefunden hat und somit das Wischen aktiviert wurde.
Das dürfte auch das Problem mit dem Smartphone hervorrufen.

PS: das Karussell ist anscheinend besser geschrieben und das mousemove ist im document registriert...
 
Stimmt, inzwischen habe ich ein wenig in den Code hineingesehen und es ist so.
Ich habe jetzt versucht, die Touch-Events des Karussels zu deaktivieren:
Code: 
		if(!touchMobile) {
			
			data.parent.on("mouseenter.cj", moveCarousel).on("mouseleave.cj", mouseOff);
			
		}
		else {

			//data.parent.on("touchstart.cj", touchDown).on("touchend.cj", touchUp);
			
		}
Das war anscheinend auch erfolgreich, hat aber am eigentlichen Problem nichts geändert, denn jetzt bewirkt das Wischen ein Panning des Hintergrundes. Daraufhin habe ich versucht, das Default-Verhalten des Touch zu unterbinden:
Code: 
            if(opts.controls.swipe) holders.on("touchstart", function (event) {event.preventDefault();}); // dies habe ich eingefuegt
Hat leider nichts verbessert. Jetzt stehe ich wieder ratlos davor.
BTW: Was bedeutet es eigentlich, wenn die Event-Strings so ein Suffix haben: "touchstart.iLightBox"?
 
Zuletzt bearbeitet:
Dass das eine auf das Wischen reagiert und das andere nicht, heißt nur, dass das eine sauber programmiert ist und das andere nicht, und nicht, dass das eine das andere behindert.

Um das zu testen mach' doch mal eine Testseite, auf der nur die iLightbox läuft. Ich bin mir sicher, dass da das Problem dann immer noch besteht.
 
Habe ich schon gemacht. Ohne das Karussel funktioniert iLightbox einwandfrei. Ich habe auch herausgefunden, dass (im Fehlerfall) das Wischen funktioniert, wenn man mit dem Finger im Zwischenraum zwischen den Bildern des Karussels ist und dass es auf das Karussell wirkt, wenn man mit dem Finger auf einem Bild des Karussells ist. Daraufhin habe ich die Elemente des Karussels versteckt mit display:none, wenn ich die Lightbox öffne und dann funktioniert es. Ist aber ein schlechter Workaround. Ich verstehe nicht, dass der z-Index bei den Touch-Events anscheinend nicht wirksam ist.
Code: 
function disp (idx) {
    $(".movie").css("display", "none");
    $.iLightBox(ele, { skin: 'dark', overlay: { opacity: 0.5 }, path: 'horizontal', infinite: true, startFrom: idx,
        callback: { onHide: function () { $(".movie").css("display", "block");}}
    });
}
 
Zuletzt bearbeitet:
Irgendwie ist das seltsam... wenn ich das .movie ausblende, funktioniert die iLightbox immer noch nicht sauber...
Kannst du mir mal den Link mit nur der iLightbox geben?
 
Funktioniert auch nicht richtig. Wenn ich ein Bild nehme und die Maus ganz schnell in einen Zwischenraum bewege, reagiert das Skript, wie aus dem Code auch ersichtlich, nicht mehr auf meine Mausbewegungen.
Wie schon gesagt: die mousemove-Events müssen auf dem document registriert werden...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben