Выдвиньте описание после щелчка изображения в галерее

Question

Я пытаюсь сделать анимацию при открытии изображения вроде как здесь: http://arzbhatia.com/ в разделе портфолио.

Это то, что я уже сделал, но он не работает должным образом.

Вот jFiddle того, что я сделал: jFiddle

ДИВ не показывает в том же месте, независимо от того, какой образ я нажимаю. Если я удалю позицию: absoulte из #test_div, похоже, добавляет div после изображения, перемещая остальную часть их на дно.

Answer 1

я изменить свою скрипку, и созданные строки. Попробуйте вот так: http://fiddle.jshell.net/MYXcf/4/

Answer 2

Разница находится в одном и том же месте, потому что изображения выплывают из их родителя (LI). Это видно в Chrome Dev Tools, если вы наводите курсор на элементы списка.

Исправление состоит в том, чтобы ничего не плавать и сделать LI display:inline-block так, чтобы они занимали место в dom. Вам также необходимо добавить Javascript, чтобы увеличить высоту LI, чтобы разместить #test_div, когда он будет добавлен, потому что его позиционирование является абсолютным.

Полный код здесь: http://fiddle.jshell.net/MYXcf/3/

Обновленный код здесь: http://fiddle.jshell.net/MYXcf/5/

Answer 3

Вы должны поставить еще один DIV с именем описание в все, что вы ли. Как это:

<div id="gallery"> 
    <ul> 
     <li class="image_item"> 
      <img class="gal_images" src="http://goo.gl/rpys4M"> 
      <div class="description"></div> 
     </li> 
     <li class="image_item"> 
      <img class="gal_images" src="http://goo.gl/rpys4M"> 
      <div class="description"></div> 
     </li> 
     <li class="image_item"> 
      <img class="gal_images" src="http://goo.gl/rpys4M"> 
      <div class="description"></div> 
     </li> 
     <li class="image_item"> 
      <img class="gal_images" src="http://goo.gl/rpys4M"> 
      <div class="description"></div> 
     </li> 
    </ul> 
</div> 

И некоторые CSS, чтобы стиль это вверх:

ul { 
    list-style-type: none; 
} 
#gallery { 
    height: 500px; 
    margin: 0 auto; 
    width: 500px; 
    margin-top: 100px; 
} 
.click_images { 
    vertical-align: top; 
    display: block; 
    position: relative; 
} 
.gal_images { 
    height: 220px; 
    width: 220px; 
    float: left; 
    font-size: 40px; 
    color: #fff; 
    margin: 5px; 
} 
.image_item { 
    width: 220px; 
    float: left; 
} 
#test_div { 
    position: absolute; 
    top: auto; 
    height: 200px; 
    width:100%; 
    background: #000; 
    overflow: hidden; 
} 
.description { 
    display: none; 
} 

И JQuery, будет переключаться, если описание уже открыт или нет, если его открыли, он будет скрывать, иначе он откроется.

var opened = false; 
$('.image_item').click(function() { 
    if (!opened) { 
     opened = true; 
     $(this).find('.description').slideDown('500').append('hahaha'); 
    } else { 
     opened = false; 
     $(this).find('.description').slideUp('500'); 
    } 

}); 

Вы найдете скрипку здесь: http://jsfiddle.net/fm9L4/