How to use thumbnails as triggers to expand and collapse content with JQuery Masonry on WordPress site

1 Views

I’m new here, this is my fist question, but I’ve performed research and can’t find the answer.

I’m developing a WordPress site and hacking a template that uses masonry with summaries and thumbnails on a grid on the index page. When you click on an image you’re directed to the post content. This is the theme: http://jinsonathemes.com/fabs/?themedemo=Vasiliki

Read More

What I’d like to implement is this:

  1. When the user clicks on the thumbnail, the content is revealed and expanded on the same page. Here’s an example from Up Magazine: http://upmagazine-tap.com

I looked at the JQuery script on this very cool Fiddle (#FS34t). The boxes expand and collapse content on click, but that’s not quite what I have in mind for this site. Will definitely implement on another.

I thought it would be an easy show /hide function, but each image is linked to a specific post using the same “content” div. How would I use an image in a masonry grid as the trigger for an expand/collapse of content of the respective post — as in the Up Magazine sample?

Thank you for reading.

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. I would add the_content to the post div in its own child div. Then hide that div in the css.

    Then I would create a function that opens up that div [I’d use jQuery slideDown()]. The function would also include the masonry reload method [.masonry( ‘reload’ )] in that function.

    I would then bind that function to a click on the div, or perhaps the post thumbnail.

    Very roughly:

    html

    <div class="post">
<?php the_post_thumbnail() ?>
<div class="excerpt"><?php the_excerpt() ?></div>
<div class="post-content"><?php the_content() ?></div>
</div>

    the css

    div.post-content {
display: none;
}

    js

    $('.classofpostthumbnail').click(function() {
  $(this).siblings('.excerpt').slideUp();
  $(this).siblings('.post-content').slideDown();
  $('.masonrycontainer').masonry('reload');
});

    However my js could definitely be improved. [For starters chain the slides with their callbacks so that all the animations run after each other. And of course your html and css will probably be a lot more complicated.