Fatal编程技术网

Twitter bootstrap 3 Bootstrap 3模板中的Lightbox Gallery？

twitter-bootstrap-3

Twitter bootstrap 3 Bootstrap 3模板中的Lightbox Gallery？,twitter-bootstrap-3,lightbox,Twitter Bootstrap 3,Lightbox,我正在为我的一个朋友制作一个一页的网站。她是一名时装设计师，她希望有一个基于时尚组合引导模板的单页网站-> 然而，我想在下面的一节中放一个灯箱图库，其中介绍了我们的一些工作 我正在考虑购买BlueImp Lightbox gallery或Bootstrap Lightbox： 两者都符合我的要求 但是，我尝试将其插入HTML代码，但没有任何运气！ 有没有人有在引导模板中插入/添加lightbox库的经验？如果是这样，我应该如何完成这项任务？就像您问题中的注释一样，他们希望看到您的代码，以便知道在

我正在为我的一个朋友制作一个一页的网站。她是一名时装设计师，她希望有一个基于时尚组合引导模板的单页网站->

然而，我想在下面的一节中放一个灯箱图库，其中介绍了我们的一些工作

我正在考虑购买BlueImp Lightbox gallery或Bootstrap Lightbox：

两者都符合我的要求

但是，我尝试将其插入HTML代码，但没有任何运气！
有没有人有在引导模板中插入/添加lightbox库的经验？如果是这样，我应该如何完成这项任务？

就像您问题中的注释一样，他们希望看到您的代码，以便知道在哪里以及如何帮助您。它还可以让我们知道，在不给您填鸭式回答的情况下，我们需要提供多少代码，以便您既能获得答案，又能继续学习：

有了这些，我假设你是一个初学者，因此提供了你需要的大部分代码，以及我正在做的解释。我将以bootstrap lightbox为例

首先，您需要从站点下载文件。下载文件后，您将能够看到其中包含4个文件，即bootstrap-lightbox.css、bootstrap-lightbox.js及其min文件。min文件只是文件的压缩版本，以减小其大小

现在，基本上只需要将这些文件插入到项目中

假设您将文件放入项目中各自的js和css文件夹中，它们的外观如下：

<link href="css/bootstrap-lightbox.css" rel="stylesheet"> //plug this inside your <head> tags

<script src="js/bootstrap-lightbox.js"></script>
将这些代码插入文件后，只需使用在网站中找到的html代码即可：

<div id="demoLightbox" class="lightbox hide fade"  tabindex="-1" role="dialog" aria-hidden="true">
    <div class='lightbox-content'>
        <img src="image.png">
        <div class="lightbox-caption"><p>Your caption here</p></div>
    </div>
</div>
解决了。
我使用BlueImp插入了一个lightbox库：-

你下载了lightbox库吗？BlueImp库很棒。你能告诉我们你试过什么吗？谢谢大家，我真的很感谢你们的帮助！我现在正在工作，但我会在回家后尽快提供必要的信息，继续我的小项目：-谢谢大家，我真的很感谢你们的帮助！我现在正在工作，但我会在回家后尽快提供必要的信息，继续我的小项目：-