"Timeline 2.1 with images and responsive"
Bootstrap 3.1.0 Snippet by xrozix

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <!-- <div class="page-header text-center"> <h1 id="timeline">Teelt</h1> </div>--> <ul class="timeline"> <li> <div class="timeline-badge primary"><a><i class="glyphicon glyphicon-record" rel="tooltip" title="11 hours ago via Twitter" id=""></i></a></div> <div class="timeline-panel"> <div class="timeline-body"> <h4 style="padding: 15px 0 0 25px; margin:0;">Teelt</h4> <p>Een champignonbedrijf bestaat uit verschillende 'teeltcellen'. In elke teeltcel staan 2 'stellingen' die elk uit 5 boven elkaar gestapelde bakken bestaan. De bakken hebben een standaardbreedte van 1.34 m en een variabele lengte. Onze kwekerij bestaat uit 4 cellen van elk 200 m2 teeltoppervlakte. De teeltcellen zijn met elkaar verbonden door een werkgang. Elke teeltcel bevindt zich in een ander stadium van het teeltproces. Op deze manier verzekeren we jullie elke dag in verse champignons te voorzien. In onze werkgang staan verschillende apparatuur om de teelt zo goed mogelijk te laten verlopen.</p> </div> </div> </li> <li class="timeline-inverted"> <div class="timeline-badge primary"><a><i class="glyphicon glyphicon-record invert" rel="tooltip" title="11 hours ago via Twitter" id=""></i></a></div> <div class="timeline-panel"> <div class="timeline-body"> <h4 style="padding: 15px 0 0 25px; margin:0;">Cyclus Champignon</h4> <p>Champignons planten zich voort met sporen die geproduceerd worden op plaatjes in de hoed. Bij afrijping van de champignon opent de hoed zich zodat de sporen vrij komen. Vallen deze sporen op een geschikte voedingsbodem, dan zullen ze ontkiemen en aanleiding geven tot de ontwikkeling van een zwamvlok. De zwamvlok noemt men in het vakjargon 'mycelium'. Wanneer de omstandigheden gunstig zijn (in de natuur is dit vaak de herfstperiode) gaat het mycelium over tot de knopvorming, dit is de aanleg van de eigenlijke vruchtlichamen of champignons. Deze kleine knoppen groeien in snel temp uit tot volwaardige champignons. In een gestuurde teelt verdubbelt de champignon elke 24 uur in gewicht. Om champignons te telen, moet men deze levenscyclus in stand houden en optimaliseren. Daarvoor is behoefte aan een geschikte voedingsbodem voor de champignon, de geschikte rassen en een aangepast klimaat. Ook vrijwaring tegen allerhande ziekten en plagen is belangrijk. Enkel bij een optimale sturing van dit alles kan de teler de consument een kwalitatief hoogstaand product aanbieden..</p> </div> </div> </li> <li> <div class="timeline-badge primary"><a><i class="glyphicon glyphicon-record" rel="tooltip" title="11 hours ago via Twitter" id=""></i></a></div> <div class="timeline-panel"> <div class="timeline-heading"> <img class="img-responsive" src="http://champignonkwekerij.be/develop/appbay/afbeelding/myceliumgroei_tl.png" /> </div> <div class="timeline-body"> <h4 style="padding: 15px 0 0 25px; margin:0;">Myceliumgroei</h4> <p>De myceliumgroei duurt ongeveer 16 dagen bij een composttemperatuur van 25° C. In deze tijdspanne ontwikkelt de schimmel op de broedkorrels zich en koloniseert de compost. Op het einde van de myceliumgroei spreekt men van doorgroeide compost. In ons bedrijf vullen we onmiddellijk met doorgroeide compost dat we aangeleverd krijgen van onze compostleverancier: Sterckx Boven deze compost komt een laagje (6 cm) dekaarde. Deze dekaarde is een mengsel van veengrond en schuimaarde. Het mycelium moet ook dit laagje dekaarde doorgroeien. De dekaarde doet tevens dienst als waterbuffer voor de verdere teelt. Voor elke geproduceerde kg champignons is er ongeveer 2 liter water nodig.</p> </div> </div> </li> <li class="timeline-inverted"> <div class="timeline-badge primary"><a><i class="glyphicon glyphicon-record invert" rel="tooltip" id=""></i></a></div> <div class="timeline-panel"> <div class="timeline-body"> <h4 style="padding: 15px 0 0 25px; margin:0;">Koelen</h4> <p>Als het mycelium ongeveer drie kwart in de dekaarde is ingegroeid wordt er in sommige bedrijven de dekaarde volledig doorwoeld. In het vakjargon noemen we dat 'opruwen'. Dat zou de knopvorming kunnen bevorderen en ook zorgen voor een gelijktijdige uitgroei van de knoppen. In ons bedrijf doen we dat niet door het feit dat we geen gelijktijdige uitgroei nastreven. Zo kunnen we een volledige week oogsten in plaats van enkele dagen. Als het mycelium hersteld is, wordt er gekoeld met het oog op het introduceren van de knopvorming. Daartoe wordt de luchttemperatuur in 2 tot 4 dagen (afhankelijk van ras en gewenste champignongrootte) afgekoeld tot ongeveer 17 - 18°C. De composttemperatuur daalt dan geleidelijk tot 20°C..</p> </div> </div> </li> <li> <div class="timeline-badge primary"><a><i class="glyphicon glyphicon-record" rel="tooltip" title="11 hours ago via Twitter" id=""></i></a></div> <div class="timeline-panel"> <div class="timeline-heading"> <img class="img-responsive" src="http://champignonkwekerij.be/develop/appbay/afbeelding/knopvorming540.png" /> </div> <div class="timeline-body"> <h4 style="padding: 15px 0 0 25px; margin:0;">Knopvorming</h4> <p>a het koelen of afventileren duurt het nog ongeveer een anderhalve week tot het begin van de oogst. In die periode worden de knoppen gevormd en groeien ze uit tot volwaardige champignons. knopvorming De luchttemperatuur bedraagt dan 17-18 °C met een relatieve luchtvochtigheid tussen 88-91% en een CO2 gehalte tussen 1200 à 1400 ppm. Het is in deze fase dat door vakkennis het aantal stuks, het gewicht en de kwaliteit wordt bepaald. Fouten die in deze fase worden gemaakt kunnen moeilijk rechtgezet worden en kosten veel geld. Hier gaat het om werken met tienden van een graad.</p> </div> </div> </li> <li class="timeline-inverted"> <div class="timeline-badge primary"><a><i class="glyphicon glyphicon-record invert" rel="tooltip" title="11 hours ago via Twitter" id=""></i></a></div> <div class="timeline-panel"> <div class="timeline-heading"> <img class="img-responsive" src="http://champignonkwekerij.be/develop/appbay/afbeelding/oogst540.png" /> </div> <div class="timeline-body"> <h4 style="padding: 15px 0 0 25px; margin:0;">Oogstperiode</h4> <p>De oogst van champignons verloopt in 'vluchten'. Elke week gedurende de oogstperiode verschijnt een vlucht champignons. De meeste bedrijven houden een oogstperiode van 3 of 4 weken of vluchten aan. In ons bedrijf beperken we ons steeds tot 3 vluchten. Latere vluchten geven té weinig rendement en de kans op ziektes en plagen neemt toe.</p> </div> </div> </li> <li> <div class="timeline-badge primary"><a><i class="glyphicon glyphicon-record invert" rel="tooltip" title="11 hours ago via Twitter" id=""></i></a></div> <div class="timeline-panel"> <div class="timeline-heading"> <img class="img-responsive" src="http://champignonkwekerij.be/develop/appbay/afbeelding/leegmaken540.jpg" /> </div> <div class="timeline-body"> <h4 style="padding: 15px 0 0 25px; margin:0;">Doodstomen</h4> <p>Na het plukken van de laatste champignons wordt de cel met haar inhoud doodgestoomd. Dit heeft als doel alle organismen die schadelijk zijn voor de champignonteelt te doden vooraleer de compost uit de cel weggehaald wordt. Op die manier voorkomt men verspreiding van ziekten over het bedrijf. Doodstomen gebeurt bij temperaturen van minimaal 65° C in de compost gedurende 12 uur.<br><br> Vermits er tijdens de kweek niets van bestrijdingsmiddelen gebruikt worden is deze fase belangrijk voor het voorkomen van ziekten. <br><br> De meest voorkomende ziekten in de champignonteelt zijn:</p> <ul style="margin-left: 20px; margin-top: -30px;"> <li>plagen: champignonvlieggen, mijten, aaltjes</li> <li>schimmelziekten: inktzwammen, gele en groene schimmel, lippenstiftschimmel, valse truffel, droge en natte mollen (misvormde champignons)</li> <li>afstervingsziekte</li> <li>bacterieziekten: bacterievlekken, mummiezieke</li> </ul> </div> </div> </li> <li class="clearfix" style="float: none;"></li> </ul> </div>
.timeline { list-style: none; padding: 20px 0 20px; position: relative; } .timeline:before { top: 0; bottom: 0; position: absolute; content: " "; width: 3px; background-color: #eeeeee; left: 50%; margin-left: -1.5px; } .timeline > li { margin-bottom: 20px; position: relative; width: 50%; float: left; clear: left; } .timeline > li:before, .timeline > li:after { content: " "; display: table; } .timeline > li:after { clear: both; } .timeline > li:before, .timeline > li:after { content: " "; display: table; } .timeline > li:after { clear: both; } .timeline > li > .timeline-panel { width: 95%; float: left; border: 1px solid #d4d4d4; /*border-radius: 2px;*/ /*padding: 20px;*/ position: relative; -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); } .timeline > li > .timeline-panel:before { position: absolute; top: 26px; right: -15px; display: inline-block; border-top: 15px solid transparent; border-left: 15px solid #ccc; border-right: 0 solid #ccc; border-bottom: 15px solid transparent; content: " "; } .timeline > li > .timeline-panel:after { position: absolute; top: 27px; right: -14px; display: inline-block; border-top: 14px solid transparent; border-left: 14px solid #fff; border-right: 0 solid #fff; border-bottom: 14px solid transparent; content: " "; } .timeline > li > .timeline-badge { color: #fff; width: 24px; height: 24px; line-height: 50px; font-size: 1.4em; text-align: center; position: absolute; top: 16px; right: -12px; /*background-color: #999999;*/ z-index: 100; /* border-top-right-radius: 50%; border-top-left-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; */ } .timeline > li.timeline-inverted > .timeline-panel { float: right; } .timeline > li.timeline-inverted > .timeline-panel:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; } .timeline > li.timeline-inverted > .timeline-panel:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; } .timeline-badge > a { color: #C5C7C5 !important; } .timeline-badge a:hover { color: #000 !important; } .timeline-title { margin-top: 0; color: inherit; } .timeline-body > p, .timeline-body > ul { padding:20px; margin-bottom: 0; } .timeline-body > p + p { margin-top: 5px; } .timeline-footer{ padding:20px; background-color:#f4f4f4; } .timeline-footer > a{ cursor: pointer; text-decoration: none; } .tooltip{ position:absolute; z-index:1020; display:block; visibility:visible; padding:5px; font-size:11px; opacity:0; filter:alpha(opacity=0); } .tooltip.in{ /*opacity:0; filter:alpha(opacity=80);*/ } .tooltip.top{ margin-top:-2px; } .tooltip.right{ margin-left:2px; } .tooltip.bottom{ margin-top:2px; } .tooltip.left{ margin-left:-2px; } .tooltip.top .tooltip-arrow{ bottom:0; left:0; margin-left:0; border-left:0 solid transparent; border-right:5px solid transparent; border-top:0 solid #000; } .tooltip.left .tooltip-arrow{ bottom:0; left:0; margin-left:0; border-left:0 solid transparent; border-right:5px solid transparent; border-top:0 solid #000; } .tooltip.bottom .tooltip-arrow{ bottom:0; left:0; margin-left:0; border-left:0 solid transparent; border-right:5px solid transparent; border-top:0 solid #000; } .tooltip.right .tooltip-arrow{ bottom:0; left:0; margin-left:0; border-left:0 solid transparent; border-right:5px solid transparent; border-top:0 solid #000; } .tooltip-inner{ width:200px; padding:3px 8px; color:#fff; text-align:center; text-decoration:none; background-color:#313131; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; } .tooltip-arrow{ position:absolute; width:0; height:0; } .timeline > li.timeline-inverted{ float: right; clear: right; margin-top: 30px; margin-bottom: 30px; } .timeline > li:nth-child(2){ margin-top: 60px; } .timeline > li.timeline-inverted > .timeline-badge{ left: -12px; } @media (max-width: 767px) { ul.timeline:before { left: 40px; } ul.timeline > li { margin-bottom: 20px; position: relative; width:100%; float: left; clear: left; } ul.timeline > li > .timeline-panel { width: calc(100% - 90px); width: -moz-calc(100% - 90px); width: -webkit-calc(100% - 90px); } ul.timeline > li > .timeline-badge { left: 28px; margin-left: 0; top: 16px; } ul.timeline > li > .timeline-panel { float: right; } ul.timeline > li > .timeline-panel:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; } ul.timeline > li > .timeline-panel:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; } .timeline > li.timeline-inverted{ float: left; clear: left; margin-top: 30px; margin-bottom: 30px; } .timeline > li.timeline-inverted > .timeline-badge{ left: 28px; } }
$(document).ready(function(){ var my_posts = $("[rel=tooltip]"); var size = $(window).width(); for(i=0;i<my_posts.length;i++){ the_post = $(my_posts[i]); if(the_post.hasClass('invert') && size >=767 ){ the_post.tooltip({ placement: 'left'}); the_post.css("cursor","pointer"); }else{ the_post.tooltip({ placement: 'rigth'}); the_post.css("cursor","pointer"); } } });

Related: See More


Questions / Comments: