app/views/conferences/_gallery.html.haml
<!-- Modal -->
%div{ class: "modal fade", id: "gallery", tabindex: "-1", role: "dialog", "aria-labelledby" => "myLargeModalLabel", "aria-hidden"=> "true" }
%div{ class: "modal-dialog modal-lg" }
%div{ class: "modal-content" }
%div{ class: "modal-body" }
%div{ id: "carousel-example-generic", class: "carousel slide", "data-ride" => "carousel" }
<!-- Wrapper for slides -->
%div{ class: "carousel-inner" }
<!-- Controls -->
%a{ class: "left carousel-control", href: "#carousel-example-generic", role: "button", "data-slide" => "prev" }
%span.fa-solid.fa-chevron-left
%a{ class: "right carousel-control", href: "#carousel-example-generic", role: "button", "data-slide" => "next" }
%span.fa-solid.fa-chevron-right
:javascript
$(document).ready(function(){
var count = 0;
$('#gallery-btn').click(function(){
if(count == 0){
$('#gallery').modal('show');
$('#gallery .modal-body').append('<i class="fa fa-spinner fa-spin fa-4x"></i>');
count +=1;
}
else{
$('#gallery').modal('show');
return false;
}
});
});