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
  1. .galerie {
  2.     -webkit-column-count: 5;
  3.     /* Chrome, Safari, Opera */
  4.     -moz-column-count: 5;
  5.     /* Firefox */
  6.     column-count: 5;
  7. }
  8.  
  9. .galerie img-item {
  10.     max-width: 100%;
  11.     max-height: 100%;
  12.     overflow: hidden;
  13.     position: relative;
  14. }
  15.  
  16. .thumb {
  17.     margin-bottom: 15px;
  18.     overflow: hidden;
  19.     border: 2px solid #ccc;
  20. }
  21.  
  22. .galerie a img {
  23.     width: 100%;
  24.     padding: 0;
  25.     -webkit-transition: all 0.5s;
  26.     transition: all 0.5s;
  27.  
  28. }
  29.  
  30. .galerie a:hover img {
  31.     -webkit-transform: scale(1.4);
  32.     transform: scale(1.4);
  33. }
  34.  
  35.  
  36. /* Kleine Monitore */
  37.  
  38. @media only screen and (min-width: 300px) {
  39.     .reframe {
  40.         max-width: 500px
  41.     }
  42.     .galerie {
  43.         -webkit-column-count: 2;
  44.         /* Chrome, Safari, Opera */
  45.         -moz-column-count: 2;
  46.         /* Firefox */
  47.         column-count: 2;
  48.     }
  49. }
  50.  
  51.  
  52. /* Tabletts */
  53.  
  54. @media only screen and (min-width: 760px) {
  55.     .reframe {
  56.         max-width: 760px
  57.     }
  58.     .galerie {
  59.         -webkit-column-count: 3;
  60.         /* Chrome, Safari, Opera */
  61.         -moz-column-count: 3;
  62.         /* Firefox */
  63.         column-count: 3;
  64.     }
  65. }
  66.  
  67.  
  68. /* Mittlere Monitore */
  69.  
  70. @media only screen and (min-width: 980px) {
  71.     .reframe {
  72.         max-width: 980px
  73.     }
  74.     .galerie {
  75.         -webkit-column-count: 4;
  76.         /* Chrome, Safari, Opera */
  77.         -moz-column-count: 4;
  78.         /* Firefox */
  79.         column-count: 4;
  80.     }
  81. }
  82.  
  83.  
  84. /* Große Monitore */
  85.  
  86. @media only screen and (min-width: 1280px) {
  87.     .reframe {
  88.         max-width: 1280px
  89.     }
  90.     .galerie {
  91.         -webkit-column-count: 5;
  92.         /* Chrome, Safari, Opera */
  93.         -moz-column-count: 5;
  94.         /* Firefox */
  95.         column-count: 5;
  96.     }
  97. }



HTML5
  1. <div class="galerie">
  2.             <div class="thumb">
  3.                 <div class="img-item">
  4.                     <a data-lightbox="irre-land" href="img/001.jpg" title="Bild 000"> <img src="img/001-klein.jpg" alt="" title="" /></a>
  5.                 </div>
  6.             </div>
  7.             <div class="thumb">
  8.                 <div class="img-item">
  9.                     <a data-lightbox="irre-land" href="img/002.jpg" title="Bild 001"> <img src="img/002-klein.jpg" alt="" title="" /></a>
  10.                 </div>
  11.             </div>
  12.            ...
  13. </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