ThemeShaper Forums » Thematic

[closed]

JQuery Masonry basics

(8 posts)
  • Started 2 years ago by amzero427
  • Latest reply from amzero427
  • This topic is resolved
  1. amzero427
    Member

    I know this was covered 8 months ago, but I'm still struggling...

    I've installed the proper script in my functions.php to call /js/jquery.masonry.min.js , and it appears to be working- when I view the source, it's up there in the head, as well as the wp included and up to date version of jquery (1.4.4). After the script to call /js/jquery.masonry.min.js , I have:

    function my_script() {?>
      <script> jQuery('#primary').masonry({
        columnWidth: 100,
        itemSelector: '.hentry'
    }); </script>
    <?php }
    add_action('wp_head', 'my_script');

    So the whole thing looks like:

    function add_stuff() {
       wp_enqueue_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js</a>"), false, '1.4.4');
      wp_enqueue_script('masonry',get_bloginfo('stylesheet_directory') . '/scripts/masonry.js');
    }
    add_action('init','add_stuff');
    
    function my_script() {?>
      <script> jQuery('#primary').masonry({
        columnWidth: 100,
        itemSelector: '.hentry'
    }); </script>
    <?php }
    add_action('wp_head', 'my_script');

    My biggest question is what to do now? I would like to be able to post small and medium sized images in a masoned grid, of varied sizes/widths, on certain pages and posts, and I would like them to be animated. Do I add some css styling to my child themes style.css? Do I throw in some extra div tags in the posts/pages with the images? How should I insert the images in their posts/pages?

    I've tried a bunch of different things, read the previous forum posts, and given up and started from scratch numerous times. Please help a noob.

    Posted 2 years ago #
  2. amzero427
    Member

    Nevermind. Path got screwed up.

    Posted 2 years ago #
  3. amzero427
    Member

    OK. Paths are fixed, everything seems OK, except still not getting any masonry action. I think it's a problem with the css styling? Or the masonry options? It basically looks like it's starting to stack the images, but they don't look like they're aligning correctly...

    Posted 2 years ago #
  4. don't you have to wrap it in a ready container?

    jQuery(document).ready(function($){
      $('ul.xoxo').masonry({ singleMode: true, itemSelector: '.widgetcontainer'  });
    });

    i have masonry working at
    http://www.chicagointerhandball.com/

    Posted 2 years ago #
  5. amzero427
    Member

    Thanks Helga, I've changed it since then, now it's:

    //Masonry
    jQuery(window).load(function(){
    jQuery('#boxes').masonry({
    singleMode: true,
    itemSelector: '.box'
    });
    });

    And the CSS for it is in my default.css and looks like:

    /**** Masonry CSS ****/
    
    .wrap {
        background: #FFF;
        border: 0px solid #456;
        padding: 10px;
    	margin-bottom: 20px;
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
    	border-radius: 5px;
    }
    
    .wrap:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    
    .box {
        margin: 5px;
        padding: 5px;
        background: #D8D5D2;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        font-size: 11px;
        float: left;
    }

    It looks like it's almost working, but it won't A) rearrange and B) the grid is weird-it's like it's still sorting it horizontally? It's like the images aren't being pushed up underneath each other, I'll take a screenshot when I get a chance. Any thoughts on the css for it?

    I'm pretty new to all this, thanks for helping!

    Posted 2 years ago #
  6. amzero427
    Member

    Got it working! I started from scratch -again- and the above worked out for whatever reason. I think I was missing something simple before. Now if I can only get the fluid layout and http://cssgrid.net/ working...

    Posted 2 years ago #
  7. i started converting a couple of thematic layouts to 1140

    https://github.com/helgatheviking/Thematic-Adaptive

    i haven't figured out how to get masonry to resize, but i've been told that Isotope does. http://isotope.metafizzy.co/

    Posted 2 years ago #
  8. amzero427
    Member

    Oh cool! I'll have to play around with Isotope. And thanks for the layouts! I actually did manage to get 1140 working, I don't need any asides yet, so it was pretty easy. But I'll definitely check out the layouts when I have more time...

    As for masonry, as long as the div container the content is in is fluid, could you set "columnWidth;" in the masonry function to a percentage value? And then 1140 would resize it? I'm only talking images and just guessing, I literally JUST got it all working and I'm a total noob :)

    Posted 2 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.