jpscontracting/templates/project.html

130 lines
6.2 KiB
HTML

{% include 'blocks/head.html' %}
<!-- Header -->
{% include 'blocks/header.html' %}
<!-- Header -->
<!-- Main Content -->
<!-- {% for photo in photos %}
<br><img src="../{{ photo_dir }}/{{ photo }}"> <br />
{% endfor %} -->
<main id="main-content">
<div class="main-section">
<section class="page-section" style="padding:30px 0 0;">
<div class="container">
<div class="row">
<div class="section-fullwidth">
<div class="element-size-100">
<div class="px-project-block">
<div class="col-md-12">
<div class="px-section-title">
<h3>{{ project_name }}</h3>
<span></span>
</div>
<div class="element-size-100">
<div class="px-gallery">
<div id="slider">
<ul class="slides">
{% for photo in photos %}
<li>
<img src="{{ url_for('show_project_file', category=category, project_name=project_name, filename=photo) }}" alt="">
</li>
{% endfor %}
</ul>
</div>
<div id="carousel">
<ul class="slides">
{% for photo in photos %}
<li>
<img src="{{ url_for('show_project_file', category=category, project_name=project_name, filename=photo) }}" alt="">
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
<div class="element-size-100">
<div class="px-separator">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- jQuery (necessary for JavaScript plugins) -->
<script src="{{ url_for('static', filename='scripts/jquery.js') }}"></script>
<script src="{{ url_for('static', filename='scripts/bootstrap.min.js') }}"></script>
<script src="{{ url_for('static', filename='scripts/modernizr.js') }}"></script>
<script src="{{ url_for('static', filename='scripts/jquery.flexslider-min.js') }}"></script>
<script src="{{ url_for('static', filename='scripts/owl.carousel.min.js') }}"></script>
<script src="{{ url_for('static', filename='scripts/sticky_header.js') }}"></script>
<script src="{{ url_for('static', filename='scripts/jquery.nicescroll.min.js') }}"></script>
<script src="{{ url_for('static', filename='scripts/functions.js') }}"></script>
<script type="text/javascript">
$(window).load(function() {
$('#carousel').flexslider({
animation: "slide",
prevText:"<em class='icon-arrow-left9'></em>",
nextText:"<em class='icon-arrow-right9'></em>",
controlNav: true,
animationLoop: false,
slideshow: false,
itemWidth: 142,
itemMargin: 20,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
});
</script>
<script type="text/javascript">
$('.px-portfolio-carousel').owlCarousel({
nav: true,
margin: 5,
navText: [
"<i class=' icon-angle-left'></i>",
"<i class='icon-angle-right'></i>"
],
responsive: {
0: {
items: 1 // In this configuration 1 is enabled from 0px up to 479px screen size
},
480: {
items: 2, // from 480 to 677
nav: false // from 480 to max
},
678: {
items: 3, // from this breakpoint 678 to 959
center: false // only within 678 and next - 959
},
960: {
items: 3, // from this breakpoint 960 to 1199
center: false,
loop: false
},
1200: {
items: 3,
}
}
});
</script>
<!-- Main Content -->
<!-- Footer -->
{% include 'blocks/footer.html' %}
<!-- Footer -->
{% include 'blocks/foot.html' %}