可扩展缩略图网格Twitter Bootstrap

Question

Ok so I was using a plugin of sorts located here to pull this off. 好的，所以我在这里使用了各种各样的插件来实现这一目标。 I have been working on this page for a few hours wen I checked with my client. 我已经与客户核对了此页面几个小时。 He stated that he does not want me to use a plugin. 他说他不希望我使用插件。 He referenced the jQuery Animate but I am such a noob to writing my own code I am not sure where to start with all that. 他引用了jQuery Animate，但是我对编写自己的代码真是个菜鸟，我不确定从哪里开始。 I included an image of what I need it to do and look like but I need some help finding a solution. 我提供了我需要执行的操作的图像，但看起来很不错，但是我需要一些帮助来找到解决方案。 Thank you for all your help and time!) 感谢您的所有帮助和时间！）

I need to add that the description will always expand directly under the leaders thumbnail. 我需要补充说明的是，该描述将始终在领导者缩略图下方直接展开。 I would like it to be seemless for mobile users as well. 我也希望它对移动用户也毫无影响。 If possible? 如果可能的话？

在此处输入图片说明

<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();
    });

    });

Ok, so I have at a good point to ask this question now. 好的，所以我现在很想问这个问题。 I need to know what I need to do to get this closer to the image above. 我需要知道我该怎么做才能使它更接近上面的图像。 I have the first row and I am getting the data to load correctly I just cant get the slide up if one is already open then slide down the new one that was clicked. 我有第一行，并且要正确加载数据，如果已经打开了幻灯片，则无法将幻灯片向上滑动，然后向下滑动单击的新幻灯片。 I also need it to open the info below the leaders photo like the in the photo I added. 我还需要它来打开领导者照片下面的信息，就像我添加的照片一样。 Please let me know how far I am from this? 请让我知道我离这有多远？

Answer 1

Basicly what you want is a div with an id tag which is toggled using jquery on some sort of event, maybe when someone clicks one of the images. 基本上，您想要的是一个带有id标签的div，它可以在某种事件上使用jquery进行切换，也许是当有人单击其中一个图像时。 For the first part you need something like this code: 对于第一部分，您需要类似以下代码的内容：

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

This is from http://api.jquery.com/slidetoggle/ , 这是来自http://api.jquery.com/slidetoggle/ ，

You will also want to load dynamically information from a server perhaps. 您可能还希望从服务器动态加载信息。 You can use jQuery for this to with this function: http://api.jquery.com/load/ Example from the page: 您可以为此功能使用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>

But where is the information about the users stored? 但是有关用户的信息存储在哪里？ Some server you are suppose to write? 您应该写一些服务器吗？ The AJAX part of the code will allow you to click one of the users and then load the code dynamically for them. 代码的AJAX部分将允许您单击其中一个用户，然后为他们动态加载代码。

You will need to tell each picture to react on click. 您将需要告诉每张图片点击后做出反应。 This can be done with the .each() function of jQuery, where you iterate each li element (the pictures). 这可以通过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