Image pop up using bootstrap Modal?

Question

I want to pop up image on clicking it. Images are added by using advanced custom field. Here is my cod e

<?php
 $args=array(
     'post_type' => 'map', 
);  
$staffs = new WP_Query( $args );

if( $staffs->have_posts() ) {
  while( $staffs->have_posts() ) {
    $staffs->the_post();
    ?>
     <div class="div_img">
        <div class="col-md-3">
            <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"> 
               <h4 class="map_titles"><?php the_title();?></h4>
               <img src="<?php the_field('map_image'); ?>" />
            </a>
        </div>
    </div>
    <div class="map_modal">
        <div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">×</button>
                <div class="modal-content">
                 <div class="modal-header">
                    <h4 class="modal-title"><?php the_title();?></h4>
                  </div>
                    <div class="modal-body">
                       <img src="<?php the_field( 'map_image' ); ?>" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <?php
  }?>

    <?php
};?> 

script

<script>
 jQuery(document).ready(function() {
    var $lightbox = jQuery('#lightbox');

    jQuery('[data-target="#lightbox"]').on('click', function(event) {
        var $img = jQuery(this).find('img'), 
            src = $img.attr('src'),
            alt = $img.attr('alt'),
            css = {
                'maxWidth': jQuery(window).width() - 100,
                'maxHeight': jQuery(window).height() - 100
            };

        $lightbox.find('.close').addClass('hidden');
        $lightbox.find('img').attr('src', src);
        $lightbox.find('img').attr('alt', alt);
        $lightbox.find('img').css(css);
    });

    $lightbox.on('shown.bs.modal', function (e) {
        var $img = $lightbox.find('img');

        $lightbox.find('.modal-dialog').css({'width': $img.width()});
        $lightbox.find('.close').removeClass('hidden');
    });
});</script>

when I click on each image each image pop up nicely but the title remain same for all images. However my requirement is to show the title of each image with its image .Here is link

Any help would be highly appreciated

Answer 1

Hi I am not sure if I understand your question, however this is the simple way I will go about it.

1; query database and get the image and the title use for each loop.

2,Add Data-dir attribute to the image tag and put the title inside like below.

<div class="div_img"> <div class="col-md-3"> <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"> <h4 class="map_titles"><?php the_title();?></h4> <img src="<?php the_field('map_image'); ?> data-dir="<?php the_title();?>"/> </a> </div> </div>

3.When you grab the image on click using jquery I can see you are grabbing other attribute, grab the data-dir attribute as well like below, and using jquery .html() put the title in the modal-title.

var title = $img.attr('data-dir'),
$('.modal-title').html(title);

Hopes this help if not let me know.