Tagged: Lightbox
-
AuthorPosts
-
May 21, 2021 at 2:52 pm #1301646
Hello,
the images in lightboxes on our website http://www.deisenroth-soehne.de are recently way to far down the website, if you klick on them.
When you click on lightbox images (for example in galleries) they dont’t appear in the field of view and you have to scroll down the site to see the image in the lightbox.
Is there a solution for that?
Thank you in advance and greets from Germany
May 21, 2021 at 7:26 pm #1301703Da gibt es für mich einige Unstimmigkeiten in deinem Quellcode – warum gibt es ein bootstrap.css ?
irgendwo wird für mfp-wrap oder das img in der Lightbox auf eine immense Höhe gesetzt, die wesentlich größer ist als es normalerweise im magnific Popup passiert. Leider kann ich dir nicht mehr sagen. Eventuell ein eigenes magnific popup script?May 23, 2021 at 6:26 am #1301806Hi Jo_Gr,
I couldn’t see anything like that on your front page, could you let us know what to do in order to reproduce the problem you are having please?
Best regards,
RikardMay 24, 2021 at 8:26 am #1301935zudem musst du unbedingt etwas an deinen DSGVO Einstellungen ändern.
Ohne dass ich auf deiner Seite etwas geantwortet habe – oder schlimmer noch indem ich nur notwenigen Cookies zustimmte, wird google analytics und google tag manager geladen ( schrift lato ohnehin auch )
Wenn unsere Kollegen hier aus dem internationalen Ausland das machen ok, aber wir in Deutschland ( oder EU ) müssen uns daran streng halten ohne Opt-In hier nichts zuzulassen.
Deine Seite ist höchst abmahn-gefährdet deshalb.May 25, 2021 at 5:02 am #1302125May 25, 2021 at 7:54 am #1302155Hi Guenni,
Hi Rikard,thank you for your answers and your help till here.
Guenni thank you especially for your information concerning the privacy settings, we will fix this as soon as possible.I dont’t know why there is a bootstrap.css and i haven’t used a magnific popup script.
The problem occured without any specific changes on the website, that is the strange point.Is there a possibilty to set the position of the lightgox via CSS?
@Rikard: For example you can have a look at https://deisenroth-soehne.de/gewerbeleasing-angebote/vw-id-3-leasing/ on desktop, the click an image in the gallery under the vehicle. Now the lightbox with the bigger image occures down the site, so you have to scroll to see it and it is not in the field of view.Best regards,
Johannes___________________
My answer in German:
Hi Guenni,
Hi Rikard,vielen Dank für eure schnellen Antworten und eure Hilfe bis hierhin.
Guenni, danke speziell für die Informationen bezüglich den Datenschutz-Einstellungen, das ändern wir so schnell wie möglich.Ich weiß leider nicht warum es eine bootstrap.css gibt und wir nutzen eigentlich auch kein magnific popup script.
Das Problem trat auf, ohne dass wesentliche Änderungen an der Website oder via CSS vorgenommen wurden.Gibt es eine Möglichkeit, die Position der Lightbox via CSS zu verändern?
@Rikard: Zum Beispiel kannst du auf dem PC / Dekstop-Ansicht unter https://deisenroth-soehne.de/gewerbeleasing-angebote/vw-id-3-leasing/ schauen.
Wenn du dort auf ein Bild in der Gallerie unter dem Fahrzeug klickst, öffnet sich das vergrößerte Bild in der Lightbox weiterunten auf der Seite, so dass man erst zu dieser Stelle hinscrollen muss, da sich die Lightbox nicht im Sichtbereich öffnet.Viele Grüße,
JohannesMay 25, 2021 at 10:50 am #1302190yes – there is just this calculation to determine the middle of the height. And these heights that are calculated are much too high on your lightboxes.
You could now set the position to top to make it temporarily visible.My assumption is therefore that a plugin is involved here.
Therefore, I would first test now: Turn off all plugins and also turn off the merging. Then check if the lightbox works.
If yes – activate the plugins again step by step, and check each time when this miscalculation takes place. Possibly then the causer shows up.Or: What I also noticed is that you have all the latest versions, but still have jQuery Migrate enabled. Try turning that off. ( in the options of Enfold – Performance).
If we don’t find a solution with this, you can temporarily make this setting in Quick css:
.mfp-content { vertical-align: top !important; }
May 25, 2021 at 10:59 am #1302192Please switch off the merging of the js and css files anyway, then it will be easier for us to find the possible errors in the css.
Enfold (Child) – Leistung – “…Datei-Zusammenführung und -Komprimierung”
May 25, 2021 at 3:09 pm #1302235At first, thank you for your temporarily workaround.
Is there a possibility to put the navigation arrows of the lightbox also to the top?I deactivated the jQuery Migrate and the merging of the js and css files.
Tommorow i will test, if any plugin causing the problem.Thank you again till here.
- This reply was modified 3 years, 5 months ago by Jo_Gr.
May 26, 2021 at 6:28 am #1302355Eventuell musst du die Einstellungen noch auf !important setzen, wenn es nicht auch so funktioniert:
Leider ist das nicht responsive – da absolute Werte. Das ist ja das geniale vorher , dass es die Teile auf die Hälfte der errechnenten Höhen setzt.
Nur sind diese bei dir viel zu hoch – ein script oder ein Script eines Plugins wird das wohl veranlassen.
Hast du probiert die Plugins so wie oben beschrieben auszutesten?.mfp-arrow { top: 350px; margin-top: 0; } .mfp-arrow:active { margin-top: 0; }
May 26, 2021 at 7:00 am #1302362Different Approach
Wenn wir die Pfeile innerhalb des content containers setzen laufen Sie ja mit der Verschiebung.
Dazu müsstest du dies hier in die child-theme functions.php setzen:function popup_arrows_change() { ?> <script type="text/javascript"> (function($){ $(window).on('load', function(){ $('.av-masonry-entry.lightbox-added').magnificPopup({ type: 'image', mainClass: 'avia-popup mfp-zoom-in mfp-image-loaded', closeOnContentClick: false, midClick: true, gallery: { enabled: true }, callbacks: { buildControls: function() { // re-appends controls inside the main container this.arrowLeft.appendTo(this.contentContainer); this.arrowRight.appendTo(this.contentContainer); }, }, }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'popup_arrows_change');
und das ins quick css:
.mfp-arrow { margin: 0 -90px; margin-top: -55px; } .mfp-arrow:active { margin-top: -55px; }
ABER: Wichtiger – richtiger wäre den Fehler zu finden.
May 27, 2021 at 7:43 am #1302540Moin Guenni,
ist es besser zur Fehlersuche:
– die Plugins im Backend zu deaktivieren?
– die Plugins per FTP zu deaktivieren?
– die Plugins per Datenbank zu deaktivieren?oder ist das egal? :)
Danke vorab für die Informationen und viele Grüße
JohannesMay 27, 2021 at 10:05 am #1302561die einfachste Methode funktioniert auch : im Backend – deaktivieren
das bootstrap scheint über dein Mobile.de zu kommen. Sollte es daran liegen, musst du wahrscheinlich dann die “Krücke” verwenden.
Denn darauf wirst du ja nicht verzichten können.Eine andere Idee noch: wo lädst du das jQuery ; bei Enfold gibt es ja unter Leistung die Einstellung es im Footer zu laden, was zwar eventuell die Ladezeit einer Seite verringert, aber auch zu Problemen führen kann wenn die Reihenfolgen dann nicht eingehalten werden.
Versuch doch mal das jQuery im Header zu laden. -
AuthorPosts
- You must be logged in to reply to this topic.