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
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.
joshuaiz, you have a link i can take a look at. as helga mentioned, i've used masonry in a child theme
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!
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.
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..
hey josh,
as helga likes to put it... the akisment fairies got me!
so i've had to post elsewhere...grr
oh i,
the above link will self destruct at some point
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!
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:
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
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.
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
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!
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.
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
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.
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....
it doesn't make sense?
p.s helga, if i used that 'glass of wine' theory, i'd be constantly pissed
LOL. well it is only to be used in extreme situations... ;)
This topic has been closed to new replies.