在中实现Lightbox照片库

时间：2018-01-25 作者：Greg Schudel

我是WP模板的新手，我正在尝试从一个单页引导主题创建自己的自定义WP主题。对于我的问题是如此特殊，比如说（希望我不要因此而大喊大叫），我很难找到解决问题的方法。

我只是用公文包页面做一个简单的主题。到目前为止，我的所有文件都是本地文件。我从下载了一个引导主题here.

我遇到的问题是在我的投资组合页面上。我有一个自定义帖子类型和（我猜）一个自定义页面模板加载这个页面（不确定你是否需要知道，只是想确保你知道）。我所要做的就是单击我的一个缩略图，放大并显示在页面上，同时使背景变暗（就像原来的一样），请参见上面链接中的示例。

用于此的css/js lightbox gallery插件称为baguetteBox。js。互联网上似乎没有任何东西显示如何将这个js照片库模板正确地添加到WP上的自定义帖子中。下面是两个属性和类的示例，当有人单击任何缩略图时，这两个属性和类会动态添加到底部div。我想知道的是，如何将此功能从BS模板实现到WP模板中？

但我不确定是否有一个或多个函数可以帮助我实现这一点，所以它在WP中也能做同样的事情？实施的程序是什么？我各自的模板文件如下：

我的页面组合模板

<?php 

/*

Template Name: Portfolio layout 

*/

?>

<?php get_header(); ?>



<div class="container gallery-container">

    <h1 class="headerTitle" > <?php wp_title(); ?> </h1>

    <p class="page-description text-center"><?php bloginfo(\'description\'); ?></p>

    <div class="tz-gallery">

        <div class="row">




            <?php

            $args = array(

                    \'post_type\' => \'portfolio\'


            );

            $query = new WP_Query( $args );

            ?>



            <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>


                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <a class="lightbox" href="http://localhost:8888/wordpress_local/wp-content/uploads/2018/01/traffic.jpg">
                            <?php the_post_thumbnail( 333, 249 ); ?>
                        </a>
                        <div class="caption">
                            <h3><?php the_title(); ?></h3>
                            <p><?php the_field(\'editor\'); ?></p>
                        </div>
                    </div>
                </div>


            <?php endwhile; endif; wp_reset_postdata(); ?>


        </div>

    </div>

</div>



<?php get_footer(); ?>

我的标题。php

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title><?php wp_title(); ?></title>

    <?php wp_head(); ?>

</head>

<body <?php body_class(); ?> > 



    <!-- Conditional For Edit Menu to Adjust with Logged in Users -->
    <?php

    if ( is_admin_bar_showing() ) {     

        echo \'<style type="text/css"> .navbar.navbar-inverse.navbar-fixed-top {margin-top: 32px;} </style>\'; 

    }


    ?>

    <!-- END Conditional Edit for Logged in Users -->


    <div class="navbar navbar-inverse navbar-fixed-top"  >
      <div class="container">



        <div class="navbar-header"> <!-- contains toggle and brand -->

          <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" type="button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>


          <a href="<?php bloginfo(\'url\'); ?>" class="navbar-brand"><?php bloginfo(\'name\'); ?></a>
        </div>

        <div class="navbar-collapse collapse">



            <?php
            wp_nav_menu( array(
                \'theme_location\'    => \'primary-menu\',
                \'depth\'             => 2,
                \'container\'         => \'div\',
                \'container_class\'   => \'collapse navbar-collapse\',
                \'container_id\'      => \'bs-example-navbar-collapse-1\',
                \'menu_class\'        => \'nav navbar-nav\',
                \'fallback_cb\'       => \'WP_Bootstrap_Navwalker::fallback\',
                \'walker\'            => new WP_Bootstrap_Navwalker(),
            ) );

            ?>


        </div><!--/.nav-collapse -->
      </div>
    </div>

我的页脚。php

<?php wp_footer(); ?>

</body>

<!-- script for intiating tz-gallery -->

<script type="text/javascript"> 

baguetteBox.run(\'.tz-gallery\');

</script>

</html>

2 个回复

最合适的回答,由SO网友:Greg Schudel 整理而成

我从其他人那里得到了答案，并且成功了。总之，问题在于没有正确使用WP函数来动态调用自定义后期缩略图图像。因此才有了小盒子。当您在我新制作的自定义WP主题中单击图库中的自定义帖子缩略图时，js插件（lightbox插件）功能将正常工作。

这是我最初在自定义模板文件（page portfolio.php）中的内容

        <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>


            <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                    <a class="lightbox" href="http://localhost:8888/wordpress_local/wp-content/uploads/2018/01/traffic.jpg">
                        <?php the_post_thumbnail( 333, 249 ); ?>
                    </a>
                    <div class="caption">
                        <h3><?php the_title(); ?></h3>
                        <p><?php the_field(\'editor\'); ?></p>
                    </div>
                </div>
            </div>


        <?php endwhile; endif; wp_reset_postdata(); ?>

以下是行之有效的解决方案。我使用以下代码替换了上面的代码get_post_thumbnail_id() , wp_get_attachment_image_src($thumb_id,\'full\', true); 然后应用$thumbn_nail 属性添加到超链接。具体实施如下：

        <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>

            <?php

            $thumb_id = get_post_thumbnail_id();

            $thumb_url = wp_get_attachment_image_src($thumb_id,\'full\', true);

            ?>


            <div class="col-sm-6 col-md-4"><!-- get_post_field -->
                <div class="thumbnail">
                    <a class="lightbox" href="<?php echo $thumb_url[0]; ?>">
                        <?php the_post_thumbnail( 333, 249 ); ?>
                    </a>
                    <div class="caption">
                        <h3><?php the_title(); ?></h3>
                        <p><?php the_field(\'editor\'); ?></p>
                    </div>
                </div>
            </div>


        <?php endwhile; endif; wp_reset_postdata(); ?>

AnnnnnnndPresto！现在它工作得很好！

SO网友:D. Dan

要自行实施自定义灯箱解决方案，您需要：

缩略图用全尺寸图像包住缩略图的锚点ashref用div将整个页面变暗，用div将全尺寸图像放在css中设置div-s的样式，用JS代码将图像放在div中并将div-s放在前面，让我们从简单的事情开始，div-s：

<div class="my-black-box">
  <div class="my-light-box">
  </div>
</div>

您可以将这些放在页面公文包模板底部的某个位置，比如在容器之后，但在页脚之前。

您还需要为theese设置样式：

.my-black-box{
display: none;
}

我们现在就把它们藏起来。

对于JS，您可以使用：

$(\'.lightbox\').on(\'click\', function(e){  //when we click on the lightbox link
  e.preventDefault(); // do not open the picture
  var picUrl = $(this).attr(\'href\'); // instead we extract the picture url
  picUrl = \'<img src="\' + picUrl + \'">\'; // make an img tag from it
  $(\'.my-light-box\').html(picUrl); // put the picture in the lighbox
  $(\'.my-black-box\').addClass(\'open\');  // add a class for the css to be defined
});

对于打开灯箱时的css：

.my-black-box.open{
display: block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.6);
}

.my-black-box.open .my-light-box{
position: absolute;
max-width: 80vw;
max-height: 80vh;
width: 80vw;
height: 80vh;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.my-black-box.open .my-light-box img{
display: block;
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

这应该是一切的中心。最后，如果我们点击黑匣子，它应该会关闭：

$(\'.my-black-box\').on(\'click\', function(){
  $(this).removeClass(\'open\');
});

Edit: 当然，这只是基本的，您可以通过实现上一个按钮、关闭按钮、更多样式和动画来扩展它。但是如果你正在做一个自定义的WP主题，像这样的，从基本概念上来说，就是启动自定义灯箱的方法。

结束

小码农CODE

在中实现Lightbox照片库

相关推荐

gallery image size