Load Gallery Images into a Modal

[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.

[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

[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">&times;</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>

[Jos]

Seems to me something for the Help Wanted (commercial) section in this forum