灯箱CSS/JS图库整合到WordPress图片上传

Question

我是一个初学WordPress的人。 我有一个HTML/BOOTSTARP“单页”模板，其中有一个使用Lightbox CSS/JS构建的画廊。

请参阅模板链接here。

我已经将这个主题集成到WordPress，并且一切正常。

现在，我想使用WordPress将图片上传到这个已有的图库。 创建信息后，我可以选择将其作为新信息上传。

我有8个投资组合，并希望添加几个图片到WordPress的特定投资组合，以便它可以自动上传。

请注意，这是一个单页网站。

<section id="portfolio"> 
 
    <link href="css/lightbox.css" rel="stylesheet"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="heading text-center col-sm-8 col-sm-offset-2 wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="300ms"> 
 
      <h2>Our Gallery</h2> 
 
      
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="container-fluid"> 
 
     <div class="row"> 
 
     <div class="col-sm-3"> 
 
      <div class="folio-item wow fadeInRightBig" data-wow-duration="1000ms" data-wow-delay="300ms"> 
 
      <div class="folio-image"> 
 
       <img class="img-responsive" src="<?php bloginfo('template_directory') ?>/img//portfolio/1.jpg" alt=""> 
 
      </div> 
 
      <div class="overlay"> 
 
       <div class="overlay-content"> 
 
       <div class="overlay-text"> 
 
        <div class="folio-info"> 
 
        <h3>gallery</h3> 
 
        <p></p> 
 
        </div> 
 
        <div class="folio-overview"> 
 
        <span class="folio-link"><a class="folio-read-more" href="#" data-single_url="portfolio-single.php" ><i class="fa fa-link"></i></a></span> 
 
        <span class="folio-expand"><a href="<?php bloginfo('template_directory') ?>/img//portfolio/portfolio-details.jpg" data-lightbox="portfolio"><i class="fa fa-search-plus"></i></a></span> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
      <div class="folio-item wow fadeInLeftBig" data-wow-duration="1000ms" data-wow-delay="400ms"> 
 
      <div class="folio-image"> 
 
       <img class="img-responsive" src="<?php bloginfo('template_directory') ?>/img//portfolio/2.jpg" alt=""> 
 
      </div> 
 
      <div class="overlay"> 
 
       <div class="overlay-content"> 
 
       <div class="overlay-text"> 
 
        <div class="folio-info"> 
 
        <!-- <h3>Time Hours</h3> 
 
        <p>Design, Photography</p>--> 
 
        </div> 
 
        <div class="folio-overview"> 
 
        <span class="folio-link"><a class="folio-read-more" href="#" data-single_url="portfolio-single.php" ><i class="fa fa-link"></i></a></span> 
 
        <span class="folio-expand"><a href="<?php bloginfo('template_directory') ?>/img//portfolio/portfolio-details.jpg" data-lightbox="portfolio"><i class="fa fa-search-plus"></i></a></span> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
      <div class="folio-item wow fadeInRightBig" data-wow-duration="1000ms" data-wow-delay="500ms"> 
 
      <div class="folio-image"> 
 
       <img class="img-responsive" src="<?php bloginfo('template_directory') ?>/img//portfolio/3.jpg" alt=""> 
 
      </div> 
 
      <div class="overlay"> 
 
       <div class="overlay-content"> 
 
       <div class="overlay-text"> 
 
        <div class="folio-info"> 
 
        <!--<h3>Time Hours</h3>

代码组合

请帮助我如何做到这一点你的建议。

Answer 1

首先

<img class="img-responsive" src="<?php bloginfo('template_directory') ?>/img//portfolio/2.jpg" alt=""> 

<a href="<?php bloginfo('template_directory') ?>/img//portfolio/portfolio-details.jpg" data-lightbox="portfolio"><i class="fa fa-search-plus"></i></a> 

有导致没有找到实际的文件双斜线 “//”。

除此之外，您是否检查过Lightbox CSS和JavaScript文件是否已正确加载？如果有任何错误，请查看控制台。