Question

我对编码很新，我有一个问题。我已经检查了几个论坛，但没有一个帮助我。

我有一个图片库（我用这个图片来开始：http://startbootstrap.com/thumbnail-gallery）我想在观看者点击其中一个缩略图时获得一个全尺寸图像的弹出窗口。有谁知道我怎么能实现这个功能？

我的HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="">
    <meta name="description" content="">
    <title></title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/styles.css" rel="stylesheet">

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,300' rel='stylesheet'>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <!-- HEADER -->
    <div class="top-header section-content align-center">
      <header>
        <img class="logo" src="images/logo.png">

        <ul class="inline">
          <li><a href="index.html" class="btn active btn-primary">Home</a></li>
          <li><a href="about.html" class="btn btn-primary">About</a></li>
          <li><a href="contact.html" class="btn btn-primary">Contact</a></li>
        </ul>
      </header>
    </div>


    <!-- CONTENT -->
    <section>
      <div class="container">
        <div class="row">
          <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
              <img src="images/portfolio-items/2.png" class="grayscale" alt="Portfolio Item 1">
            </a>
          </div>
          <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
              <img src="images/portfolio-items/1.png" class="grayscale" alt="Portfolio Item 2">
            </a>
          </div>
          <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
              <img src="images/portfolio-items/3.png" class="grayscale" alt="Portfolio Item 3">
            </a>
          </div>
          <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
              <img src="images/portfolio-items/5.png" class="grayscale" alt="Portfolio Item 3">
            </a>
          </div>

        </div>

        <div class="row">
          <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
              <img src="images/portfolio-items/4.png" class="grayscale" alt="Portfolio Item 1">
            </a>
          </div>
          <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
              <img src="images/portfolio-items/6.png" class="grayscale" alt="Portfolio Item 2">
            </a>
          </div>
          <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
              <img src="images/portfolio-items/8.png" class="grayscale" alt="Portfolio Item 3">
            </a>
          </div>
          <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
              <img src="images/portfolio-items/7.png" class="grayscale" alt="Portfolio Item 3">
            </a>
          </div>
        </div>

        <div class="row">
          <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
              <img src="images/portfolio-items/1.png" class="grayscale" alt="Portfolio Item 1">
            </a>
          </div>
          <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
              <img src="images/portfolio-items/4.png" class="grayscale" alt="Portfolio Item 2">
            </a>
          </div>
          <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
              <img src="images/portfolio-items/3.png" class="grayscale" alt="Portfolio Item 3">
            </a>
          </div>
          <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
              <img src="images/portfolio-items/6.png" class="grayscale" alt="Portfolio Item 3">
            </a>
          </div>
        </div>
      </div>
    </section>

    <hr />

    <!-- QUOTE AREA -->
    <section>
      <div class="quote-container section-content align-center">
        <h2 class="interested">Interested?</h2>
        <p>Do you like my work? Do you want more information about me and the services I provide? Feel free to shoot me a message!</p>
        <a href="contact.html" class="btn btn-primary">Contact</a>
      </div>
    </section>

    <!-- FOOTER -->
    <div id="footer">
      <div class="copyright">
        &copy; Copyright 2014 Distinction Portfolio Theme.
      </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Answer 1

您可以使用LightBox。它不包含在bootstrap框架中，但我确信它已经为它做了扩展。

例如，您可以尝试使用Bootstrap 3灯箱：http://ashleydw.github.io/lightbox/

Answer 2

使用此HTML代码实现点击缩略图时弹出的简单图像，并有一个图像关闭选项：

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
  <a class="thumbnail" href="#" data-toggle="modal" data-target=".bs-example1-modal-lg">
    <img class="img-responsive" src="img/clinic1.jpg" alt="">
  </a>

  <div class="modal fade bs-example1-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <!-- /.modal-dialog -->
      <div class="modal-content">
        <!-- /.modal-content -->

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title" id="myLargeModalLabel">Image-1</h4>
        </div>

        <div class="modal-body">
          <img src="img/clinic1.jpg" class="img-responsive img-rounded center-block" alt="">
        </div>

      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
</div>

弹出窗口与缩略图的完整图像

2 个答案: