Wir bloggen zu vielen Themen rund um Typo3 und Java/J2EE

Gitter mit Grid Elements und Masonry

Avatar of Joerg-Alexander StoehrJoerg-Alexander Stoehr - 30. Mai 2015 - Typo3 at xanders

Verschiedene Seiten dieses Internetauftrittes basieren auf auf der Typo3 Erweiterung "Grid Extension" und der JavaScript Grid Layout Bibliothek "Masonry". Mit "Masonry" kann man ein Element an eine bestimmte Position innerhalb eines auf einer Seite befindlichen Gitters plazieren. Die Bibliothek ist unter http://masonry.desandro.com/ verfügbar.

Als Elementtyp auf der Seite ist "Grid Element" anzugeben. Im Template sind in dem Abschnitt "Setup" folgene Zeilen einzutragen:

tt_content.gridelements_pi1.20.10.setup {
  # ID of gridelement
  3 < lib.gridelements.defaultGridSetup
  3 {
    wrap = <ul class="container masonry">|</ul>
    columns {
      # colPos ID
      1 < .default
      1.wrap = <li class="item masonry-type-1">|</li>
      2 < .default
      2.wrap = <li class="item masonry-type-2">|</li>
      3 < .default
      3.wrap = <li class="item masonry-type-3">|</li>
      4 < .default
      4.wrap = <li class="item masonry-type-3">|</li>
      5 < .default
      5.wrap = <li class="item masonry-type-3">|</li>
    }
  }
}

Und der HTML Code eines der Gitterelemente


<LINK 218>
<noscript data-large="fileadmin/templates/img/site/mission-large.jpg"
          data-small="fileadmin/templates/img/site/mission-small.jpg">
          <img alt="" src="fileadmin/templates/img/site/mission-small.jpg" />
</noscript>
<div class="text">
<h3>Mission</h3>
<h1>We develop solutions for digital communications. Tailored to your requirements.
With state-of-art technologies.</h1>
</div>
</LINK>

JQuery

$(document).ready(function() {
    $('.container').masonry({
        itemSelector: '.item',
        gutterWidth: 12,
        columnWidth: 320,
        isAnimated: true
    });
});

CSS


/* Masonry */

.masonry-type-1 {
  width: 652px;
  height: 290px;
  overflow: hidden;
}

.masonry-type-2,
.masonry-type-3 {
  width: 320px;
  height: 290px;
  overflow: hidden;
}

.masonry .item {
  display: inline-block;
  float: left;
  margin: 0 0 12px;
  background-color: #ececec;
}

.masonry .item img {
  transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -webkit-transition:  all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}

.masonry .item:hover img {
  transform: scale(1.1);
  -ms-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  zoom: 1.1\9; /* IE 8 */
  transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -webkit-transition:  all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}

.masonry .item. a{
  display: block;
  width: 100%;
  height: 100%;
}

.masonry .item .text {
  position: absolute;
  bottom: 5px;
  left1: 16px;
  margin: 16px;
}

.masonry .item h3 {
  background-color: #000;
  color: #fff;
  font-size: 11px;
  line-height: 14px;
  font-weight: bold;
  text-transform: uppercase;
  padding: 3px 6px;
  margin-bottom: 5px;
  display: inline-block;
  font-family: Interstate, Arial, Verdana, Helvetica, Sans-Serif;
}

.masonry .item h1, .masonry .item h2 {
  color: #fff;
  font-size: 36px;
  font-weight: bold;
  line-height: 36px;
  margin: 0;
}

.masonry .inverse h1, .masonry .inverse h2 {
  color: #8FB50B !important;
}

Archiv

2016 (5)

Mai (4) Januar (1)

2015 (2)

November (1) Mai (1)

2014 (1)

April (1)

2012 (3)

Mai (3)