I'm working on an application which shows thumbnails of images users have uploaded side by side. I want to be able to show the full size image as well as some information about it.
My solution is to have the #wrapper
slide up when an image is clicked to reveal a page which shows the full size image (maybe through the help of iframes, not sure yet).
I'm trying to get the first step working i.e. sliding up #wrapper
. The code below should work, but the sliding animation isn't shown - #wrapper
just disappears. If I remove the class .image
from the images, and add the line <p class="images">Test</p>
and click it, the sliding works, but then the images get unstyled.
So what can be the problem here? I have seen there are a couple of questions with the same topic, but all of them are about using tables.
HTML :
<section id="wrapper">
<div id="blogs">
<div class="blog">
<div class="post">
<img class="images" src="images/image1.png" />
</div>
</div>
<div class="blog">
<div class="post">
<img class="images" src="images/image2.png" />
</div>
</div>
<div class="blog">
<div class="post">
<img class="images" src="images/image2.png" />
</div>
</div>
</div>
</section>
jQuery :
$('.images').click(function (){
$('#wrapper').slideUp('slow', function() {
});
});
CSS :
#wrapper {
background: yellow;
margin: 0px auto;
width: 100%;
height: 1000px;
position: relative;
top: -20px;
left: 20px;
text-align: left;
margin: 0px auto;
padding: 10px;
}
.post {
background: white;
width: 200px;
height: 220px;
margin: 0px auto;
float: left;
margin-right: 30px;
margin-bottom: 30px;
position: relative;
padding: 5px;
-moz-box-shadow: 0 0 4px 1px #777;
-webkit-box-shadow: 0 0 4px 1px#777;
box-shadow: 0 0 4px 1px #777;
}
.images {
margin-left: 5px;
margin-top: 5px;
width: 188px;
height: 170px;
border: 1px solid #aaa;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
.blogs {
height: 400px;
}
its work good for me (Chrome). but try this :
<section id="wrapper">
<div id="blogs">
<div class="blog">
<div class="post">
<span class="images">
<img src="images/image2.png" alt="" >
</span>
</div>
</div>
</div>
</section>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With