
<?php require_once 'ressources/class/Galery.php'; ?>
<?php $galery = new Galery(); ?>
<?php $datas = $galery->getDatas(); ?>

<!doctype html>
<html>
    <head>
        <meta charset='utf-8' />
        <link rel="stylesheet" href="ressources/css/bootstrap.min.css" />
        <link rel="stylesheet" href="ressources/css/flexslider.css" />
        <link rel="stylesheet" href="ressources/css/galery.css" />
        <script src="ressources/js/modernizr-2.6.2-respond-1.1.0.min.js"></script>
        <script src="ressources/js/html5.js"></script>


        <style type="text/css">
<!--
.Style1 {
	font-family: "Times New Roman", Times, serif;
	font-weight: bold;
	font-style: italic;
	color: #FF0000;
}
.Style2 {
	font-size: 24px;
	color: #999999;
}
-->
        </style>
</head> 
    <body>

        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="Style1 Style2">Galerie Hulchi Belluni</h1>
              </div>
          </div>
            <div class="row">
                <div class="col-lg-12">
                    <div id="galery">
                        <div id="slider" class="flexslider">
                            <ul class="slides">
                                <?php foreach ($galery->getImages() as $file => $link): ?>
                                    <li class="slide-item">
                                        <img src="<?= $link; ?>" alt="imageSlider" />
                                        <div class="image-description">
                                            <div class='fullscreen-button'>fullscreen</div>

                                            <?php if (isset($datas[$file])): ?>
                                                <div class="title">
                                                    <?= $datas[$file]['title']; ?>
                                                </div>
                                                <div class="description">
                                                    <?= $datas[$file]['description']; ?>
                                                </div>
                                            <?php endif; ?>
                                        </div>
                                    </li>
                                <?php endforeach; ?>
                            </ul>
                        </div>
                        <div id="carousel" class="flexslider">
                            <div class="inner">
                            <ul class="slides">
                                <?php foreach ($galery->getImages() as $link): ?>
                                    <li class="carousel-slide-item">
                                       <div class="bulle">
                                            <img src="<?= $link; ?>" alt="imageSlider" />
                                        </div>
                                        <img class='img-bulle' src="<?= $link; ?>" alt="imageSlider" />
                                         
                                    </li>
                                <?php endforeach; ?>
                            </ul>
                            </div>
                        </div>
                    </div>
                </div>  
            </div>
        </div>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
        <script>window.jQuery || document.write('<script src="ressources/js/jquery-1.10.1.js"><\/script>')</script>
        <script src="ressources/js/bootstrap.min.js"></script>
        <script src="ressources/js/jquery.flexslider-min.js"></script>
        <script src="ressources/js/galery.js"></script>
    </body>
</html>