rgutierrez/resq
1
0
Fork 0
Code Issues 126 Pull requests 49 Projects Releases 4 Packages Wiki Activity Actions

Add labels to JO pictures. Make pictures clickable. #490

Browse source
This commit is contained in:
Korina Cordero 2020-09-15 06:48:30 +00:00
parent 1c1096da17
commit d69330e744
1 changed files with 37 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
templates/job-order/cmb.form.onestep.html.twig
View file

@ -544,22 +544,38 @@
{% for key, picture in jo_pictures %}
{% if key == 'image_1' %}
<div class="col-lg-2">
<div class="portrait-box" style="background-image: url('{{ '/uploads/jo_extra/' ~ picture }}');" ></div>
<a href="#" class="image-pop">
<img id="image-1-source" src="{{ asset('/uploads/jo_extra/' ~ picture) }}" style="width: 150px; height: 150px;" />
</a>
<br>
<label>Windscreen Sticker</label>
</div>
{% endif %}
{% if key == 'image_2' %}
<div class="col-lg-2">
<div class="portrait-box" style="background-image: url('{{ '/uploads/jo_extra/' ~ picture }}');" ></div>
<a href="#" class="image-pop">
<img id="image-2-source" src="{{ asset('/uploads/jo_extra/' ~ picture) }}" style="width: 150px; height: 150px;" />
</a>
<br>
<label>Battery</label>
</div>
{% endif %}
{% if key == 'image_3' %}
<div class="col-lg-2">
<div class="portrait-box" style="background-image: url('{{ '/uploads/jo_extra/' ~ picture }}');" ></div>
<a href="#" class="image-pop">
<img id="image-3-source" src="{{ asset('/uploads/jo_extra/' ~ picture) }}" style="width: 150px; height: 150px;" />
</a>
<br>
<label>Proof of Payment</label>
</div>
{% endif %}
{% if key == 'image_4' %}
<div class="col-lg-2">
<div class="portrait-box" style="background-image: url('{{ '/uploads/jo_extra/' ~ picture }}');" ></div>
<a href="#" class="image-pop">
<img id="image-4-source" src="{{ asset('/uploads/jo_extra/' ~ picture) }}" style="width: 150px; height: 150px;" />
</a>
<br>
<label>Odometer</label>
</div>
{% endif %}
@ -580,6 +596,17 @@
{% endfor %}
</div> -->
</div>
<!-- modal for images -->
<div class="modal fade" id="image-modal" tabindex="-1" role="dialog" aria-labelledby="imageModal" aria-hidden="true">
<div class="modal-dialog" data-dismiss="modal">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<img src="" class="image-preview" style="width: 100%;" >
</div>
</div>
</div>
</div>
{% endif %}
<div class="m-form__seperator m-form__seperator--dashed"></div>
@ -1943,6 +1970,12 @@ $(function() {
});
// image modal
$('.image-pop').on('click', function() {
$('.image-preview').attr('src', $(this).find('img').attr('src'));
$('#image-modal').modal('show');
});
});
</script>
{% endblock %}