<script>
   
	$( window ).resize(function() {
		var screenheight = $( window ).height();
		$('.mySlides img').css('max-height', screenheight);
		
	});
	var screenheight = $( window ).height();
	$('.mySlides img').css('max-height', screenheight);
</script>
{% if has_images %}
    
    <div class="lightbox-content">
        {% set i = 1 %}
        {% for image in images %}
            <div class="mySlides">
                <div class="numbertext">{{ i }} / {{ images|length }}</div>
                <a onclick="oczoom.plusSlides(1)" ><img src="{{ image.src }}" alt=""></a>
				<span class="close cursor" onclick="oczoom.closeLightBox()">&times;</span>
				
            </div>
            {% set i = i + 1 %}
        {% endfor %}
		<span class="closezoom" onclick="oczoom.closeLightBox()"></span>
    </div>
	<span class="closezoom" onclick="oczoom.closeLightBox()"></span>
    <a class="prev" onclick="oczoom.plusSlides(-1)">&#10094;</a>
	<a class="next" onclick="oczoom.plusSlides(1)">&#10095;</a>
{% else %}
    <div class="lightbox-content">No Image Data</div>
	<span class="closezoom" onclick="oczoom.closeLightBox()"></span>
{% endif %}
