Thank you for sharing the admin access.
Based on what you've shared, I would suggest the following steps to create a gallery of images:
1. Your website is already loading Bootstrap 3 styles and scripts and for a lightbox gallery with a slider, you can use its carousel feature.
hidden link
2. In your website's view "Available space image gallery", you can change the "Pagination and Sliders Settings" option to "No pagination" and in the "Loop Editor" section, include the following code for the image slides:
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop>
[wpv-item index=1]
<div class="item active">
<a href="[types field='photo' output='raw'][/types]" rel="lightbox[]">
<img src="[types field='photo' output='raw'][/types]" alt="slider-image">
</a>
</div>
[wpv-item index=other]
<div class="item">
<a href="[types field='photo' output='raw'][/types]" rel="lightbox[]">
<img src="[types field='photo' output='raw'][/types]" alt="slider-image">
</a>
</div>
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
Notes: This view will be used to dynamically generate the carousal's slides.
( screenshot: hidden link )
Please check the "Disable the wrapping DIV around the View" checkbox too, just above the "Output Editor" section.
3. Next, you'll need a another post view to dynamically show the carousal's navigation controls.
( screenshot: hidden link )
You can duplicate your view "Available space image gallery" and name the new view to something like "Available space image gallery - controls".
In the "Loop Editor" section of this new view, you can update the content to only generate the navigation controls like this:
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop>
[wpv-item index=1]
<li data-target="#carousel-example-generic" data-slide-to="[wpv-loop-index accumulate='true' pad='false' offset='-1']" class="active"></li>
[wpv-item index=other]
<li data-target="#carousel-example-generic" data-slide-to="[wpv-loop-index accumulate='true' pad='false' offset='-1']"></li>
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[/wpv-no-items-found]
[wpv-layout-end]
4. Once both your views are ready, you can include the combined code of this carousal in your "Template for Available space" through a text block like this:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
[wpv-view name="view-to-show-carousal-controls"]
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
[wpv-view name="view-to-show-carousal-slides"]
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Note: Please replace "view-to-show-carousal-controls" with the actual slug of your view generated in step 3 and "view-to-show-carousal-slides" with the actual slug of your view "Available space image gallery".
5. At this stage, the image carousel gallery will be working, but the images won't be opening in lightbox/popup.
For that part, you'll install the "WP jQuery Lightbox" ( https://wordpress.org/plugins/wp-jquery-lightbox/ ) and gallery images will automatically open in a lightbox/popup when clicked. We've already included rel="lightbox[]" in the gallery image's code in step 2, which is all this plugin requires.
I hope this helps and please let me know if you need any further assistance around this.
