Support » Themes and Templates » help with jQuery’s Masonry

  • Hey guys, what’s up? I had a previous post resolved on trying to figure out how to achieve a layout I was looking for and was told about jQuery’s Masonry script from David DeSandro.

    More information about this script can be found here:

    As you can see from the screenshot, I am trying to remove the vertical spacing between postings by using this script:
    Screenshot of current layout.

    I am still new to WordPress and coding in general. I usually design the site and pass it off to a programmer, but in an attempt to teach myself more about CSS and the like, I decided to try doing this on my own site.

    I cannot (for the life of me) figure out where this code from the masonry script is supposed to go to create the desired effect.

    jQuery Masonry: Fluid Window Resizing
    In this example, the wrap container is fluid. In order to re-arrange the box elements, the masonry script will have to be called every time the window is resized.

    //run masonry when page first loads
    $('.wrap').masonry(); 
    
    //run masonry when window is resized
    $(window).resize(function() {
    	$('.wrap').masonry();
    });

    This is the script that I am trying to figure out where to place inside my index.php file. When I insert the code, I get a vertical column instead of a block and I am not sure what CSS/XHTML needs to be changed to make it happen.

    I tried creating another div and applying it to that, but again – no luck.

    My website is:
    and here are the links to my CSS and XHTML.

    Thanks so much for any help. I’m beyond frustrated at this point and would love some input. Any explanation as to what I am doing wrong would be great, as I stated earlier I’m a newb to this “programming thing”.

    Cheers,
    Jeff C.

Viewing 5 replies - 1 through 5 (of 5 total)
  • did you try inserting it in the theme’s header.php?

    Thread Starter redikolus

    (@redikolus)

    I haven’t gotten to breaking my theme up. I know, tisk tisk. Just wanted to try and get everything setup and then I will break up my index.php into multiple items.

    Right now I am just trying to apply this effect to my HTML template, still with no luck.

    Driving me nuts! Just want it to work, and know why/how/where – this is a big learning experience for me.

    Thread Starter redikolus

    (@redikolus)

    Anyone have any ideas?

    I’m sure this has been resolved for you re.dikol.us, but for anyone else who comes by this post, i wanted to give you a solution.

    In your header, you’ll need to call both the jquery script, and the masonry script. you might try this code:

    <script src=”<?php bloginfo(‘template_url’); ?>/javascript/jquery.min.js” type=”text/javascript”>
    </script>
    <script src=”<?php bloginfo(‘template_url’); ?>/javascript/jquery.masonry.js” type=”text/javascript”>
    </script>

    Curiously enough, the order that the two libraries are called matters, so call the jquery first.
    Then, still in the head section of the page you’ll want to call the masonry function. Enclose it in scripts, and call the div or wrapper in parenthesis and single quotes:

    <script type=”text/javascript”>
    $(function(){

    $(‘#wrapper_div’).masonry();

    })
    </script>

    After that, you should be set to go!

    I’d love to see the final product if you have it?

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘help with jQuery’s Masonry’ is closed to new replies.