可擴展縮略圖網格Twitter Bootstrap

Question

好的，所以我在這里使用了各種各樣的插件來實現這一目標。 我已經與客戶核對了此頁面幾個小時。 他說他不希望我使用插件。 他引用了jQuery Animate，但是我對編寫自己的代碼真是個菜鳥，我不確定從哪里開始。 我提供了我需要執行的操作的圖像，但看起來很不錯，但是我需要一些幫助來找到解決方案。 感謝您的所有幫助和時間！）

我需要補充說明的是，該描述將始終在領導者縮略圖下方直接展開。 我也希望它對移動用戶也毫無影響。 如果可能的話？

在此處輸入圖片說明

<div class="container leaderShipwrapper gallery-items">
    <ul id="items" class="row list-unstyled">
        <div class="col-sm-12 col-sm-offset-1 leaderShipgrid">
            <li class="col-sm-2 col-xs-4 leader" data-name="joe" data-title="developer" data-profile="profile"><a href="#"><img class="image-responsive" src="images/leader.jpg" alt="" /></a></li>
            <li class="col-sm-2 col-xs-4 leader" data-name="ray" data-title="dunce" data-profile="dunce profile"><a href="#"><img class="image-responsive" src="images/leader.jpg" alt="" /></a></li>
            <li class="col-sm-2 col-xs-4 leader" data-name="joe" data-title="developer" data-profile="profile"><a href="#"><img class="image-responsive" src="images/leader.jpg" alt="" /></a></li>
            <li class="col-sm-2 col-xs-4 leader" data-name="joe" data-title="developer" data-profile="profile"><a href="#"><img class="image-responsive" src="images/leader.jpg" alt="" /></a></li>
            <li class="col-sm-2 col-xs-4 leader" data-name="joe" data-title="developer" data-profile="profile"><a href="#"><img class="image-responsive" src="images/leader.jpg" alt="" /></a></li>
        </div>
        <div class="col-sm-10 col-sm-offset-1">
            <li id="1" class="leaderDescription"><div class="leaderName">NAME</div><div class="leaderTitle">TITLE</div><div class="leaderProfile">Description for row 1 cell 1</div></li>
        </div>
    </ul>
</div>

$(document).ready(function() {
            $('.navbar .dropdown').hover(function() {
          $(this).find('.hover-dropdown').first().stop(true, true).slideDown(150);
        }, function() {
          $(this).find('.hover-dropdown').first().stop(true, true).slideUp(105)
        });

        $('.leader').click(function(){
    $(this).parent().siblings().find('.leaderDescription').find('.leaderName').text($(this).attr('data-name'));
    $(this).parent().siblings().find('.leaderDescription').find('.leaderTitle').text($(this).attr('data-title'));
    $(this).parent().siblings().find('.leaderDescription').find('.leaderProfile').text($(this).attr('data-profile'));
    $(this).parent().siblings().find('.leaderDescription').slideDown();
    });

    });

好的，所以我現在很想問這個問題。 我需要知道我該怎么做才能使它更接近上面的圖像。 我有第一行，並且要正確加載數據，如果已經打開了幻燈片，則無法將幻燈片向上滑動，然后向下滑動單擊的新幻燈片。 我還需要它來打開領導者照片下面的信息，就像我添加的照片一樣。 請讓我知道我離這有多遠？

Answer 1

基本上，您想要的是一個帶有id標簽的div，它可以在某種事件上使用jquery進行切換，也許是當有人單擊其中一個圖像時。 對於第一部分，您需要類似以下代碼的內容：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slideToggle demo</title>
  <style>
  p {
    width: 400px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<button>Toggle</button>
<p>
  This is the paragraph to end all paragraphs.  You
  should feel <em>lucky</em> to have seen such a paragraph in
  your life.  Congratulations!
</p>

<script>
$( "button" ).click(function() {
  $( "p" ).slideToggle( "slow" );
});
</script>

</body>
</html>

這是來自http://api.jquery.com/slidetoggle/ ，

您可能還希望從服務器動態加載信息。 您可以為此功能使用jQuery： http : //api.jquery.com/load/頁面中的示例：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>load demo</title>
  <style>
  body {
    font-size: 12px;
    font-family: Arial;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<b>Projects:</b>
<ol id="new-projects"></ol>

<script>
$( "#new-projects" ).load( "/resources/load.html #projects li" );
</script>

</body>
</html>

但是有關用戶的信息存儲在哪里？ 您應該寫一些服務器嗎？ 代碼的AJAX部分將允許您單擊其中一個用戶，然后為他們動態加載代碼。

您將需要告訴每張圖片點擊后做出反應。 這可以通過jQuery的.each（）函數來完成，您可以在其中迭代每個li元素（圖片）。

可擴展縮略圖網格Twitter Bootstrap

問題描述

1 個解決方案

解決方案1
0 2015-05-14 18:56:28

可擴展縮略圖網格Twitter Bootstrap

問題描述

1 個解決方案

解決方案1 0 2015-05-14 18:56:28

解決方案1
0 2015-05-14 18:56:28