ThemeShaper Forums » Thematic

[closed]

Adding jQuery Masonry to a 'Photos' page

(21 posts)
  • Started 3 years ago by joshuaiz
  • Latest reply from helgatheviking
  • This topic is not resolved
  1. joshuaiz
    Member

    Hi All,

    I'm having some trouble getting jQuery Masonry to work with a top level page of photos. I have 7-8 photos that I want to lay out using Masonry.

    I know I have to enqueue the scripts in functions.php but then I'm a little unclear as to how to create a function creating the divs for the photos using Masonry and how to place the photos in the divs properly.

    Any help would be appreciated.

    Joshua

    Posted 3 years ago #
  2. this is a post where we went through Masonry.

    http://forums.themeshaper.com/topic/how-can-i-place-jquery-masonry-on-my-home-page

    I believe there is also a link therein to a demo site where Johnny Janeiro is using Masonry.

    how are your photos being generated? if they are already surrounded in a div you can use use that as your jQuery selector.

    Posted 3 years ago #
  3. joshuaiz, you have a link i can take a look at. as helga mentioned, i've used masonry in a child theme

    Posted 3 years ago #
  4. joshuaiz
    Member

    Thanks helga - I have been referencing that but I think you forgot to put brackets () in the beginning of your 'add_stuff' function. I caught it but a total newbie could spend hours trying to figure out why it's not working. Maybe they're not necessary but every other function I have seen has them. I think that is why Launch83's site was not loading as I was having the same problem.

    Jonny: I don't have a link at the moment for the simple fact that I am kind of stuck on how to start to code the images.

    Here are the functions i have so far (from the previous Masonry post):


    function add_stuff(){
    if (is_page('Photos')){
    wp_enqueue_script('masonry',get_bloginfo('stylesheet_directory') . '/js/jquery.masonry.js');
    }
    }
    add_action('init','add_stuff');

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

    function masonry_div() {
    { ?>

    <div id="masonry_photo">
    <div class="img_col2">...</div>
    <div class="img_col1">...</div>
    <div class="img_col1">...</div>
    <div class="img_col3">...</div>
    </div>
    <?php }

    }
    add_action('thematic_belowheader','masonry_div');

    My main questions are:

    What itemSelector should I use for the images?

    How do I code the images? Do I use this <img src="img_file.jpg" width="280" height="160" /> inside the divs or in CSS?

    Am I even on the right track here?

    Thanks!

    Posted 3 years ago #
  5. hmm good catch. you totally need brackets, but i don't 'always' test code and have typed that particular snippet so many times that sometimes i just miss stuff. a way to edit old posts would be helpful. but i will atleast add post to that thread w/ the fix.

    as for the selector.... do you need img_col1 and img_col2 as classes? maybe i am missing something, but isn't that the point of masonry? anyway if you went w/ one class say .masonry then you could use that as your selector. of if you need the 2 column classes you could just add a 2nd class <div class="img_col1 masonry"> or something.

    Posted 3 years ago #
  6. joshuaiz
    Member

    I think what it did is put an underscore between img and col instead of just a space so then .img would be the selector. Is that correct?

    I'm still totally unclear where to put the <img src ... > stuff..

    Posted 3 years ago #
  7. hey josh,

    as helga likes to put it... the akisment fairies got me!
    so i've had to post elsewhere...grr

    see http://www.dev.virtualpudding.com/masonry-3/

    Posted 3 years ago #
  8. oh i,
    the above link will self destruct at some point

    Posted 3 years ago #
  9. yeah if your divs had .img as classes then y ou could use $(.img) as your jquery selector. the image tags should just inside of those divs i presume.

    <div class="img">
    <img src="image.png">
    </div>

    no? Johnny has actually used masonry.. i'd check out the markup of his working example.

    damn those akismet fairies!

    Posted 3 years ago #
  10. joshuaiz
    Member

    Thanks for all that guys.

    OK Jonny I placed the divs on my photo page, the photos load but I'm not getting any Masonry action...it looks like the script is enqueued so I'm not quite sure what I'm doing wrong.

    Here is a link to the page:

    http://www.jeremybethmichaels.com/photos/

    Posted 3 years ago #
  11. josh, i posted your exact code into a page i created
    http://www.dev.virtualpudding.com/yo/

    < div id="boxes" class="wrap" >
    <div class="box"><img src="http://www.jeremybethmichaels.com/images/jeremy1.png" alt="" title="1" width="200" height="300" /></div>
    etc...
    < /div >

    it works. i can only think theres a jquery conflict somewhere preventing masonry loading.

    i would try to disable some plugins, or commenting out other external scripts and see if that changes anything. slimbox may be conflicting.

    google enque scripts wordpress, etc.
    a good article http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/

    if all else fails, i would consider...

    set a thumbnail size in wordpress admin
    insert images into page via wordpress and specify (thumbnail size, and link to image)
    or you could manually create thumbs.

    then by adding a float to the class'box' you will have a grid of squares thumbs that use slimbox to enlarge them

    this example (unfinished)
    http://www.arrival.virtualpudding.com/?p=20
    shows a gallery using wordpress native gallery function and shadowbox js

    Posted 3 years ago #
  12. joshuaiz
    Member

    Tried deactivating Slimbox - no change.

    How/where do I add jQuery.noConflict(); ?

    Will that help?

    These are the only scripts that seem to be loading:


    <script type='text/javascript' src='http://www.jeremybethmichaels.com/wordpress/wp-includes/js/jquery/jquery.js?ver=1.4.2'></script>
    <script type='text/javascript' src='http://www.jeremybethmichaels.com/wordpress/wp-content/themes/a-simple-lovehttp://www.jeremybethmichaels.com/wordpress/wp-content/themes/a-simple-love/js/jquery.masonry.js?ver=3.0.1'></script>
    <script type='text/javascript' src='http://www.jeremybethmichaels.com/wordpress/wp-includes/js/comment-reply.js?ver=20090102'></script>

    I tried commenting out the 'comment-reply' script and that had no effect either.

    Posted 3 years ago #
  13. josh, i'm a total jquery newbie so cant really give you any correct advice, just share samples that have worked for me.

    the jQuery.noConflict(); does get added automatically by thematic when using their head scripts (for menu, etc). they are not in your source so i guess you've disabled them.

    how many/what scripts have you added yourself other than masonry? i guess the rest are added from plugins.

    i rarely use plugins that use jquery, i always hardcode the functions myself so i can control the flow of jquery scripts on my page.

    try

    function my_script() {?>
    <?php if (is_page('photos')){ ?>
    <script>
    $('#boxes').masonry({
    columnWidth: 5,
    itemSelector: '.box'
    });
    </script>
    <?php }
    }
    add_action('wp_head', 'my_script');

    move script to header instead of footer

    Posted 3 years ago #
  14. joshuaiz
    Member

    I didn't disable the Thematic jquery so I don't know why that wouldn't be added.

    The only other external script is from TypeKit which I disabled and that didn't work either.

    I tried just using Thematic as the theme and that didn't work.

    Disabled every plugin that could possibly use jquery and no effect.

    Thanks for your help Jonny!

    Posted 3 years ago #
  15. joshuaiz
    Member

    OK after trying various things I still can't get it to work, but what i did find is disabling TypeKit now loads the following which wasn't loaded before:

    <script type="text/javascript" src="http://www.jeremybethmichaels.com/wordpress/wp-content/themes/thematic/library/scripts/hoverIntent.js"></script>
    <script type="text/javascript" src="http://www.jeremybethmichaels.com/wordpress/wp-content/themes/thematic/library/scripts/superfish.js"></script>
    <script type="text/javascript" src="http://www.jeremybethmichaels.com/wordpress/wp-content/themes/thematic/library/scripts/supersubs.js"></script>
    <script type="text/javascript" src="http://www.jeremybethmichaels.com/wordpress/wp-content/themes/thematic/library/scripts/thematic-dropdowns.js"></script>

    <script type="text/javascript">
    jQuery.noConflict();
    </script>

    Still I am not getting any Masonry action...this is puzzling.

    Posted 3 years ago #
  16. what about?

    <script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function($){ 
    
    $('#boxes').masonry({
    columnWidth: 5,
    itemSelector: '.box'
    });
    
    </script>

    i am a jquery novice too, but the noconflict bit and especially the document ready bit have been the keys to me get any jquery to work w/ wordpress

    Posted 3 years ago #
  17. joshuaiz
    Member

    Thanks helga - that doesn't seem to help. I don't know what to do now...I've tried everything I can think of.

    Posted 3 years ago #
  18. i forgot closing )};

    <script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function($){ 
    
    $('#boxes').masonry({
    columnWidth: 5,
    itemSelector: '.box'
    });
    
    $("#boxes").css("border", "3px double red");
    $("#boxes").children(".box").css("border", "3px solid green");
    
    });
    
    </script>

    there is always the have a glass of wine and wait for the solution to come to you method i have used a few times.

    you know it works. johnny has it working and i had it working once upon a time in that other thread i linked you too, but sometimes w/ jquery you can't figure out where the problem is coming from. i like to use alerts or style changes to check that the jquery is installed properly and the selectors are correct. i added 2 to the above cod. i didn't test them, but hopefully they give you an idea or what I mean. firebug supposedly has some debugging capability but i havent figured it out yet so i have to go w/ colors!

    and then if it STILL fails... there is that glass of wine (or beer) strategy again....

    Posted 3 years ago #
  19. it doesn't make sense?

    Posted 3 years ago #
  20. p.s helga, if i used that 'glass of wine' theory, i'd be constantly pissed

    Posted 3 years ago #
  21. LOL. well it is only to be used in extreme situations... ;)

    Posted 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.