Отзывчивая картинная галерея

Я работаю над отзывчивой картинной галереей, и я ищу, чтобы изменить код, который я нашел. Я сделал jsFiddle, чтобы показать вам, с чем я работаю.Отзывчивая картинная галерея

jsFiddle

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

.box { 
    float: left; 
    position: relative; 
    width: 14.28%; 
    padding-bottom: 14.28%; 
    margin-bottom: 30px; 
}

jsFiddle with margin-bottom

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

источник

2013-08-15 SeanWM

Что означает «отзывчивый» в этом контексте? –

Измените размер выхода js fiddle, и вы поймете, что я имею в виду. Изображения настраиваются на размер экрана. – SeanWM

Хорошо, спасибо :) –

Вам просто нужно сделать нижнюю прокладку на .box-контейнера 30px:

.box_container { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    padding: 10px 10px 30px 10px; 
    margin-bottom: -35px; 
    margin-left: 5px; 
    margin-right: 5px; 
}

источник

2013-08-15 12:43:58 fred02138

Вот скрипка: http://jsfiddle.net/fred02138/jFwYU/2/ – fred02138

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

http://jsfiddle.net/jFwYU/3/

body { 
    margin: 0; 
    padding: 0; 
    background: #EEE; 
    font: 10px/13px'Lucida Sans', sans-serif; 
} 
.box { 
    float: left; 
    position: relative; 
    width: 14.28%; 
    padding-bottom: 10px; 
} 

.boxInner img { 
    width: 100%; 
} 

body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox { 
    margin-bottom: 0; 
} 
@media only screen and (max-width : 480px) { 
    /* Smartphone view: 1 tile */ 
    .box { 
     width: 100%; 
     padding-bottom: 10px; 
    } 
} 
@media only screen and (max-width : 650px) and (min-width : 481px) { 
    /* Tablet view: 2 tiles */ 
    .box { 
     width: 50%; 
     padding-bottom: 10px; 
    } 
} 
@media only screen and (max-width : 1050px) and (min-width : 651px) { 
    /* Small desktop/ipad view: 3 tiles */ 
    .box { 
     width: 33.3%; 
     padding-bottom: 10px; 
    } 
} 
@media only screen and (max-width : 1290px) and (min-width : 1051px) { 
    /* Medium desktop: 4 tiles */ 
    .box { 
     width: 25%; 
     padding-bottom: 10px; 
    } 
} 
@media only screen and (max-width : 1590px) and (min-width : 1291px) { 
    /* Large desktop: 5 tiles */ 
    .box { 
     width: 20%; 
     padding-bottom: 10px; 
    } 
} 
@media only screen and (max-width : 1920px) and (min-width : 1591px) { 
    /* Extra large desktop: 6 tiles */ 
    .box { 
     width: 16.6%; 
     padding-bottom: 10px; 
    } 
}

1) Удалены положение: абсолютный; для boxInner и box_container

2) Избегайте использования поплавков и положений: абсолютное; вместе

3) только горизонтальные размеры должны быть определены в процентах, а не вертикальные (обивка-вниз: 33% не хорошо)

источник

2013-08-15 12:48:03

Интересный подход, но мне понравилось заполнение вокруг каждого изображения. – SeanWM

Это легко. Замените нижнюю часть: 10px; под .box до прокладки: 5px 10px; –

Кажется, что, возможно, самым простым решением этой проблемы было бы модифицировать CSS для коробки:

.box { 
    float: left; 
    position: relative; 
    width: 14.28%; 
    height: 14.28%; 
    margin-bottom: 40px; 
}

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

У вас также может быть крайность в процентах, чтобы он составлял процент от размера ящика, скажем, 20% или около того, но px может быть хорошей идеей, если вы не беспокоитесь о подростках крошечные ящики являются проблемой (целая галерея менее 50 пикселей)

Надеюсь, что это поможет!

источник

2013-08-15 12:52:20 alias65536

Я создал что-то, чтобы помочь студенту колледжа начать работу. Я адаптировал ваши изображения к прикрепленному коду. Есть некоторые функции, которые требуется студенту, которых вы не просили, но вы можете легко их удалить.

Я считаю, что он соответствует намерению сохранять пространство между изображениями и допускать текст для каждого изображения. Текст заблокирован для его изображения.

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

Обновлено: Example Photo Gallery

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>Photo Viewer</title> 
 
    <style> 
 
     html { 
 
      border: 0 none transparent; 
 
     } 
 

 
     body { 
 
      padding: 0; 
 
      margin: 0; 
 
      font-family: arial, tahoma, sans-serif; 
 
      font-weight: 400; 
 
      font-size: 15px; 
 
      background: #FEFADA; 
 
      color: #2C2218; 
 
      width: 100%; 
 
      height: 100%; 
 
      border: none; 
 
      text-align: center; 
 
      font-style: normal; 
 
      font-weight: normal; 
 
      font-variant: normal; 
 
      cursor: pointer; 
 
     } 
 

 
     .picture { 
 
      /*Add venfor specific property*/ 
 
      -webkit-column-count: 4; 
 
      /*Set the default to 4 columns*/ 
 
      column-count: 4; 
 
      /*Set text line height*/ 
 
      line-height: 1.5; 
 
      /*Add venfor specific property*/ 
 
      -webkit-column-gap: 15px; 
 
      column-gap: 15px; 
 
      /*Outer margin for picture container*/ 
 
      margin: auto 10px; 
 
     } 
 

 
     /*Switch to three columns at this display width*/ 
 
     @media (max-width: 1024px) { 
 
      .picture { 
 
       /*Add venfor specific property*/ 
 
       -webkit-column-count: 3; 
 
       column-count: 3; 
 
      } 
 
     } 
 

 
     /*Switch to two columns at this display width*/ 
 
     @media (max-width: 764px) { 
 
      .picture { 
 
       /*Add venfor specific property*/ 
 
       -webkit-column-count: 2; 
 
       column-count: 2; 
 
      } 
 
     } 
 

 
     /*Switch to one columns at this display width*/ 
 
     @media (max-width: 480px) { 
 
      .picture { 
 
       /*Add venfor specific property*/ 
 
       -webkit-column-count: 1; 
 
       column-count: 1; 
 
      } 
 
     } 
 

 
     .hide { 
 
      display: none; 
 
     } 
 

 
     .img, .selected-img { 
 
      width: 100%; 
 
      margin: 8px auto; 
 
      white-space: nowrap; 
 
     } 
 

 
     .selected-img { 
 
      max-width: 1024px; 
 
     } 
 

 
     .selected { 
 
      position: fixed; 
 
      margin: 5px auto; 
 
      left: 0; 
 
      right: 0; 
 
      z-index: 10; 
 
      display: block; 
 
     } 
 

 
     .closeme { 
 
      -webkit-align-content: center; 
 
      left: 0; 
 
      right: 0; 
 
      width: auto; 
 
      margin: auto; 
 
      display: block; 
 
     } 
 

 
     .disable { 
 
      background: rgba(0, 0, 0, .3); 
 
      width: 100% !important; 
 
      height: 100% !important; 
 
      left: 0; 
 
      right: 0; 
 
      top: 0; 
 
      bottom: 0; 
 
      z-index: 5; 
 
      position: fixed; 
 
     } 
 

 
     .btn { 
 
      border: 1px; 
 
      border-color: transparent #D1C89D transparent #D1C89D; 
 
      background: #EBE6C1; 
 
      height: 40px; 
 
      margin: auto 0; 
 
      width: 100%; 
 
     } 
 

 
     .picture-text { 
 
      margin: auto; 
 
      padding: 10px 3px; 
 
      display: table-cell; 
 
      white-space: normal; 
 
     } 
 

 
     .inline-block { 
 
      display: inline-block; 
 
      white-space: nowrap; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div> 
 
     <!-- Hide the selected image window until its needed with the hide class --> 
 
     <div id="selectedWindow" class="hide"> 
 
      <button class="closeme btn" onclick="closeWindow()">Click this Button or on the Selected Image to close window.</button> 
 
      <!-- Load the selected image here --> 
 
      <img id="selectedImage" class="selected-img" onclick="closeWindow()" /> 
 
     </div> 
 
     <button class="btn" onclick="loadImages()">Load Images</button> 
 
     <div id="imageContainer" class="picture" onclick="loadSelectedPicture(event)"></div> 
 
     <div id="disableMask"></div> 
 
    </div> 
 
    <script type="application/javascript"> 
 
     function loadImages() { 
 
      // For DEBUG if you need it: alert("Made it to the function"); 
 
      var element = document.getElementById("imageContainer"); 
 
      var imageArray = ["http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/1.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/2.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/3.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/4.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/5.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/6.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/8.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/9.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/10.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/11.jpg"]; 
 
      var picture = ""; 
 
      for (var i = 0; i < imageArray.length; i++) { 
 
       // Create an id for each image and add its class. 
 
       picture += "<div><img id=\"i" + i + "\" class=\"img\" src=\"" + imageArray[i] + "\"><div class=\"inline-block\"><div class=\"picture-text\">Here is some text for each image. How long can this text be before we have some issues.</div></div></div>"; 
 
       // For DEBUG if you need it: console.log(picture); 
 
      } 
 
      element.innerHTML = picture; 
 
     } 
 

 
     function loadSelectedPicture(event) { 
 
      var target = event.target || event.srcElement; 
 
      this.stopEventPropagation(event); 
 
      var selectedElement = document.getElementById(target.id); 
 
      var imageElement = document.getElementById("selectedImage"); 
 
      if (!selectedElement.src) 
 
       return; 
 
      imageElement.src = selectedElement.src; 
 
      document.getElementById("selectedWindow").className = "selected"; 
 
      document.getElementById("disableMask").className = "disable"; 
 
     } 
 

 
     function stopEventPropagation(event) { 
 
      if (!event) 
 
       event = window.event; 
 
      //IE9 & Other Browsers 
 
      if (event.stopPropagation) { 
 
       event.stopPropagation(); 
 
      } 
 
      //IE8 and Lower 
 
      else { 
 
       event.cancelBubble = true; 
 
      } 
 
     } 
 

 
     function closeWindow() { 
 
      document.getElementById("selectedWindow").className = "hide"; 
 
      document.getElementById("disableMask").className = ""; 
 
     } 
 
    </script> 
 
</body> 
 
</html>

Я постараюсь обновить это сообщение рабочим jsFiddle, когда у меня будет свободное время.

источник

2017-12-26 02:00:59 Highdown

Отзывчивая картинная галерея

ответ

Смежные вопросы