Javascript 使用引导模式弹出图像？

我想在点击时弹出图片。使用高级自定义字段添加图像。 这是我的code

<?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>
 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>

jQuery（文档）.ready（函数（）{
var$lightbox=jQuery（“#lightbox”）；
jQuery（'[data target=“#lightbox”]'）。在（'click'，函数（事件）{
var$img=jQuery（this.find（'img'），
src=$img.attr（'src'），
alt=$img.attr（'alt'），
css={
“maxWidth”：jQuery（window）.width（）-100，
“maxHeight”：jQuery（窗口）.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（'show.bs.modal'，函数（e）{
var$img=$lightbox.find（'img'）；
$lightbox.find（'.modal dialog'）.css（{'width'：$img.width（）}）；
$lightbox.find（'.close'）.removeClass（'hidden'）；
});
});

当我点击每个图片时，每个图片都会很好地弹出，但是所有图片的标题都保持不变。然而，我的要求是用图片显示每个图片的标题

---

任何帮助都将不胜感激

您好，我不确定是否理解您的问题，但这是我将采用的简单方法

1、 查询数据库并获取每个循环使用的图像和标题

2、将数据目录属性添加到图像标签中，并将标题放入其中，如下所示

3.当您使用jquery在单击时抓取图像时，我可以看到您正在抓取其他属性，抓取data dir属性，如下所示，并使用jquery.html（）将标题放在模式标题中

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

---

如果不让我知道的话，希望这对我有帮助。

嗨，我不确定我是否理解你的问题，不过这是我要做的最简单的方法

1、 查询数据库并获取每个循环使用的图像和标题

2、将数据目录属性添加到图像标签中，并将标题放入其中，如下所示

3.当您使用jquery在单击时抓取图像时，我可以看到您正在抓取其他属性，抓取data dir属性，如下所示，并使用jquery.html（）将标题放在模式标题中

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

如果不让我知道，希望这对我有帮助