isotope image onclick to reveal new content in top div WordPress

4 Views

I’m trying really hard to replicate what happens here angular theme on WordPress.

I’ve been able to get isotope to filter the post_thumbnails display them and it animate great but what I’m stuck on is when clicking an image or link the content of that post/portfolio gets displayed in a new div. Ideally in place and pushing boxes out the way so if you’re on a mobile you don’t have to scroll to the top.

Read More

Any pointers to get me started would be great, just can’t find anything like this anywhere and think it would be very useful to others 🙂

Thanks

Post Views: 4

Related posts

Leave a Reply

1 comment

  1. Actually that can be achieved quite easily. Basically you’ll merely have to add a click handler to all Isotope items. The handler has to figure out which element has been clicked (e.g. by checking class names of the clicked item, but of course there are numerous ways) and then add the respective content to your div element.

    If the content has to be shown in place, it’s even easier. You can simply add the preview and the full content to the same Isotope item, but hide the full content by default:

    <div class="item">
    <div class="preview">...</div>
    <div class="full">...</div> <!-- hidden with CSS -->
</div>

    Then add a click handler to all Isotope items:

    $(".item").click(function(){
    $(this).toggleClass("big");
    $("#container").isotope("reLayout");
});

    By calling .isotope("reLayout") the other items are pushed out of the way when the clicked one expands.

    Finally you need some basic CSS rules making div elements with .big bigger, hiding .full by default, but showing it when .big is set in the parent div. In that case .preview has to be hidden of course; this can all be done with CSS, no JavaScript/jQuery required.

    Ok, it’s a bit cumbersome to explain – I guess an example says more than a thousand words: JSFiddle

    Of course that’s just a very basic example, but hopefully it explains what I meant. 😉