LocationContactPhone
  • StartNEU!
  • Portfolio
  • Kontakt
  • Datenschutz
  • Impressum
  • 0/0
  • Click to open the search input field Click to open the search input field Search
  • Menu Menu

Flexible Masonry

All images get the same width but are displayed with their original height and width ratio

O2 7

O2 7

O2 6

O2 6

O2 5

O2 5

O2 4

O2 4

O2 3

O2 3

O2 2

O2 2

O2 1

O2 1

Haussanierung durch Handwerker (KI-generiert)

Handwerker-Sanierung-hoch

Pefect Grid

Display a perfect grid where each image has exactly the same size. Images get cropped/stretched if they don’t fit

O2 7

O2 6

O2 5

O2 4

O2 3

O2 2

O2 1

Perfect Automatic Masonry

Display a grid where most images get the same size, only very wide images get twice the width and very high images get twice the height. To qualify for „very wide“ or „very high“ the image must have a aspect ratio of 16:9 or higher

O2 7

O2 6

O2 5

O2 4

O2 3

O2 2

O2 1

/**
 * Enfold Masonry Caption Fix - NUR für Perfect Grid
 * Schiebt die Caption unter das Bild, ohne es zu verdecken.
 */

function enfold_masonry_perfect_grid_caption_fix() {
?>
<style>
    /* ========================================
       PERFECT GRID CSS
       ======================================== */
    
    /* Erlaubt der Caption, über den Container hinauszuragen */
    #top .av-masonry.av-fixed-size.av-masonry-gallery .av-inner-masonry,
    #top .av-masonry-gallery.av-masonry-gallery-fixed figure.av-inner-masonry {
        overflow: visible !important;
    }
    
    /* Positioniert die Caption direkt unter das Bild-Quadrat */
    #top .av-masonry.av-fixed-size.av-masonry-gallery .av-inner-masonry-content,
    #top .av-masonry-gallery.av-masonry-gallery-fixed figcaption.av-inner-masonry-content {
        position: relative !important;
        top: 100%;
        background: #ffffff; /* Hier ggf. deine Wunschfarbe für den Hintergrund */
    }

    /* Korrektur für Tablets */
    @media only screen and (min-width: 767px) and (max-width: 989px) {
        .responsive .av-masonry-gallery .av-masonry-entry .av-masonry-entry-title + .av-masonry-entry-content {
            display: block !important;
        }
    }
</style>
    
<script>
    (function($) {
        'use strict';
        
        function fixPerfectGrid() {
            // Nur für Masonry Galerien mit festem Raster (Perfect Grid)
            $('.av-masonry-gallery.av-masonry-gallery-fixed, .av-masonry.av-fixed-size.av-masonry-gallery').each(function() {
                var $gallery = $(this);
                var columnCount = 1;
                
                // Spaltenanzahl ermitteln
                if ($gallery.hasClass('av-masonry-col-2')) columnCount = 2;
                else if ($gallery.hasClass('av-masonry-col-3')) columnCount = 3;
                else if ($gallery.hasClass('av-masonry-col-4')) columnCount = 4;
                else if ($gallery.hasClass('av-masonry-col-5')) columnCount = 5;
                else if ($gallery.hasClass('av-masonry-col-6')) columnCount = 6;
                
                if ($gallery.hasClass('av-masonry-col-flexible')) {
                    var $items = $gallery.find('.av-masonry-item-with-image:visible');
                    if ($items.length >= 2) {
                        var firstTop = $items.eq(0).offset().top;
                        var itemsInFirstRow = 1;
                        for (var i = 1; i < Math.min($items.length, 10); i++) {
                            if (Math.abs($items.eq(i).offset().top - firstTop) < 10) {
                                itemsInFirstRow++;
                            } else { break; }
                        }
                        columnCount = itemsInFirstRow;
                    }
                }
                
                // Maximalhöhe der Captions finden, damit die Zeilen gleichmäßig bleiben
                var maxCaptionHeight = 0;
                $gallery.find('.av-masonry-item-with-image').each(function() {
                    var $caption = $(this).find('figcaption.av-inner-masonry-content, .av-inner-masonry-content');
                    if ($caption.length && $caption.is(':visible')) {
                        maxCaptionHeight = Math.max(maxCaptionHeight, $caption.outerHeight(true));
                    }
                });
                
                // Abstand unten einfügen, damit das Masonry-Layout Platz für die Caption lässt
                if (maxCaptionHeight > 0) {
                    $gallery.find('a.av-masonry-entry, .av-masonry-item-with-image').css('margin-bottom', maxCaptionHeight + 'px');
                }
            });
            
            // Layout neu berechnen
            $('.av-masonry-gallery.av-masonry-gallery-fixed, .av-masonry.av-fixed-size.av-masonry-gallery').isotope('layout');
        }   

        // ========================================
        // INITIAL LOAD - Nur auf Bilder warten, nicht auf die ganze Seite
        // ========================================
        (function() {
            var $gallery = $('.av-masonry-gallery');
            
            if ($gallery.length && typeof $.fn.imagesLoaded === 'function') {
                // Wartet NUR auf die Bilder in der Galerie
                $gallery.imagesLoaded(function() {
                    setTimeout(fixPerfectGrid, 200);
                });
            } else {
                // Fallback für den Notfall
                setTimeout(fixPerfectGrid, 600);
            }
        })();

        
        // Nach Enfold Events
        $(document).on('av-masonry-complete', function() {
            setTimeout(fixPerfectGrid, 250);
        });
        
        // Bei Größenänderung
        $(window).on('debouncedresize', function() {
            // Reset Margin
            $('.av-masonry-gallery.av-masonry-gallery-fixed .av-masonry-item-with-image, .av-masonry.av-fixed-size.av-masonry-gallery .av-masonry-item-with-image').css('margin-bottom', '');
            fixPerfectGrid();
        });
        
    })(jQuery);
</script>
<?php
}
add_action('wp_footer', 'enfold_masonry_perfect_grid_caption_fix', 999);

Webers Webdesign

Kontakt

Büro Geschlossen öffnet Montag (12.10.) um 08:00 Uhr

Adresse

Webers Webdesign
Ludwig-Schopp-Straße 27
53117 Bonn

Anfahrt

Telefon

+ 49 228 9768293

Anrufen

E-Mail

info@guenterweber.com

E-Mail senden
Beim Laden der Google Maps Karte werden Daten (u. a. Ihre IP-Adresse) an Google übertragen und Google-Schriftarten zur Darstellung nachgeladen. Die Karte wird erst nach Ihrer aktiven Zustimmung geladen. Da wir keine dauerhaften Tracking-Cookies für diese Entscheidung setzen, gilt Ihre Zustimmung nur für die aktuelle Browser-Sitzung. Beim nächsten Besuch entscheiden Sie einfach neu.
Datenschutz: Google Maps
© 2026      Website Design by: Webers Webdesign
Scroll to top Scroll to top Scroll to top