How to layout a image gallery?_问答_开发者_运维开发者技术经验分享

I am making an image gallery, and I need to display images in a grid like l开发者_运维问答ayout. I don't want to use any frameworks, and would prefer to do things from scratch. Also, I would prefer not to use tables for the layout, since it will be a pain to add images to the table dynamically.

The layout consists of divs, like:

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

to achieve the grid look, I simply "float"-ed all .uPics to left....and given some padding and margin to the #gallery. So far everything works great.

The PROBLEM starts, when I try to give a hover effect to the images. initially the <p> is hidden, and I use jQuery to show it on hover. but on doing so, the images below the one I am hovering over, shifts towards the right instead of moving down. Any ideas?

If the height of your divs is variable then I would recommend either using clear:both on the first element of each new row OR putting each row in its own container div. Otherwise, as you've noticed, the divs under the selected one will probably be pushed to the side of the higher div instead of shifting down.

I'd also consider Matt's solution as divs moving around on mouseover imho gives a very chaotic look to a page.

But if you're set on doing it this way, check out this example:

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

The w3schools has a sample image gallery all in CSS. They add a border on hover of the image.

I would maybe set the width and height of the paragraph, and fix it using absolute positioning relative to the enclosing uPic div. That way you can have the paragraph of description appear "above" the image on hover without disturbing the flow. So, add position: relative; to the uPic, add something along the lines of position: absolute; left: 0px; top: 0px; to the <p>, and then adjust other things to suit.

I suggest that you choose a fixed height and width for your div :

It may fix your problem
It is not convenient for the user when a whole part of the grid is moving just to show up a little description, whether it is downward or to the right

I think this may be helpful

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