CSS3 + JQuery - SlideDown Галерея

Question

я в настоящее время developping веб-сайт моей компании и в разделе галерея, менеджеры хочет дизайн, как это:

К сожалению, я не знаю, как я могу сделайте это ... Я пробовал искать Google, но ничего не нашел.

Это было бы что-то вроде этого, и когда вы нажмете на другой .item, он закроет текущий открытый предмет и откроет новый ... стрелка должна быть ниже элемента, с центром в нем. Кроме того, когда вы нажимаете на ссылку .item.open<a>, она закрывает «pop-below» (похож на popover, но ниже, а не поверх ...), если он открыт.

Я знаю, что мой JQuery код будет что-то вроде:

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

Вот Exemple HTML я буду использовать:

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

Если кто-то имеет представление о том, как я могу это сделать , Буду премного благодарен!

Answer 1

После двух часов поиска огромной базы данных Google я наконец нашел решение!

Вот ссылка: http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/

Это именно то, что я хотел! Спасибо за все советы @ Натан Ли!

Answer 2

я бросил что-то вместе на jsFiddle: http://jsfiddle.net/8TfCZ/4/

Это не так хорошо, как то, что demo'd в ссылке статьи с ответа 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; 
}