Lightbox CSS / JS庫集成到WordPress圖像上傳

Question

我是WordPress的初學者。 我有一個HTML / BOOTSTARP“單頁”模板，其中有一個使用Lightbox CSS / JS構建的庫。

請參閱此處的模板鏈接。

我已將此主題集成到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文件是否正確加載？ 如果有任何錯誤，請參閱控制台。