带有缩略图的完整图像的弹出窗口答案

【问题标题】：Popups with full image from thumbnails带有缩略图的完整图像的弹出窗口
【发布时间】：2014-03-23 01:09:12
【问题描述】：

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

我有一个图片库（我使用这个图片库开始使用：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>

【问题讨论】：

标签： image css popup twitter-bootstrap-3

【解决方案1】：

使用此 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】：

您可以为此使用 LightBox。它不包含在引导框架中，但我确信有针对它的扩展。

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

【讨论】：

非常感谢！！你为我节省了很多时间：D