Javascript CSS3和x2B；JQuery-幻灯片库

我目前正在开发我公司的网站，在画廊部分，经理们想要这样的设计：

不幸的是，我不知道该怎么做。。。我试着在谷歌上搜索，但什么也没找到

当你点击另一个

.item

时，它会关闭当前打开的项目并打开新的项目。。。箭头应位于项目下方，以项目为中心。另外，当您单击

项时。打开


如果有人对我如何做到这一点有想法，我将不胜感激
 在搜索庞大的谷歌数据库两个小时后，我终于找到了解决方案

链接如下：

这正是我想要的！谢谢所有的提示@Nathan Lee
 我在jsFiddle上拼凑了一些东西：

它不像OP的答案中的文章链接中演示的那样漂亮，但如果有人决定破解他们自己的，它可能会成为另一种方式的起点

JS:

你有什么HTML要显示吗？嗯，现在没有，因为单击项目时，细节窗格（蓝色部分）将由AJAX请求创建，然后存储在LocalStorage中（如果LS不可用，则存储在Cookie中）。因此，我只能显示图库HTML…转到谷歌图像，搜索任何图像，当你得到它们的缩略图时，单击其中任何一个，它就会以你在屏幕截图中提到的方式打开，我希望这能满足你的需要。-@FrederickMarcoux@NathanLee我已经试着从谷歌那里获取代码，但是那里的源代码不是很可读，我不希望完全是这样。。。但是是的，这是个好主意！伙计，你救了我的命！你的解决方案简单多了！非常感谢。太棒了，很高兴我能帮忙。
$('.item a').click(function(e) {
    if ($(this).parent().hasClass('open')) {
         $(this).parent().removeClass('open'); // which would slide the details up
    } else {
         var $id = $(this).data('item-id');
         getItemDetail($id);
    }
    e.preventDefault();
});

<div class="container">
    <div class="projects">
        <div class="item">
            <a href="#item" data-item-id="exempleid" class="item-link">
                <img src="" alt="item">
            </a>
            <!-- HERE GOES THE DETAIL-PANE -->
        </div>
    </div>
</div>

(function($) {

    // Display a 'popover' below a element
    var displayMenu = function(el) {

        // Display location = (el's position + its height + 1px border)
        var bottomOfEl = $(el).offset().top + $(el).height() + 1 + 'px';

        // Add bottom margin to parent <ul> equivalent to popover height
        $(el).parent().addClass('active');

        // Display popover
        $('#popover')
            .hide()
            .css({
                'height': '0',
                'top': bottomOfEl
            })
            .show()
            .animate({'height': '80px'}, 'fast');
    };


    $(document.body).on('click', '.item', function(e) {
        // Close all others .item elements
        $('.item').not(this).removeClass('open');

        // Remove bottom margin from all other .item-lists
        $('.item-list').not( $(this).parent() ).removeClass('active');        

        // Open this
        $(this).addClass('open');

        // Display popover relative to this element
        displayMenu(this);
    });
})(jQuery);

<div id="popover" class="popover"></div>

<ul class="item-list">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>

<ul class="item-list">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>

.popover {
    display: none;
    position: absolute;
    width: 100%;
    height: 80px;
    background: blue;

}

.item-list {
    padding: 0;
    width: 100%;
}

.item-list.active {
    margin-bottom: 80px;
}

.item {
    position: relative;
    list-style-type: none;
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 1px solid #000;
    text-align: center;
    padding-right: 5px;
    cursor: pointer;    
}

.item:before {
    content: '.item';    
}

.item.open:before {
    content: '.open';    
}

.item.open:after {
    content: '';
    position: absolute; 
    width: 0; 
    height: 0;
    bottom: 0px;
    left: 50%;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid blue;
    margin-left: -10px;
}