CODEWITHSUNDEEP
jquerycssimage-gallery
DMBorges
DMBorges

Reputation: 93

Image Gallery OnClick issue

I've been trying to create an image gallery containing the image and below a description. Everytime I click on the image its border must become red.

However, I've encountered two issues...

  1. If the description text is too long, instead of filling the image it moves occupies the space below. I wish for the text to move up, covering the image. As you can see on the example, it also mixes up the image gallery organization. How can I fix this?
  2. Everytime I select one of the images, the border becomes red but the surrounding images move from its original place. How can I avoid this?

Here is my example: https://jsfiddle.net/azarew/0jgenant/

			$('div.img').click(function() {
			  $('div.img').css('border-style', "hidden");
			  $(this).css('border', "solid 1px red");
			});
div.img {
  border: 1px solid #ccc;
  background-color: black;
  opacity: 1;
}
div.img:hover {
  border: 1px solid #777;
  opacity: 0.8;
}
div.img img {
  width: 100%;
  height: auto;
}
div.desc {
  padding: 5px;
  text-align: center;
  /* styling bellow */
  background-color: black;
  font-family: 'tahoma';
  font-size: 10px;
  color: white;
  opacity: 0.8;
  /* transparency */
  filter: alpha(opacity=60);
  /* IE transparency */
}
* {
  box-sizing: border-box;
}
.responsive {
  padding: 6px;
  float: left;
  width: 24.99999%;
}
@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}
@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_mountains.jpg" alt="Trolltunga Norway" width="300" height="200">
    <div class="desc">O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão.</div>
  </div>
</div>


<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_fjords.jpg" alt="Forest" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_forest.jpg" alt="Northern Lights" width="600" height="400">
    <div class="desc">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_lights.jpg" alt="Mountains" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>
<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_mountains.jpg" alt="Trolltunga Norway" width="300" height="200">
    <div class="desc">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system</div>
  </div>
</div>


<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_fjords.jpg" alt="Forest" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_forest.jpg" alt="Northern Lights" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_lights.jpg" alt="Mountains" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>
<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_mountains.jpg" alt="Trolltunga Norway" width="300" height="200">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>


<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_fjords.jpg" alt="Forest" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_forest.jpg" alt="Northern Lights" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_lights.jpg" alt="Mountains" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>
<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_mountains.jpg" alt="Trolltunga Norway" width="300" height="200">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>


<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_fjords.jpg" alt="Forest" width="600" height="400">
    <div class="desc">Add a description of the image heredsfsdfsdfsd ds dfgdf dfg fdg dfg dfgdf gff</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_forest.jpg" alt="Northern Lights" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_lights.jpg" alt="Mountains" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

Upvotes: 0

Views: 242

Answers (2)

eisbehr
eisbehr

Reputation: 12452

The 'border jump':

The problem is, that you remove the border on the first click. Leave the original border there and don't remove it. Otherwiese set the border to transparent or the original (#ccc) color, but let it be one pixel!

$('div.img').css('border-color', "#ccc");

The overlay:

You have to set the overlay to position: absolute;, width: 100% and bottom: 0; in order to place it on the bottom of the div.img container. On the parent you set position: relatvie; and you're done!

div.img {
  position: relative;
}

div.desc {
  position: absolute;
  bottom: 0;
  width: 100%;
}

Working example.

Upvotes: 1

Justinas
Justinas

Reputation: 43557

  1. Place description over image using position: absolute.
  2. Instead of hiding border, make it's color transparent.

$('div.img').click(function() {
  $('div.img').css('border-color', "transparent");
  $(this).css('border', "solid 1px red");
});
div.img {
  border: 1px solid #ccc;
  background-color: black;
  opacity: 1;
  position: relative;
}
div.img:hover {
  border: 1px solid #777;
  opacity: 0.8;
}
div.img img {
  width: 100%;
  height: auto;
}
div.desc {
  padding: 5px;
  text-align: center;
  /* styling bellow */
  background-color: black;
  font-family: 'tahoma';
  font-size: 10px;
  color: white;
  opacity: 0.8;
  /* transparency */
  filter: alpha(opacity=60);
  /* IE transparency */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}
* {
  box-sizing: border-box;
}
.responsive {
  padding: 6px;
  float: left;
  width: 24.99999%;
}
@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}
@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_mountains.jpg" alt="Trolltunga Norway" width="300" height="200">
    <div class="desc">O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão.</div>
  </div>
</div>


<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_fjords.jpg" alt="Forest" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_forest.jpg" alt="Northern Lights" width="600" height="400">
    <div class="desc">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_lights.jpg" alt="Mountains" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>
<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_mountains.jpg" alt="Trolltunga Norway" width="300" height="200">
    <div class="desc">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system</div>
  </div>
</div>


<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_fjords.jpg" alt="Forest" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_forest.jpg" alt="Northern Lights" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_lights.jpg" alt="Mountains" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>
<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_mountains.jpg" alt="Trolltunga Norway" width="300" height="200">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>


<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_fjords.jpg" alt="Forest" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_forest.jpg" alt="Northern Lights" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_lights.jpg" alt="Mountains" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>
<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_mountains.jpg" alt="Trolltunga Norway" width="300" height="200">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>


<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_fjords.jpg" alt="Forest" width="600" height="400">
    <div class="desc">Add a description of the image heredsfsdfsdfsd ds dfgdf dfg fdg dfg dfgdf gff</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_forest.jpg" alt="Northern Lights" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_lights.jpg" alt="Mountains" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

Upvotes: 1

Related Questions