<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Local History</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <link href="css/screen.css" rel="stylesheet">

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>


    <!-- MEDIA PLAYER START -->
    <link rel="stylesheet" href="../dist/css/screen.css"/>
    <style>

        .sp-thumbnail-image {
            visibility: hidden;
        }

        .sp-thumbnail {
            background-position-y: -120px;
        }

        .sp-thumbnail:hover {
            background-position-y: 0;
        }

        .sp-selected-thumbnail .sp-thumbnail {
            background-position-y: 0;
        }

        .sp-selected-thumbnail:after,
        .sp-selected-thumbnail:before {
            display:none;
        }

        .sp-bottom-thumbnails {
            margin: 0;
        }

        .sp-selected-thumbnail .mediaplayer__id {
            background-color: rgba(255, 0, 0, 0.75);
        }

        .mediaplayer__id {
            background-color: rgba(0, 0, 0, 0.75);
            color: white;
            position: absolute;
            left: 0px;
            top: 75px;
            font-weight: normal;
            font-size: 16px;
            padding: 5px;
        }

        /* Arrows */

        /*
        .sp-thumbnail-arrow.sp-previous-thumbnail-arrow::after,
        .sp-thumbnail-arrow.sp-next-thumbnail-arrow::after {
            display:none;
        }

        .sp-thumbnail-arrow.sp-previous-thumbnail-arrow::before,
        .sp-thumbnail-arrow.sp-next-thumbnail-arrow::before {
            background-color: rgba(0, 0, 0, 0.68);
            font-family: 'Glyphicons Halflings';
            content: "\e080";
            color: white;
            font-size: 30px;
            height: 102px;
            transform: none;
            width: 35px;
            top: -30px;
            right: 0px;
            padding-top: 24px;
            padding-left: 2px;
        }

        .sp-thumbnail-arrow.sp-previous-thumbnail-arrow::before {
            content: "\e079";
            left: 0px;
        }
        */



    </style>
    <!-- MEDIA PLAYER END -->

</head>
<body>

<div class="navpanel js-navpanel">
    <nav class="navpanel__navigation">
        <ul class="navpanel__navigation-list">
            <li class="navpanel__navigation-list-item"><a class="navpanel__navigation-link navpanel__navigation-link--location" href="#">Plaats</a></li>
            <li class="navpanel__navigation-list-item active"><a class="navpanel__navigation-link navpanel__navigation-link--casus" href="#">Casus</a></li>
            <li class="navpanel__navigation-list-item"><a class="navpanel__navigation-link navpanel__navigation-link--vergelijk" href="#">Vergelijk</a></li>
            <li class="navpanel__navigation-list-item"><a class="navpanel__navigation-link navpanel__navigation-link--zoek" href="#">Zoek</a></li>
            <li class="navpanel__navigation-list-item"><a class="navpanel__navigation-link navpanel__navigation-link--vraag" href="#">Vraag</a></li>
        </ul>
    </nav>
</div>

<header class="header">
    <div class="header__wrapper">
        <div class="container">
            <div class="row">
                <div class="col-xs-8">
                    <div class="header__top">
                        <div class="header__top-left">
                            <div class="logo">
                                <span class="logo__title">Neogothiek</span>
                                <span class="logo__subtitle">In brabant</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="header__top">
                        <div class="header__top-right">
                            <a class="logo__block" href="#" alt="logo Local History">
                                <img class="logo__block-image" src="images/logo_lh_block.png">
                            </a>
                            <div class="header__navigation-buttons">
                                <a class="header__navigation-buttons-link js-treemenu-button"><span class="glyphicon glyphicon-filter"></span></a>
                                <a class="header__navigation-buttons-link js-navpanel-button" href="#"><span class="glyphicon glyphicon-menu-hamburger"></span></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="hidden-xs">
                <div class="row">
                    <div class="col-md-8">
                        <nav class="header__navigation">
                            <ul class="header__navigation-list">
                                <li class="header__navigation-list-item active"><a class="header__navigation-link" href="#">Plaats</a></li>
                                <li class="header__navigation-list-item"><a class="header__navigation-link" href="#">Casus</a></li>
                                <li class="header__navigation-list-item"><a class="header__navigation-link" href="#">Vergelijk</a></li>
                                <li class="header__navigation-list-item"><a class="header__navigation-link" href="#">Zoek</a></li>
                                <li class="header__navigation-list-item"><a class="header__navigation-link" href="#">Vraag</a></li>
                            </ul>
                        </nav>
                    </div>
                    <div class="col-md-4">
                        <nav class="header__navigation header__navigation--right">
                            <!--<span class="glyphicon glyphicon-menu-hamburger"></span>-->
                            <ul class="header__navigation-list hidden-sm">
                                <li class="header__navigation-list-item"><a class="header__navigation-link" href="#"><span class="header__navigation-link-icon glyphicon glyphicon-info-sign" aria-hidden="true"></span>Informatie</a></li>
                                <li class="header__navigation-list-item"><a class="header__navigation-link" href="#"><span class="header__navigation-link-icon glyphicon glyphicon-cog" aria-hidden="true"></span>Beheer</a></li>
                                <li class="header__navigation-list-item"><a class="header__navigation-link" href="#"><span class="header__navigation-link-icon glyphicon glyphicon-user" aria-hidden="true"></span>Login</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<div class="layout">

    <div class="container">

            <nav class="layout__nav js-layout__nav">
                <div class="content content--menu">

                    <div class="tree-menu">
                        <ul class="tree-menu__list">
                            <li class="tree-menu__item"><a class="tree-menu__menu-link">Eindhoven</a></li>
                            <li class="tree-menu__item"><a class="tree-menu__menu-link">Kempen</a></li>
                            <li class="tree-menu__item"><a class="tree-menu__menu-link">Meijerij</a></li>
                            <li class="tree-menu__item active">
                                <a class="tree-menu__menu-link">Peelland</a>
                                <ul class="tree-menu__submenu">
                                    <li class="tree-menu__submenu-item"><a class="tree-menu__submenu-link" href="#">Asten</a></li>
                                    <li class="tree-menu__submenu-item active"><a class="tree-menu__submenu-link" href="#">Boekel</a></li>
                                    <li class="tree-menu__submenu-item"><a class="tree-menu__submenu-link" href="#">Helmond</a></li>
                                    <li class="tree-menu__submenu-item"><a class="tree-menu__submenu-link" href="#">Lierop</a></li>
                                    <li class="tree-menu__submenu-item"><a class="tree-menu__submenu-link" href="#">Liessel</a></li>
                                    <li class="tree-menu__submenu-item"><a class="tree-menu__submenu-link" href="#">Uden</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>

                </div>

            </nav>

            <main class="layout__main">
                <h1>Aarle-Rixtel, Kerk van Onze Lieve Vrouwe Presentatie, archief</h1>

                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

                <!-- MEDIA PLAYER START -->

                <!-- Media Player -->
                <div id="player-default" data-media-type="photo" data-media-src="source-photo.php">
                    <div class="sp-slides">
                        <template name="slide">
                            <div class="sp-slide">
                                <img data-small="https://i.ytimg.com/vi/HlyAeeq2WzQ/maxresdefault.jpg" class="sp-image" src=""/>
                                <div class="sp-thumbnail">
                                    <img class="sp-thumbnail-image" src=""/>
                                    <div class="mediaplayer__id">{id}</div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>

                <hr/>

                <div id="player-default-4" data-media-type="photo" data-media-src="source-photo2.php">
                    <div class="sp-slides">
                        <template name="slide">
                            <div class="sp-slide">
                                <img data-small="https://i.ytimg.com/vi/HlyAeeq2WzQ/maxresdefault.jpg" class="sp-image" src=""/>
                                <div class="sp-thumbnail">
                                    <img class="sp-thumbnail-image" src=""/>
                                    <div class="mediaplayer__id">{id}</div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>

                <hr/>


                <div id="player-default-2" data-media-type="video" data-active-media-id="25" data-media-src="source-video.php">
                    <template name="playlist">
                        <div class="video-player__list-item-thumb"><img src="{thumbnail}"/></div>
                        <div class="video-player__list-item-text-container">
                            <div class="video-player__list-item-title">{title}</div>
                            <div class="video-player__list-item-description">{description}</div>
                        </div>
                        <div class="video-player__list-item-duration">{duration}</div>
                    </template>
                </div>

                <div id="player-default-3" data-media-type="video" data-media-src="source-video.php">
                    <template name="playlist">
                        <div class="video-player__list-item-thumb"><img src="{thumbnail}"/></div>
                        <div class="video-player__list-item-text-container">
                            <div class="video-player__list-item-title">{title}</div>
                            <div class="video-player__list-item-description">{description}</div>
                        </div>
                        <div class="video-player__list-item-duration">{duration}</div>
                    </template>
                </div>


                <script src="../dist/jquery-mediaplayer.min.js"></script>

                <script>

                    jQuery('#player-default').mediaplayer();
                    jQuery('#player-default-2').mediaplayer();
                    jQuery('#player-default-3').mediaplayer();
                    jQuery('#player-default-4').mediaplayer();

                </script>









                <!-- MEDIA PLAYER END -->









                <!--
                <p>
                    <picture>
                        <source media="(min-width: 768px)" srcset="images/example.png?w=676">
                        <source media="(min-width: 600px)" srcset="images/example.png?w=500">
                        <source media="(min-width: 300px)" srcset="images/example.png?w=300">
                        <img src="images/example.png" alt="sample image" style="width: 100%">
                    </picture>
                </p>-->
                <br/>
                <h2>Klokkengieterij Petit en Fritsen</h2>
                <p>Aarle-Rixtel. Deze werkplaats van de Koninklijke Klokkengieterij Petit en Fritsen is in 1906 gebouwd. Daarvoor heeft het bedrijf vanaf 1660 al op verschillende plaatsen in Aarle-Rixtel gewerkt. In de omgeving van deze plaats kwamen leemputten voor, die leem leveren dat voor de klokkengieterij nodig is.</p>

                <div class="panel panel-default panel-collapse js-panel-collapse open">
                    <div class="panel-heading">Gegevens</div>
                    <div class="panel-body">

                        <div class="gegevens">
                            <table class="gegevens__overzicht">
                                <tr>
                                    <th class="gegevens__label">Naam</th>
                                    <td class="gegevens__info">Dommelen Kerk van de heilige Martinus</td>
                                </tr>
                                <tr>
                                    <th class="gegevens__label">Functie</th>
                                    <td class="gegevens__info">monument</td>
                                </tr>
                                <tr>
                                    <th class="gegevens__label">Bouwdeel</th>
                                    <td class="gegevens__info">achterzijde</td>
                                </tr>
                                <tr>
                                    <th class="gegevens__label">Object</th>
                                    <td class="gegevens__info">monument</td>
                                </tr>
                                <tr>
                                    <th class="gegevens__label">Stijl</th>
                                    <td class="gegevens__info"></td>
                                </tr>
                                <tr>
                                    <th class="gegevens__label">Materiaal</th>
                                    <td class="gegevens__info">baksteen</td>
                                </tr>
                                <tr>
                                    <th class="gegevens__label">Meer info</th>
                                    <td class="gegevens__info">-</td>
                                </tr>
                            </table>
                        </div>

                        <div class="gegevens">
                            <table class="gegevens__overzicht">
                                <tr>
                                    <th class="gegevens__label">Personen</th>
                                    <td class="gegevens__info">Dommelen Kerk van de heilige Martinus</td>
                                </tr>
                                <tr>
                                    <th class="gegevens__label">Monument</th>
                                    <td class="gegevens__info">Nee</td>
                                </tr>
                                <tr>
                                    <th class="gegevens__label">Regio</th>
                                    <td class="gegevens__info">Noord-Brabant</td>
                                </tr>
                                <tr>
                                    <th class="gegevens__label">Plaats</th>
                                    <td class="gegevens__info">Valkenswaard</td>
                                </tr>
                                <tr>
                                    <th class="gegevens__label">Adres</th>
                                    <td class="gegevens__info">Kerkakkers , (5554)</td>
                                </tr>
                                <tr>
                                    <th class="gegevens__label">Start</th>
                                    <td class="gegevens__info">1350</td>
                                </tr>
                                <tr>
                                    <th class="gegevens__label">Oplevering</th>
                                    <td class="gegevens__info">1460</td>
                                </tr>
                            </table>
                        </div>

                    </div>
                </div>

                <div class="panel panel-default panel-collapse js-panel-collapse open">
                    <div class="panel-heading">Locatie</div>
                    <div class="panel-body">
                        <div id="map" style="width: 100%;height: 150px;"></div>
                    </div>
                </div>

                <div class="panel panel-default panel-collapse js-panel-collapse open">
                    <div class="panel-heading">Documenten</div>
                    <div class="panel-body">
                        <div class="document document--pdf">
                            <div class="document__title">Dommelen, de kerk van de heilige Martinus</div>
                            <div class="document__description">Dit document beschrijft in het kort de kerk van de heilige Martinus in Dommelen en haar geschiedenis.</div>
                            <div class="document__sources">Bronnen: De informatie voor dit document komt van verschillende websites. Ook is gebruik gemaakt van een publicatie van het parochiebestuur uit 1994 met de titel; Parochie H. Martinus. Daarnaast komt er informatie uit de catalogus van de tentoonstelling in de Nikolaaskerk te Valkenswaard in 1973 getiteld; Kerkelijke Kunst uit het Dekenaat Valkenswaard.</div>
                        </div>
                        <div class="document document--pdf locked">
                            <div class="document__title">Dommelen, de kerk van de heilige Martinus</div>
                            <div class="document__description">Dit document beschrijft in het kort de kerk van de heilige Martinus in Dommelen en haar geschiedenis.</div>
                            <div class="document__sources">Bronnen: De informatie voor dit document komt van verschillende websites. Ook is gebruik gemaakt van een publicatie van het parochiebestuur uit 1994 met de titel; Parochie H. Martinus. Daarnaast komt er informatie uit de catalogus van de tentoonstelling in de Nikolaaskerk te Valkenswaard in 1973 getiteld; Kerkelijke Kunst uit het Dekenaat Valkenswaard.</div>
                        </div>
                    </div>
                </div>

                <div class="panel panel-default panel-collapse js-panel-collapse open">
                    <div class="panel-heading">Beschrijving</div>
                    <div class="panel-body">
                        Aarle-Rixtel. Deze werkplaats van de Koninklijke Klokkengieterij Petit en Fritsen is in 1906 gebouwd. Daarvoor heeft het bedrijf vanaf 1660 al op verschillende plaatsen in Aarle-Rixtel gewerkt. In de omgeving van deze plaats kwamen leemputten voor, die leem leveren dat voor de klokkengieterij nodig is.
                    </div>
                </div>

                <div class="panel panel-default panel-collapse js-panel-collapse open">
                    <div class="panel-heading">Medewerkers</div>
                    <div class="panel-body">
                        Aarle-Rixtel. Deze werkplaats van de Koninklijke Klokkengieterij Petit en Fritsen is in 1906 gebouwd. Daarvoor heeft het bedrijf vanaf 1660 al op verschillende plaatsen in Aarle-Rixtel gewerkt. In de omgeving van deze plaats kwamen leemputten voor, die leem leveren dat voor de klokkengieterij nodig is.
                    </div>
                </div>

                <div class="panel panel-default panel-collapse js-panel-collapse open">
                    <div class="panel-heading">Opmerkingen</div>
                    <div class="panel-body">
                        Aarle-Rixtel. Deze werkplaats van de Koninklijke Klokkengieterij Petit en Fritsen is in 1906 gebouwd. Daarvoor heeft het bedrijf vanaf 1660 al op verschillende plaatsen in Aarle-Rixtel gewerkt. In de omgeving van deze plaats kwamen leemputten voor, die leem leveren dat voor de klokkengieterij nodig is.
                    </div>
                </div>

            </main>

            <div class="clearfix hidden-lg"></div>
            <div class="layout__aside_pusher hidden-lg">&nbsp;</div>
            <aside class="layout__aside">

                <div class="content content--side">
                    <div class="related">
                        <img class="related__image" src="http://www.localhistory.nl/website/public/data/producties/207/images/thumbnail.png">
                        <h2 class="related__title">Maarheeze, Sint Gertrudiskerk, kapitelen</h2>
                        <p class="related__text">In de Gertrudiskerk te Maarheeze hebben de verschillende kapitelen allemaal een eigen vorm. Het begint bij de hoofdingang van de kerk. Ook in de middenbeuk, dwarsbeuk en priesterkoor zie je hoog in de...</p>
                        <a class="related__link" href="#">Bekijk <span class="glyphicon glyphicon-chevron-right"></span></a>
                    </div>

                    <div class="related">
                        <img class="related__image" src="http://www.localhistory.nl/website/public/data/producties/207/images/thumbnail.png">
                        <h2 class="related__title">Maarheeze, Sint Gertrudiskerk, kapitelen</h2>
                        <p class="related__text">In de Gertrudiskerk te Maarheeze hebben de verschillende kapitelen allemaal een eigen vorm. Het begint bij de hoofdingang van de kerk. Ook in de middenbeuk, dwarsbeuk en priesterkoor zie je hoog in de...</p>
                        <a class="related__link" href="#">Bekijk <span class="glyphicon glyphicon-chevron-right"></span></a>
                    </div>

                    <div class="related">
                        <img class="related__image" src="http://www.localhistory.nl/website/public/data/producties/207/images/thumbnail.png">
                        <h2 class="related__title">Maarheeze, Sint Gertrudiskerk, kapitelen</h2>
                        <p class="related__text">In de Gertrudiskerk te Maarheeze hebben de verschillende kapitelen allemaal een eigen vorm. Het begint bij de hoofdingang van de kerk. Ook in de middenbeuk, dwarsbeuk en priesterkoor zie je hoog in de...</p>
                        <a class="related__link" href="#">Bekijk <span class="glyphicon glyphicon-chevron-right"></span></a>
                    </div>
                </div>

            </aside>
        </div>


</div>



<footer class="footer">
    <div class="footer__content">
        <div class="container">
            <div class="footer__content-copyright">
                Copyright © <?php echo date('Y') ?> Neogotiekbrabant, Localhistory
            </div>
            <nav class="footer__content-navigation">
                <a class="footer__content-navigation-link" href="#">Contact</a><span class="footer__content-navigation-link-seperator">|</span>
                <a class="footer__content-navigation-link" href="#">Disclaimer</a><span class="footer__content-navigation-link-seperator">|</span>
                <a class="footer__content-navigation-link" href="#">Cookies</a><span class="footer__content-navigation-link-seperator">|</span>
                <a class="footer__content-navigation-link" href="#">Privacy</a><span class="footer__content-navigation-link-seperator">|</span>
            </nav>
        </div>
    </div>
</footer>


<script src="js/bundle.min.js"></script>
</body>
</html>