堆棧內存溢出
  簡體   English   中英

如何使用jQuery將查看更多按鈕添加到引導圖像庫

[英]how to add view more button to bootstrap image gallery using jquery

 原文  2015-11-20 10:17:33  8   1    javascript/ jquery/ html/ twitter-bootstrap

問題描述

我有一個使用bootstrap html構建的圖像庫。 但是我想在圖庫中的2-3張圖像后更多地查看一個按鈕以查看圖庫中的全部或全部圖像。 單擊按鈕后，將圖像彈出為自舉燈箱圖庫

我試過下面的代碼。 

 <!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>

請幫我解決這個問題。

1 個解決方案

解決方案1
 1  2015-11-20 10:44:23

請參考此代碼，您可以使用此代碼應用所需的內容 

    <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>

希望對您有幫助

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使用JQuery創建“下一步”和“預覽”按鈕？ （圖片庫） 如何僅在移動設備上添加新按鈕導航欄視圖（使用引導程序） jQuery圖像更改-圖庫視圖 如何在不使用 jquery 的情況下動態地將禁用屬性添加到引導按鈕 添加查看更多按鈕 多級使用jQuery添加更多按鈕 如何從JQuery中的Gallery View中選擇動態圖像 Reactjs：如何使用旋轉圖片庫添加下一個/上一個按鈕 Angular：如何使用bootstrap和ng-repeater生成圖片庫 如何在此現有Jquery圖像庫中的圖像上添加標題？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM