javascript - CSS3+JQuery - スライドダウン ギャラリー

Question

私は現在、会社のウェブサイトを開発しています。ギャラリー セクションでは、管理者は次のようなデザインを望んでいます。

Unfortunately, I don't know how I can do that... I tried searching Google but I didn't found anything.

It would be something like this and when you click on another .item, it close the current opened item and open the new one... the arrow should be below the item, centered with it. Also, when you click on the .item.open <a> link, it close the "pop-below" (similar to a popover but below instead of over...) if it is opened.

I know that my JQuery code will be something like:

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

Here's a exemple HTML I'll be using:

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

If someone has an idea on how I could do that, I would appreciate it!

Answer 1

jsFiddle で何かをまとめました: http://jsfiddle.net/8TfCZ/4/

OPの回答の記事リンクでデモされているものほどきれいではありませんが、誰かが自分でハックすることを決定した場合、別の方法の出発点として役立つ可能性があります.

JS:

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

HTML:

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

CSS:

.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;
}

Answer 2

巨大な Google データベースを 2 時間検索した後、ついに解決策を見つけました。

リンクはこちら: http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/

それはまさに私が欲しかったものです！@Nathan Leeのすべてのヒントをありがとう！