燈箱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文件是否已正確加載？如果有任何錯誤，請查看控制檯。