CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
nahive
nahive

Reputation: 263

Slide out description after clicking image in gallery

I'm trying to make animation when opening image kinda like is here: http://arzbhatia.com/ in portfolio section.

This is what I've already done, but it's not working properly.

Here is jFiddle of what I've done: jFiddle

The div is showing in the same place, no matter which image I click. If I remove position:absoulte from #test_div it seem to add div after image, moving rest of them to the bottom.

Upvotes: 0

Views: 688

Answers (3)

manafire
manafire

Reputation: 6084

The div is in the same place because the images are being floated out of their parent (the LI). This is visible in the Chrome Dev Tools if you hover over the list elements.

The fix is to not float anything and to make the LIs display:inline-block so that they occupy space in the dom. You also need to add some Javascript to increase the height of the LI to accommodate #test_div when it gets added because it's positioning is absolute.

Full code here: http://fiddle.jshell.net/MYXcf/3/

Updated code here: http://fiddle.jshell.net/MYXcf/5/

Upvotes: 0

Michiel
Michiel

Reputation: 2203

I did change your fiddle, and created rows. Try it like this: http://fiddle.jshell.net/MYXcf/4/

Upvotes: 1

clmntclmnt
clmntclmnt

Reputation: 66

You have to put another div named description into all you li. Like this :

<div id="gallery">
    <ul>
        <li class="image_item">
            <img class="gal_images" src="http://goo.gl/rpys4M">
            <div class="description"></div>
        </li>
        <li class="image_item">
            <img class="gal_images" src="http://goo.gl/rpys4M">
            <div class="description"></div>
        </li>
        <li class="image_item">
            <img class="gal_images" src="http://goo.gl/rpys4M">
            <div class="description"></div>
        </li>
        <li class="image_item">
            <img class="gal_images" src="http://goo.gl/rpys4M">
            <div class="description"></div>
        </li>
    </ul>
</div>

And some css to style this up :

ul {
    list-style-type: none;
}
#gallery {
    height: 500px;
    margin: 0 auto;
    width: 500px;
    margin-top: 100px;
}
.click_images {
    vertical-align: top;
    display: block;
    position: relative;
}
.gal_images {
    height: 220px;
    width: 220px;
    float: left;
    font-size: 40px;
    color: #fff;
    margin: 5px;
}
.image_item {
    width: 220px;
    float: left;
}
#test_div {
    position: absolute;
    top: auto;
    height: 200px;
    width:100%;
    background: #000;
    overflow: hidden;
}
.description {
    display: none;
}

And the jQuery, will toggle if the description is already opened or not, if its opened, it'll hide, else it'll open.

var opened = false;
$('.image_item').click(function () {
    if (!opened) {
        opened = true;
        $(this).find('.description').slideDown('500').append('hahaha');
    } else {
        opened = false;
        $(this).find('.description').slideUp('500');
    }

});

You'll find a fiddle here: http://jsfiddle.net/fm9L4/

Upvotes: 0

Related Questions