Page 1 of 1
Load Gallery Images into a Modal
Posted: Fri Jan 08, 2016 5:12 pm
by mr.bacan
Hi, I'm using Gallery Module 2.0.3 on CMSMS 2.1.1 and have several galleries. What I'm trying to accomplish is to load each gallery in a modal window when clicking on main gallery. Let me try to explain better.
Gallery A
- Image 1
- Image 2
- Image 3
Gallery B
- Image 1
- Image 2
- Image 3
The idea is when clicking on "Gallery A" a modal opens loading all images on that gallery. After closing it, if you then click on "Gallery B" a modal opens again loading images.
Thanks in advance for any help on this.
Re: Load Gallery Images into a Modal
Posted: Fri Jan 08, 2016 6:45 pm
by Jos
This should be possible with two gallery-templates
The first template just has a foreach where you check if the item is a folder, then call {Gallery id=..} like this:
Code: Select all
{foreach from=$images item=image}
{if $image->isdir}
<div class="gallery">{Gallery id=$image->fileid template='tpl2'}</div>
{/if}
{/foreach}
The second teplate 'tpl2' is a regular (lightbox) template, where you do as described here:
How to have one thumbnail and the rest hidden
Re: Load Gallery Images into a Modal
Posted: Fri Jan 08, 2016 11:04 pm
by mr.bacan
Hi Josh, thanks for your answer. I tried to do what yo did and created 1 regular lightbox template (working ok), and a second template but here's my problem. I have a modal code and don't know where to position the gallery code in order to open the modal with the gallery.
The code for the 2nd. template is
Code: Select all
<div class="row">
{foreach from=$images item=image}
<div class="col-sm-6">
{if $image->isdir}
{Gallery id=$image->fileid template='template2'}
{/if}
</div>
{/foreach}
</div>
<!-- Modal fullscreen -->
<div class="modal modal-fullscreen fade" id="modal-fullscreen" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
"GALLERY IMAGES SHOULD LOAD HERE"
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Re: Load Gallery Images into a Modal
Posted: Sat Jan 09, 2016 2:10 pm
by Jos
Seems to me something for the
Help Wanted (commercial) section in this forum