Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Masonry-Gallery mit Lightbox
#1
Photo 
Responsive Masonry-Gallery mit Lightbox

Einfache Gallery unter Verwendung des css Styles: column-count: Anzahl der Spalten;
Transition Hover Effekt
und der Lightbox by Lokesh Dhakar

[Bild: sreen.JPG]


CSS:
Code:
.galerie {
    -webkit-column-count: 5;
    /* Chrome, Safari, Opera */
    -moz-column-count: 5;
    /* Firefox */
    column-count: 5;
}

.galerie img {
    width: 100%;
    padding: 8px 0;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.galerie img:hover {
    -webkit-transform: scale(1.09);
    transform: scale(1.09);
}


/* Kleine Monitore */

@media only screen and (min-width: 300px) {
    .reframe {
        max-width: 500px
    }
    .galerie {
        -webkit-column-count: 2;
        /* Chrome, Safari, Opera */
        -moz-column-count: 2;
        /* Firefox */
        column-count: 2;
    }
}


/* Tabletts */

@media only screen and (min-width: 760px) {
    .reframe {
        max-width: 760px
    }
    .galerie {
        -webkit-column-count: 3;
        /* Chrome, Safari, Opera */
        -moz-column-count: 3;
        /* Firefox */
        column-count: 3;
    }
}


/* Mittlere Monitore */

@media only screen and (min-width: 980px) {
    .reframe {
        max-width: 980px
    }
    .galerie {
        -webkit-column-count: 4;
        /* Chrome, Safari, Opera */
        -moz-column-count: 4;
        /* Firefox */
        column-count: 4;
    }
}


/* Große Monitore */

@media only screen and (min-width: 1280px) {
    .reframe {
        max-width: 1280px
    }
    .galerie {
        -webkit-column-count: 5;
        /* Chrome, Safari, Opera */
        -moz-column-count: 5;
        /* Firefox */
        column-count: 5;
    }
}

HTML:
Code:
<div class="galerie">
           <a data-lightbox="irre-land" href="img/b.jpg" title="Bild 000"> <img src="img/001-klein.jpg" alt="Bild1" title="Bild1" /></a>
           ...
</div>


Angehängte Dateien
.rar   masonry-gallery.rar (Größe: 9 MB / Downloads: 5)
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste