I am working on an application that shows thumbnails of images that users uploaded side by side. I want to show a full size image as well as some information about this.
My solution is to hide #wrapper when the image is clicked to show the page that displays the full-size image (perhaps using iframes, not sure yet).
I am trying to complete the first step, i.e. #wrapper rolling up. The code below should work, but the moving animation does not appear - #wrapper just disappears. If I remove the .image class from the images and add the line <p class="images">Test</p> and click on it, the sliding action will work, but then the images will be uneven.
So what's the problem? I saw that there are several questions with the same topic, but they all relate to the use of 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; }
holyredbeard
source share