{{ header }}
<div class="container gallery-photo">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
    <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
    {% endfor %}
  </ul>
  <div class="row">{{ column_left }}
    {% if column_left and column_right %}
    {% set class = 'col-sm-6' %}
    {% elseif column_left or column_right %}
    {% set class = 'col-sm-9' %}
    {% else %}
    {% set class = 'col-sm-12' %}
    {% endif %}
    <div id="content" class="{{ class }} mgallery-wrap {{ cursive_font ? 'mgallery-fonts' : '' }}">{{ content_top }}
      <h2>{{ heading_title }}</h2>
	    {% if gallerys %}
	    	<div class="row">
		        {% for gallery in gallerys %}
		        <div class="col-sm-12">
            <h3 class="mheading_title">{{ gallery.title }}</h3>
            {% if display_description %}
              <div class="mgallery_info">
						    {{ gallery.top_description }}
              </div>
            {% endif %}
						<div class="mgallery lightgallery">
						{% for photo in gallery.photos %}
							<div class="image-col" data-src="{{ photo.popup }}">
		    				<div class="image-incol">
		    					<div class="image">
										<img src="{{ photo.image }}" title="{{ photo.name }}" alt="{{ photo.name }}" />
									</div>
									<span class="mgallery-caption left-to-right">
			    					{% if photo.link %}
                      <h5><a href="{{ photo.link }}">{{ photo.name }}</a></h5>
                    {% else %}
                      <h5>{{ photo.name }}</h5>
                    {% endif %}
			    					<div class="mgallery-popup">
			    						<a href="{{ photo.popup }}"><i class="enlarge-icon"></i></a>
			    					</div>
			    				</span>
								</div>
							</div>
              {% endfor %}
						</div>
					</div>
	        {% endfor %}
	    	</div>
	    {% else %}
      <p class="text-center">{{ text_no_results }}</p>
      {% endif %}
    <br/>
    <div class="row">
      <div class="col-sm-6 text-left">{{ pagination }}</div>
      <div class="col-sm-6 text-right">{{ results }}</div>
    </div>
		{{ content_bottom }}</div>
  	{{ column_right }}</div>
<script type="text/javascript"><!--
  $(document).ready(function(){
    $('.lightgallery').lightGallery();
  });
//--></script>
</div>
<style type="text/css">
  {% if gallery_setting_color.title_text %}
    .mgallery-wrap h2{
      color: {{ gallery_setting_color.title_text }};
    }
  {% endif %}
  {% if gallery_setting_color.album_title_bg %}
    .mgallery-wrap .mheading_title{
      background: {{ gallery_setting_color.album_title_bg }};
    }
  {% endif %}
  {% if gallery_setting_color.albumtitle_text %}
    .mgallery-wrap .mheading_title{
      color: {{ gallery_setting_color.albumtitle_text }};
    }
  {% endif %}
  {% if gallery_setting_color.photo_hoverbg_color %}
    .mgallery .mgallery-caption{
      background: {{ gallery_setting_color.photo_hoverbg_color }};
    }
  {% endif %}
  {% if gallery_setting_color.photo_tilte_color %}
    .mgallery .image-col h5 a, .mgallery .image-col .mgallery-caption h5{
      color: {{ gallery_setting_color.photo_tilte_color }};
    }
  {% endif %}
  {% if gallery_setting_color.photo_zoomicon_color %}
    .mgallery .mgallery-caption .mgallery-popup i{
      color: {{ gallery_setting_color.photo_zoomicon_color }};
    }
  {% endif %}
</style>
{{ footer }}