---
layout: page
active: gallery
---

<div class="gallery">

	<div class="gallery-col" id="col-a"></div>
	<div class="gallery-col" id="col-b"></div>

	{% for image in site.static_files %}
		{% assign price = "" %}
		{% assign title = "" %}
		{% assign url = "#" %}
		{% if image.path contains 'art/' %}				
			{% unless image.path contains 'thumbs' %}
				{% assign rendered = image.relative_path %}
				{% capture imagepath %}{{ image.path | replace_first: '/', '' }}{% endcapture %}
				{% for post in site.art %}
					{% if image.path contains post.image %}	
						{% assign title = post.title %}
						{% assign url = post.url %}
						{% assign description = post.description %}
						{% assign price = post.price %}
					{% endif %}
				{% endfor %} 
				{% if rendered != image.path %}	
					{% capture thumbsrc %}{% thumbnail imagepath 800x800 %}{% endcapture %}
					{% capture fullsrc %}{% thumbnail imagepath 1900x1900 %}{% endcapture %}									
					<article 
						data-href="/{{ fullsrc | replace: "<img src='", "" |  replace: "' />", "" }}"
						data-title="{{ title }}"
						data-url="{{ url }}"
						data-thumbnail="/{{ thumbsrc | replace: "<img src='", "" |  replace: "' />", "" }}"
						data-caption="<a href='{{ url }}'><b>Learn More</b></a>"
						data-description="{{ description }}" 
						data-price="{{ price }}" 
					></article>
				{% endif %}				
			{% endunless %}
		{% endif %}
	{% endfor %}

</div>
<!-- jQuery -->    

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- include image popups -->
<script src="{{ site.baseurl }}/assets/js/jquery.magnific-popup.js"></script>


<!-- some retina display libary for the high-rest images -->
<script src="{{ site.baseurl }}/assets/js/retina.min.js"></script>
<!-- include Masonry -->
<script src="{{ site.baseurl }}/assets/js/isotope.pkgd.min.js"></script> 
<!-- include mousewheel plugins -->
<script src="{{ site.baseurl }}/assets/js/jquery.mousewheel.min.js"></script>
<!-- include carousel plugins -->
<script src="{{ site.baseurl}}/js/jquery.tinycarousel.min.js"></script>
<!-- include custom script -->
<script src="{{ site.baseurl }}/assets/js/scripts.js"></script>
<!-- our driploader script -->
<script src="{{ site.baseurl }}/assets/js/dripload.js"></script>

<script type="text/javascript">
// wait for the rest of the page to load before loading images
$(window).on("load", function() {
	$('.gallery').magnificPopup({
  		delegate: 'a', // child items selector, by clicking on it popup will open
  		type: 'image'
	});

	dripload.generateImage();
});

</script>