Tagged: 

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #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

    #1301703

    Da 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?

    #1301806

    Hi 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,
    Rikard

    #1301935

    zudem 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.

    #1302125

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

    #1302155

    Hi 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,
    Johannes

    #1302190

    yes – 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;
    }
    #1302192

    Please 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”

    #1302235

    At 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.
    #1302355

    Eventuell 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;
    }
    #1302362

    Different 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.

    #1302540

    Moin 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
    Johannes

    #1302561

    die 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.

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.