Question

我想点击它时弹出图像。使用高级自定义字段添加图像。 这是我的鳕鱼 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>

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

任何帮助都将受到高度赞赏

Answer 1

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

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

2，将数据目录属性添加到图片标记，并将标题放在内部，如下所示。

<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);

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

图像弹出使用bootstrap Modal？

1 个答案: