forked from M-Labs/web2019
feat(img_enlarged): Prepares code
This commit is contained in:
parent
a441e5996f
commit
a0314e60ef
@ -2,7 +2,6 @@
|
||||
title = "About us"
|
||||
weight = 4
|
||||
sort_by = "weight"
|
||||
template = "customs/about-us.html"
|
||||
|
||||
[extra]
|
||||
title = "About us"
|
||||
|
@ -203,4 +203,8 @@ ul:not(.navbar-nav) li {
|
||||
|
||||
.badge-primary {
|
||||
background-color: $brand-color;
|
||||
}
|
||||
|
||||
.modal-lg {
|
||||
max-width: 90%;
|
||||
}
|
@ -111,6 +111,10 @@ h3, h2, h1 {
|
||||
padding-top: .5rem;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.modal-lg {
|
||||
max-width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
// Extra large devices (large desktops, 1200px and up)
|
||||
|
@ -140,6 +140,20 @@
|
||||
|
||||
<!-- ./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/popper-1.14.7.min.js', cachebust=true) }}"></script>
|
||||
@ -153,6 +167,17 @@
|
||||
|
||||
</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>
|
||||
|
||||
</html>
|
||||
|
@ -13,7 +13,7 @@
|
||||
<div class="card {% if shadow %}shadow{% endif %}">
|
||||
|
||||
{% 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 %}
|
||||
|
||||
</div>
|
||||
@ -27,7 +27,7 @@
|
||||
<div class="card {% if shadow %}shadow{% endif %}">
|
||||
|
||||
{% 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 %}
|
||||
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user