使用引导模式弹出的图像

Image pop up using bootstrap Modal?

本文关键字：图像 模式      更新时间：2023-09-26

我想在单击它时弹出图像。使用高级自定义字段添加图像。这是我的鳕鱼

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>
 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>
当我单击每个图像时，每个图像都会

很好地弹出，但所有图像的标题都保持不变。但是我的要求是显示每个图像的标题及其图像。这是链接

任何帮助将不胜感激

嗨，我

不确定我是否理解您的问题，但这是我的简单方法。

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

2，在图像标签中添加Data-dir属性，并将标题放入其中，如下所示。

<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.当您使用 jquery 单击时抓取图像时，我可以看到您正在抓取其他属性，像下面一样抓取 data-dir 属性，并使用 jquery .html（） 将标题放在模态标题中。

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

希望这个帮助，如果不让我知道。

相关文章：