<link rel=“stylesheet” type=“text/css” href=“/assets/blog/national-parks-gallery/styles.css”/> <link rel=“stylesheet” type=“text/css” href=“/assets/blog/national-parks-gallery/library/slick/slick.css”/> <link rel=“stylesheet” type=“text/css” href=“/assets/blog/national-parks-gallery/library/slick/slick-theme.css”/> <script type=“text/javascript” src=“/assets/blog/national-parks-gallery/library/slick/slick.min.js”></script> <link rel=“stylesheet” type=“text/css” href=“/assets/blog/national-parks-gallery/library/magnific-popup.css”/> <script type=“text/javascript” src=“/assets/blog/national-parks-gallery/library/jquery.magnific-popup.js”></script> <link rel=“stylesheet” type=“text/css” href=“/assets/blog/national-parks-gallery/library/leaflet/leaflet.css”/> <script type=“text/javascript” src=“/assets/blog/national-parks-gallery/library/leaflet/leaflet.js”></script> <script type=“text/javascript” src=“/assets/blog/national-parks-gallery/library/easy-button.min.js”></script> <script src=“kit.fontawesome.com/b53b88607b.js” crossorigin=“anonymous”></script> <script src=“/assets/scripts/national-parks-gallery/national_park_markers.js”></script> <script src=“/assets/scripts/national-parks-gallery/park_boundaries.js”></script> <link rel=“stylesheet” href=“cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.css”> <script type=“text/javascript” src=“/assets/blog/national-parks-gallery/library/jquery.lazy-master/jquery.lazy.min.js”></script>

{% capture parks %}

{% for image in site.static_files %}
    {% if image.path contains 'blog/national-parks-gallery/photos' %}
        {% unless image.path contains 'small' %}
            {% assign paths = image.path | split:'/' %}
            {{ paths[5] }}
        {% endunless %}
    {% endif %}
{% endfor %}

{% endcapture %} {% assign uniq_parks = parks | split:' ' | uniq %}

<div style=“position: relative; width:100%; height: 500px; margin: 25px auto;”>

<div id="galleryContent" class="content" style="position: absolute; top: 0px; bottom: 0; width: 100%;">
    <div id="map" style="border-radius: 5px; z-index: 500;"></div>
    <div class="container" style="border-radius: 0px 0px 5px 5px;">
        <div class="slick-slider" id="ALL" style="display: block;">
            {% assign n = site.static_files | size %}
            {% assign images = site.static_files | sample: n %}
            {% for image in images %}
                {% if image.path contains 'blog/national-parks-gallery/photos' %}
                    {% unless image.path contains 'small' %}
                        <a href="{{ site.baseurl }}{{ image.path }}">
                            <img class="gallery-photo" src="{{ site.baseurl }}{{ image.path }}" alt="{{ forloop.index }}" height=100%>
                        </a>
                    {% endunless %}
                {% endif %}
            {% endfor %}
        </div>
        {% for park in uniq_parks %}
            <div class="slick-slider" id="{{ park }}" style="display: none;">
                {% assign n = site.static_files | size %}
                {% assign images = site.static_files | sample: n %}
                {% for image in images %}
                    {% if image.path contains park %}
                        {% unless image.path contains 'small' %}
                            <a href="{{ site.baseurl }}{{ image.path }}">
                                <img class="gallery-photo" src="{{ site.baseurl }}{{ image.path }}" alt="{{ forloop.index }}" height=100%>
                            </a>
                        {% endunless %}
                    {% endif %}
                {% endfor %}
            </div>
        {% endfor %}
        <div class="embeddedYoutube" id="BISC" style="display: none; text-align: center; height: 100%;">
            <a href="https://www.youtube.com/embed/o1sJB5HSGeI">
                <iframe id="BISC-video" height="100%" src="https://www.youtube.com/embed/o1sJB5HSGeI" frameborder=0 allow="fullscreen" enablejsapi=1;></iframe>
            </a>
        </div>
    </div>
</div>
<script type="text/javascript" src="/assets/scripts/national-parks-gallery/map.js"></script>
<script type="text/javascript" src="/assets/scripts/national-parks-gallery/gallery.js"></script>

</div>