Question

我有一个使用bootstrap html构建的图库。但是我希望在图库中的2-3个图像之后有一个按钮查看更多查看图库中的完整或所有图像。单击按钮后，将图像弹出为引导灯箱库

我尝试过以下代码。

＆＃13;

<!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.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>aaa</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
	<script src="js/jquery-2.1.1.js"></script>
	<script src="js/bootstrap.js"></script>
    <script src="photo-gallery.js"></script>
  </head>
  <style>
      ul {         
          padding:0 0 0 0;
          margin:0 0 0 0;
      }
      ul li {     
          list-style:none;
          margin-bottom:25px;           
      }
      ul li img {
          cursor: pointer;
      }
      .modal-body {
          padding:5px !important;
      }
      .modal-content {
          border-radius:0;
      }
      .modal-dialog img {
          text-align:center;
          margin:0 auto;
      }
    .controls{          
        width:50px;
        display:block;
        font-size:11px;
        padding-top:8px;
        font-weight:bold;          
    }
    .next {
        float:right;
        text-align:right;
    }
      /*override modal for demo only*/
      .modal-dialog {
          max-width:500px;
          padding-top: 90px;
      }
      @media screen and (min-width: 768px){
          .modal-dialog {
              width:500px;
              padding-top: 90px;
          }          
      }
      @media screen and (max-width:1500px){
          #ads {
              display:none;
          }
      }
  </style>
  <body>    
    <div class="container">    
        <div class="row">
			<div class="col-sm-3">
				
			</div>
			<div class="col-sm-9">
				<ul class="row">
					<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
						<img class="img-responsive" src="images/photodune-174908-rocking-the-night-away-xs.jpg">
					</li>
					<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
						<img class="img-responsive" src="images/photodune-287182-blah-blah-blah-yellow-road-sign-xs.jpg">
					</li>
					<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
						<img class="img-responsive" src="images/photodune-460760-colors-xs.jpg">
					</li>
					<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
						<img class="img-responsive" src="images/photodune-461673-retro-party-xs.jpg">
					</li>
					<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
						<img class="img-responsive" src="images/photodune-514834-touchscreen-technology-xs.jpg">
					</li>
					<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
						<img class="img-responsive" src="images/photodune-916206-legal-xs.jpg">
					</li>
					<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
						<img class="img-responsive" src="images/photodune-1062948-nature-xs.jpg">
					</li>
					<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
						<img class="img-responsive" src="images/photodune-1471528-insant-camera-kid-xs.jpg">
					</li>
					<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
						<img class="img-responsive" src="images/photodune-2255072-relaxed-man-xs.jpg">
					</li>
					<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
						<img class="img-responsive" src="images/photodune-2360379-colors-xs.jpg">
					</li>
					<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
						<img class="img-responsive" src="images/photodune-2360571-jump-xs.jpg">
					</li>
					<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
						<img class="img-responsive" src="images/photodune-2361384-culture-for-business-xs.jpg">
					</li>
					<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
						<img class="img-responsive" src="images/photodune-2441670-spaghetti-with-tuna-fish-and-parsley-s.jpg">
					</li>
					<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
						<img class="img-responsive" src="images/photodune-2943363-budget-xs.jpg">
					</li>
					<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
						<img class="img-responsive" src="images/photodune-3444921-street-art-xs.jpg">
					</li>
					<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
						<img class="img-responsive" src="images/photodune-3552322-insurance-xs.jpg">
					</li>
					<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
						<img class="img-responsive" src="images/photodune-3807845-food-s.jpg">
					</li>
					<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
						<img class="img-responsive" src="images/photodune-3835655-down-office-worker-xs.jpg">
					</li>
					<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
						<img class="img-responsive" src="images/photodune-4619216-ui-control-knob-regulators-xs.jpg">
					</li>
					<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
						<img class="img-responsive" src="images/photodune-5771958-health-xs.jpg">
					</li>
					<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
						<img class="img-responsive" src="images/photodune-268693-businesswoman-using-laptop-outdoors-xs.jpg">
					</li>
					<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
						<img class="img-responsive" src="images/photodune-352207-search-of-code-s.jpg">
					</li>
					<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
						<img class="img-responsive" src="images/photodune-247190-secret-email-xs.jpg">
					</li>
					<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
						<img class="img-responsive" src="images/photodune-682990-online-search-xs.jpg">
					</li>
				</ul>
			</div>
		</div>
    </div> <!-- /container -->
    
     
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">         
          <div class="modal-body">                
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    
  </body>
 

  
</html>

＆＃13;

请帮我解决这个问题。

Answer 1

请参阅此代码，您可以使用此代码应用您想要的内容

    <html>
    <head>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" rel="stylesheet" />

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    </head>
    <body>
        <div class="col-sm-9">
                <ul class="row">
                    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                        <img class="img-responsive" src="images/photodune-174908-rocking-the-night-away-xs.jpg">
                    </li>
                    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                        <img class="img-responsive" src="images/photodune-287182-blah-blah-blah-yellow-road-sign-xs.jpg">
                    </li>
                    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                        <img class="img-responsive" src="images/photodune-460760-colors-xs.jpg">
                    </li>
                    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                        <img class="img-responsive" src="images/photodune-461673-retro-party-xs.jpg">
                    </li>
                    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                        <img class="img-responsive" src="images/photodune-514834-touchscreen-technology-xs.jpg">
                    </li>
                    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                        <img class="img-responsive" src="images/photodune-916206-legal-xs.jpg">
                    </li>
                    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                        <img class="img-responsive" src="images/photodune-1062948-nature-xs.jpg">
                    </li>
                    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                        <img class="img-responsive" src="images/photodune-1471528-insant-camera-kid-xs.jpg">
                    </li>
                    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                        <img class="img-responsive" src="images/photodune-2255072-relaxed-man-xs.jpg">
                    </li>
                    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                        <img class="img-responsive" src="images/photodune-2360379-colors-xs.jpg">
                    </li>
                    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                        <img class="img-responsive" src="images/photodune-2360571-jump-xs.jpg">
                    </li>
                    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                        <img class="img-responsive" src="images/photodune-2361384-culture-for-business-xs.jpg">
                    </li>
                    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                        <img class="img-responsive" src="images/photodune-2441670-spaghetti-with-tuna-fish-and-parsley-s.jpg">
                    </li>
                    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                        <img class="img-responsive" src="images/photodune-2943363-budget-xs.jpg">
                    </li>
                    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                        <img class="img-responsive" src="images/photodune-3444921-street-art-xs.jpg">
                    </li>
                    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                        <img class="img-responsive" src="images/photodune-3552322-insurance-xs.jpg">
                    </li>
                    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                        <img class="img-responsive" src="images/photodune-3807845-food-s.jpg">
                    </li>
                    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                        <img class="img-responsive" src="images/photodune-3835655-down-office-worker-xs.jpg">
                    </li>
                    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                        <img class="img-responsive" src="images/photodune-4619216-ui-control-knob-regulators-xs.jpg">
                    </li>
                    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                        <img class="img-responsive" src="images/photodune-5771958-health-xs.jpg">
                    </li>
                    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                        <img class="img-responsive" src="images/photodune-268693-businesswoman-using-laptop-outdoors-xs.jpg">
                    </li>
                    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                        <img class="img-responsive" src="images/photodune-352207-search-of-code-s.jpg">
                    </li>
                    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                        <img class="img-responsive" src="images/photodune-247190-secret-email-xs.jpg">
                    </li>
                    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                        <img class="img-responsive" src="images/photodune-682990-online-search-xs.jpg">
                    </li>
                </ul>
            </div>
            <input type="button" onclick="showModalBox()" value="View More" />

            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">         
                  <div class="modal-body"> 
                        <ul id="data">
                        </ul>
                  </div>
                </div><!-- /.modal-content -->
              </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->
    </body>
    <script>
        count=0;
        lengthLi=0;
        function getMore()
        {
            c=count+2;
            for(i=count;i<=c;i++)
            {
                if(count<lengthLi)
                {
                    $('ul li:eq('+i+')').show();
                    count++;
                }
                else
                {
                    break;
                }
            }
        }
        function showModalBox()
        {
            for(i=0;i<lengthLi;i++)
            {
                if(count<lengthLi)
                {
                    $('#data').append("<li>"+$('ul li:eq('+i+')').html()+"</li>");
                    count++;
                }
                else
                {
                    break;
                }
            }
            $('#myModal').modal('show');
        }
        $(document).ready(function(){
            $('ul li').hide();
            lengthLi=$('ul li').length;
            getMore();
        });

    </script>

</html>

我希望这会对你有所帮助

如何使用jquery添加视图更多按钮来引导图像库

1 个答案: