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>