ThemeShaper Forums » Thematic

[closed]

JQuery Masonry basics

(8 posts)
  • Started 10 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 10 years ago #
  2. amzero427
    Member

    Nevermind. Path got screwed up.

    Posted 10 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 10 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 10 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 10 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 10 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 10 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 10 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.