Блог

Я хочу создать галерею в HTML / CSS / jQuery. У меня есть куча эскизов, которые представляют разные изображения разного размера и ориентации. При нажатии на миниатюру я хочу, чтобы изображение скользило вниз от верхней части экрана. Изображение должно быть как можно большего размера, но все же вписываться в окно, принимая во внимание поля и тому подобное.

В прошлом я заставлял все это работать должным образом. Однако теперь я хочу добавить заголовок под изображением.

Мое решение было таким. У меня есть контейнер div, который является фиксированным и расположен с верхним: -96% и нижним: 100% При щелчке на миниатюре jQuery перемещает его на верхнее: 2% и нижнее: 2%

Раньше у меня была граница, которая окружала изображение. Теперь я хочу сделать эту границу фактически частью div, чтобы граница могла огибать заголовок, который должен быть ниже изображения и по центру, и указанное изображение.

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

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

РЕДАКТИРОВАТЬ: добавлен код

HTML:

 <div id=imgHoverCont>
    <div id=imgBg>
        <img id=imgHover src="" alt="">
        <div id=commentHover></div>
    </div>
</div>
  

CSS:

 #imgHoverCont{
    text-align:center;
    position:fixed;
    left:2%;
    right:2%;
    top:-96%;
    bottom:100%;
}

#imgHover{
    display:block;
    height:100%;
    width:auto;
}

#imgBg{
    position: relative;
    display: inline-block;
    max-width:100%;
    max-height:100%;
}

#commentHover{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    color:black;
    background-color:white;
}
  

JS: эскизы хранятся в массиве объектов с их идентификатором и их источником.

 for(let i in thumbnails){
       $(thumbnails[i].id).on("click",function(livingHell){
           return function(){
               $("#imgHover").attr("src",thumbnails[livingHell].src)
               $("#imgHoverCont").css("display","block");
               $("#commentHover").html(thumbnails[livingHell].comment);
               $("#imgHoverCont").animate({bottom:"2%",top:"2%"},1000);
           }
       }(i));
   };
  

Я внес некоторые изменения в ваш CSS, если я понял ваш вопрос, он работает так, как ожидалось, посмотрите здесь: https://jsfiddle.net/cratgjks /

 #imgHoverCont{
    text-align:center;
    position:fixed;
    left:2%;
    right:2%;
    top:-96%;
    bottom:100%;
    width:100%; /*new rule*/
}

#imgHover{
    display:block;
    height:100%;
    width:100%;/*changed rule*/
}

#imgBg{
    position: relative;
    display: inline-block;
    max-width:100%;/*changed rule*/
    max-height:100%;
    width:1500px
}

#commentHover{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    color:black;
    background-color:white;
}