Hello, i little bit confuse how to put this to work.
How to put the data on the lightbox (below one) into every item of team member image?

Now, it just come up with just same lightbox item for every image.

Code: Select all

        <cms:pages masterpage='relawan.php' limit='4' paginate='1'>

        <div class="col-sm-3">  
            <a href="#" data-toggle="modal" data-target="#relModal">
            <div class="team-members">
                <div class="team-avatar">
                    <img class="img-responsive" src="<cms:show relawan_image/>">
                </div>
                <div class="team-desc">
                    <h4><cms:show k_page_title/></h4>
                </div>
            </div> 
            </a>
        </div>
            
            
        <!-- Light Box -->
      <div class="modal light-box fade" id="relModal" tabindex="-1" role="dialog" aria-hidden="false">
      <!-- Modal -->
         <div class="container">
            <div class="col-md-1"></div>
            <div class="col-md-10">
               <div class="modal-dialog">
                  <div class="modal-content">
                     <div class="modal-header">
                        <button type="button" class="close icon_close" data-dismiss="modal" aria-label="Close"></button>
                        <div class="popup-heading">
                           <p>Informasi Lengkap</p>
                        </div>
                     </div>
                     <div id="contact" class="modal-body">
                        <div class="popup-form">
                                    
                           <div class="form-group col-md-6 col-sm-6">
                                        <span style="text-align:left" class="form-control">NAMA: <cms:show k_page_title/></span>
                           </div>
                                        
                           <div class="form-group col-md-6 col-sm-6">
                                        <span style="text-align:left" class="form-control">TTL: <cms:date mydatetime/></span>
                           </div>
                                    <div class="form-group col-md-6 col-sm-6">
                                        <span style="text-align:left" class="form-control">JK: <cms:show kelamin/></span>
                           </div>
                                    <div class="form-group col-md-6 col-sm-6">
                                        <span style="text-align:left" class="form-control">NO TELP: <cms:show telpon/></span>
                           </div>
                           <div class="form-group col-md-6 col-sm-6">
                                        <span style="text-align:left" class="form-control">ALAMAT: <cms:show alamat/></span>
                           </div>
                           <div class="form-group col-md-6 col-sm-6">
                                        <span style="text-align:left" class="form-control">KEL: <cms:show kelurahan/></span>
                           </div>
                           <div class="form-group col-md-6 col-sm-6">
                                        <span style="text-align:left" class="form-control">KEC: <cms:show kecamatan/></span>
                           </div>
                           <div class="form-group col-md-6 col-sm-6">
                                        <span style="text-align:left" class="form-control">KOTA: <cms:show kota/></span>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-md-1"></div>
         </div>
      </div>
      <!-- Light Box -->
            
        </cms:pages>

Screenshoot: The same this lightbox for every image.



Thanks in advance.

[KK]

Hi,

The code that ties up the modal popups to the links is highlighted below -

<a href="#" data-toggle="modal" data-target="#relModal">
..
<!-- Light Box -->
<div class="modal light-box fade" id="relModal" tabindex="-1" role="dialog" aria-hidden="false">

As you can see, it is ID of the popup and, not surprisingly, is supposed to be unique.

In your code, you are looping through the pages four times, generating the link and popups four times but each of the four has the same ID - which is not correct..

To resolve this, you need to give each set of link/popup a unique ID. One easy way would be to append the cloned page's ID or name to the markup ID e.g. as follows -

<a href="#" data-toggle="modal" data-target="#relModal<cms:show k_page_id />">

<!-- Light Box -->
<div class="modal light-box fade" id="relModal<cms:show k_page_id />" tabindex="-1" role="dialog" aria-hidden="false">

Hope it helps.

Wow, why i am never thinking about this one
Thanks so much kk, its so much helping.

Salute

[KK]

You are welcome

could you suggest an efficient way to set up this code?...
I have several pages managed by couch but I would like to have my modal coded only once, then it gets populated asynchronously upon button click.
I have searched the web and can't find any information good enough.
Please, this is my current modal code (UIKit v3.x):

Code: Select all

<div id="journal-modal" class="uk-modal-container uk-flex-top" uk-modal>
  <div class="uk-modal-dialog  uk-modal-body" uk-overflow-auto>
    <button class="uk-modal-close-default" type="button" uk-close></button>
    <h2>Title here</h2>
    <p>Body text here</p>
  </div>
</div>