Как сделать макет галереи изображений? - PullRequest
Новая
       10

Как сделать макет галереи изображений?

0 голосов
/ 19 ноября 2010

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

Макет состоит из элементов div, например: 

<div id="gallery">
   <div class="uPic">
      <img src="1.png">
      <p> description </p>
   </div>
   <div class="uPic">
      <img src="2.png">
      <p> description </p>
   </div>
      ....
......
....
</div>

чтобы получить вид сетки, я просто «плаваю» - все .uPics слева, и добавил отступ и отступ для #gallery.Пока все отлично работает.

ПРОБЛЕМА начинается, когда я пытаюсь дать эффект наведения на изображения.изначально <p> скрыт, и я использую jQuery, чтобы показать его при наведении курсора.но при этом изображения под изображением, над которым я нахожусь, смещаются вправо, а не опускаются.Есть идеи?

Ответы [ 5 ]

0 голосов
/ 24 июня 2011

Я думаю, что это может быть полезно 

<style type="text/css" ><!--
#gallery_box{

width:728px;

height:545px;

 border:solid #cccccc 1px;

 margin:20px auto 0px;

 padding:5px;

 -moz-box-shadow:0px 18px 40px #ccc;

 -webkit-box-shadow:0px 14px 40px
#ccc;

 box-shadow:0px 5px 30px #ccc;

}
#thumbnail{

 width:160px;

 height:160px;

 background:#f6f6f6;

 border:solid #cccccc 1px;

 border:solid #cccccc 1px;

 margin:5px;

 padding:5px;

 float:left;

 text-align:center;

 position: relative;

 line-height: 156px;

 -moz-box-shadow:4px 4px 4px
#ccc;n-webkit-box-shadow:4px 4px 4px #ccc; box-shadow: 4px 4px 4px #ccc; } img {

 border:none;

 -moz-box-shadow:0px 8px 10px #ccc;
-webkit-box-shadow:0px 8px 10px #ccc; box-shadow: 0px 8px 10px #ccc; }  

a{

 color:#0066FF; text-decoration:none;
} a:hover{

 color:#0099FF; }  
--></style><pre>

<div id="gallery_box" >
   <div id="thumbnail">
<a   href="" ></a>
   </div>  
</div>
0 голосов
/ 19 ноября 2010

Если высота ваших div-ов является переменной, я бы рекомендовал либо использовать clear: оба в первом элементе каждой новой строки, ИЛИ помещать каждую строку в свой собственный контейнерный div.В противном случае, как вы заметили, div-ы под выбранным, скорее всего, будут перемещаться в сторону более высокого div вместо смещения вниз.

Я бы также рассматривал решение Мэтта как div, перемещающиеся при наведении мыши на imhoпридает странице очень хаотичный вид.

Но если вы настроены так делать, посмотрите на этот пример: 

<html>
<head>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

  <script type="text/javascript">
    $(document).ready( function() {
      $('#gallery .image p').hide();
      $('#gallery .image').hover(
        function() { $(this).find('p').show() },
        function() { $(this).find('p').hide() }
      );
    });
  </script>

  <style>
    #gallery {
      width: 800px;
    }
    #gallery .image {
      width: 200px;
      float: left;
      background: #eee;
      margin-bottom: 10px;
    }
    #gallery .image.newline {
      clear: both;
    }
    #gallery .image .placeholder {
      width: 180px;
      height: 200px;
      margin: 10px;
      background: #ccf;
    }
    #gallery .image p {
      margin: 10px;
      background: #fcc;
    }
  </style>

</head>
<body>

  <div id="gallery">
    <div class="image">
      <div class="placeholder"></div>
      <p>My description</p>
    </div>
    <div class="image">
      <div class="placeholder"></div>
      <p>My description</p>
    </div>
    <div class="image">
      <div class="placeholder"></div>
      <p>My description</p>
    </div>
    <div class="image">
      <div class="placeholder"></div>
      <p>My description</p>
    </div>

    <!-- NOTE the added "newline" class where the new line starts! -->
    <div class="image newline">
      <div class="placeholder"></div>
      <p>My description</p>
    </div>
    <div class="image">
      <div class="placeholder"></div>
      <p>My description</p>
    </div>
    <div class="image">
      <div class="placeholder"></div>
      <p>My description</p>
    </div>
  </div>

</body>
</html>
0 голосов
/ 19 ноября 2010

Я мог бы установить ширину и высоту абзаца и исправить это, используя абсолютное позиционирование относительно окружающего элемента uPic.Таким образом, вы можете сделать так, чтобы абзац описания появлялся «над» изображением при наведении, не нарушая поток.Итак, добавьте position: relative; к uPic, добавьте что-то по линии position: absolute; left: 0px; top: 0px; к <p>, а затем настройте другие элементы в соответствии с потребностями.

0 голосов
/ 19 ноября 2010

Я предлагаю вам выбрать фиксированную высоту и ширину для вашего div:

  • Это может решить вашу проблему
  • Пользователю неудобно, когда целая частьСетка движется просто чтобы показать небольшое описание, будь то вниз или вправо
0 голосов
/ 19 ноября 2010

В w3schools есть образец галереи изображений в CSS. Они добавляют границу при наведении на изображение.

...