{% extends "t_article.twig" %}

{% block article_content %}
    {% set photosGallery = [] %}
    {% set photos = data.photos %}
    {% set theme_title=data.theme_title  %}
    {% set count = data.count %}
    <ul class="breadcrumb">

        <li><a href="?action=index">Accueil</a></li>
        <li><a href="?controller=listing&action=mediatheque">Médiathèque</a></li>
        <li><a href="?controller=listing&action=themes">Photos</a></li>
        <li>{{theme_title.THEME_TITLE|raw}}</li>
        
    </ul>
{% if count.count>0 %}
  <div id="dot1" class="article_container" style="display:inline-block;margin-top: 0px;" >
    {% for  ph in photos %}
       {% set photosGallery = photosGallery|merge([ph]) %}
                   
        <div id="dot1" class="article_container_media" >
           

            <div  style="height: 181px; margin-top: 5px;">
             <a href="#"  data-toggle="modal" data-target="#gallery"  >

             <img  style="width: 100%; height: 100%; float: left; "  alt="" src="Media/images_gal/Medium/{{ ph.IMAGE |raw}}">
           </a>
            </div>
           
           <div classe="article_date" style="text-align: center;margin-top: 4px;">
                {{rawing(ph.TITLE) }}
           </div>
        </div>
    {% endfor %}
    <div id="content"></div>
   
    
     <div class="modal fade" id="gallery" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
         
		 <script type="text/javascript" src="js/jssor.js"></script>
         <script type="text/javascript" src="js/jssor.slider.js"></script>               
         <script type="text/javascript" src="js/gallery.js"></script>
         
         <div class="modal-dialog">
                    <div class="modal-content">        
                    <div class="modal-header" style="background-color: black;padding-top: 4px; padding-bottom: 4px;">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" style="color:white;">&times;</span></button>
                                    <h2 class="modal-title" id="exampleModalLabel" style="color:white;">{{theme_title.THEME_TITLE|raw}}</h2>
                     </div>            
                               
                                    <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px; overflow: hidden; ">

        <!-- Loading Screen -->
        <div u="loading" style="position: absolute; top: 0px; left: 0px;">
            <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
                background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
            </div>
            <div style="position: absolute; display: block; background: url(images/loading.gif) no-repeat center center;
                top: 0px; left: 0px;width: 100%;height:100%;">
            </div>
        </div>

        <!-- Slides Container -->
        <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px; overflow: hidden;">
         
            {% for  ph2 in photosGallery %}
            <div>
                <img u="image" src="Media/images_gal/Medium/{{ ph2.IMAGE |raw}}" />
           <div class="caption" style="position: absolute; top: 5px; left: 10px;font-weight: bold;color:white;text-shadow: 2px 2px black;" u="caption" ><p>{{ ph2.TITLE |raw}}</p></div>

            </div>
           {% endfor %}
        </div>

        <!-- Bullet Navigator Skin Begin -->
        <style>
            /* jssor slider bullet navigator skin 05 css */
            /*
            .jssorb05 div           (normal)
            .jssorb05 div:hover     (normal mouseover)
            .jssorb05 .av           (active)
            .jssorb05 .av:hover     (active mouseover)
            .jssorb05 .dn           (mousedown)
            */
            .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
                background: url(images/b05.png) no-repeat;
                overflow: hidden;
                cursor: pointer;
            }

            .jssorb05 div {
                background-position: -7px -7px;
            }

                .jssorb05 div:hover, .jssorb05 .av:hover {
                    background-position: -37px -7px;
                }

            .jssorb05 .av {
                background-position: -67px -7px;
            }

            .jssorb05 .dn, .jssorb05 .dn:hover {
                background-position: -97px -7px;
            }
        </style>
        <!-- bullet navigator container -->
        <div u="navigator" class="jssorb05" style="position: absolute; bottom: 16px; right: 6px;">
            <!-- bullet navigator item prototype -->
            <div u="prototype" style="POSITION: absolute; WIDTH: 16px; HEIGHT: 16px;"></div>
        </div>
        
       
        <!-- Bullet Navigator Skin End -->
        <!-- Arrow Navigator Skin Begin -->
        <style>
            /* jssor slider arrow navigator skin 12 css */
            /*
            .jssora12l              (normal)
            .jssora12r              (normal)
            .jssora12l:hover        (normal mouseover)
            .jssora12r:hover        (normal mouseover)
            .jssora12ldn            (mousedown)
            .jssora12rdn            (mousedown)
            */
            .jssora12l, .jssora12r, .jssora12ldn, .jssora12rdn {
                position: absolute;
                cursor: pointer;
                display: block;
                background: url(images/a12.png) no-repeat;
                overflow: hidden;
            }

            .jssora12l {
                background-position: -16px -37px;
            }

            .jssora12r {
                background-position: -75px -37px;
            }

            .jssora12l:hover {
                background-position: -136px -37px;
            }

            .jssora12r:hover {
                background-position: -195px -37px;
            }

            .jssora12ldn {
                background-position: -256px -37px;
            }

            .jssora12rdn {
                background-position: -315px -37px;
            }
        </style>
        <!-- Arrow Left -->
        <span u="arrowleft" class="jssora12l" style="width: 30px; height: 46px; top: 123px; left: 0px;">
        </span>
        <!-- Arrow Right -->
        <span u="arrowright" class="jssora12r" style="width: 30px; height: 46px; top: 123px; right: 0px">
        </span>
        <!-- Arrow Navigator Skin End -->
        
    </div>

         </div>

                                



                         
                        </div>

                    </div>
                                            
</div>
        
         {% else %}
        
          <div class="article_container" >
        <div class="article_title">
            Pas de contenu disponible
        </div>
        </div>
        
         {% endif %}

    
{% endblock %}