[英]Expandable Thumbnail grid Twitter Bootstrap
好的,所以我在这里使用了各种各样的插件来实现这一目标。 我已经与客户核对了此页面几个小时。 他说他不希望我使用插件。 他引用了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();
});
});
好的,所以我现在很想问这个问题。 我需要知道我该怎么做才能使它更接近上面的图像。 我有第一行,并且要正确加载数据,如果已经打开了幻灯片,则无法将幻灯片向上滑动,然后向下滑动单击的新幻灯片。 我还需要它来打开领导者照片下面的信息,就像我添加的照片一样。 请让我知道我离这有多远?
基本上,您想要的是一个带有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元素(图片)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.