Javascript 可扩展缩略图网格推特引导_Javascript_Jquery_Html_Css_Twitter Bootstrap

Javascript 可扩展缩略图网格推特引导

javascript jquery html css twitter-bootstrap

Javascript 可扩展缩略图网格推特引导,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,好的，我用了一个插件来实现这个。我已经在这个页面上工作了几个小时，我和我的客户核对过了。他说他不想让我使用插件。他引用了jQuery动画，但我对编写自己的代码一无所知，我不知道从哪里开始。我包括了一个我需要它做什么的图像，看起来像，但我需要一些帮助找到解决方案。谢谢你的帮助和时间我需要补充的是，描述将始终直接展开在引线缩略图下。我希望它对移动用户来说也是看不见的。如果可能的话 <div class="container leaderShipwrapper gallery-items"&g

好的，我用了一个插件来实现这个。我已经在这个页面上工作了几个小时，我和我的客户核对过了。他说他不想让我使用插件。他引用了jQuery动画，但我对编写自己的代码一无所知，我不知道从哪里开始。我包括了一个我需要它做什么的图像，看起来像，但我需要一些帮助找到解决方案。谢谢你的帮助和时间

我需要补充的是，描述将始终直接展开在引线缩略图下。我希望它对移动用户来说也是看不见的。如果可能的话

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

    });

好的，我现在有一个好问题要问。我需要知道我需要做些什么才能让它更接近上面的图片。我有第一行，并且我正在正确加载数据。如果一个幻灯片已经打开，我就无法向上滑动，然后向下滑动单击的新幻灯片。我还需要它来打开下面的领导人照片的信息，就像在我添加的照片。请让我知道我离这有多远？

基本上，您想要的是一个带有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>

这是从

您可能还需要从服务器动态加载信息。您可以使用jQuery将其与此函数结合使用：页面中的示例：

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

因此，我的所有代码都将添加到我们的sitecore安装中。我希望得到一个简单的div作为切换，我猜它将位于每行项目的主包装内。这似乎正是我想要的，但我需要做它没有插件。我还需要确保当一个打开，另一个被点击时，打开的一个需要关闭。54N1-这种方法最好吗？有人能告诉我这个模块的正确方向吗？