Gitter mit Grid Elements und Masonry
- 30. Mai 2015 - Typo3 at xandersVerschiedene 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.
Typo3
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; }