feat(img_enlarged): Prepares code

This commit is contained in:
sovanna 2019-07-19 17:28:56 +02:00
parent a441e5996f
commit a0314e60ef
5 changed files with 35 additions and 3 deletions

View File

@ -2,7 +2,6 @@
title = "About us" title = "About us"
weight = 4 weight = 4
sort_by = "weight" sort_by = "weight"
template = "customs/about-us.html"
[extra] [extra]
title = "About us" title = "About us"

View File

@ -204,3 +204,7 @@ ul:not(.navbar-nav) li {
.badge-primary { .badge-primary {
background-color: $brand-color; background-color: $brand-color;
} }
.modal-lg {
max-width: 90%;
}

View File

@ -111,6 +111,10 @@ h3, h2, h1 {
padding-top: .5rem; padding-top: .5rem;
margin-top: 12px; margin-top: 12px;
} }
.modal-lg {
max-width: 70%;
}
} }
// Extra large devices (large desktops, 1200px and up) // Extra large devices (large desktops, 1200px and up)

View File

@ -140,6 +140,20 @@
<!-- ./FOOTER --> <!-- ./FOOTER -->
<!-- MODAL for enlarged picture -->
<div class="modal" id="modalEnlarged" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<img src="" id="enlarged" class="img-fluid">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="{{ get_url(path='js/jquery-3.3.1.slim.min.js', cachebust=true) }}"></script> <script src="{{ get_url(path='js/jquery-3.3.1.slim.min.js', cachebust=true) }}"></script>
<script src="{{ get_url(path='js/popper-1.14.7.min.js', cachebust=true) }}"></script> <script src="{{ get_url(path='js/popper-1.14.7.min.js', cachebust=true) }}"></script>
@ -153,6 +167,17 @@
</script> </script>
<script>
$(function () {
$('[data-popup]').click(function (evt) {
var _self = $(this);
var _img_enlarged = _self.data('nsrc');
$('#enlarged').attr('src', _img_enlarged);
$('#modalEnlarged').modal('show');
});
});
</script>
</body> </body>
</html> </html>

View File

@ -13,7 +13,7 @@
<div class="card {% if shadow %}shadow{% endif %}"> <div class="card {% if shadow %}shadow{% endif %}">
{% if src %} {% if src %}
<img src="{{ get_url(path=src, cachebust=true) }}" alt="{% if alt %}{{ alt }}{% endif %}" width="100%" class="card-img-top img-fluid"> <img {% if popup %}data-popup="true" data-nsrc="{{ get_url(path=src, cachebust=true) }}"{% endif %} src="{{ get_url(path=src, cachebust=true) }}" alt="{% if alt %}{{ alt }}{% endif %}" width="100%" class="card-img-top img-fluid">
{% endif %} {% endif %}
</div> </div>
@ -27,7 +27,7 @@
<div class="card {% if shadow %}shadow{% endif %}"> <div class="card {% if shadow %}shadow{% endif %}">
{% if src %} {% if src %}
<img src="{{ get_url(path=src, cachebust=true) }}" alt="{% if alt %}{{ alt }}{% endif %}" width="100%" class="card-img-top img-fluid"> <img {% if popup %}data-popup="true" data-nsrc="{{ get_url(path=src, cachebust=true) }}"{% endif %} src="{{ get_url(path=src, cachebust=true) }}" alt="{% if alt %}{{ alt }}{% endif %}" width="100%" class="card-img-top img-fluid">
{% endif %} {% endif %}
</div> </div>