well i battled jquery all day today to get a tab effect going in my theme options.. so i know the frustration. and i am not sure why i thought today was a good day to tackle this.. but i think i have it. i can't get the image to be fixed so you are on your own there....
<?php
function background() { //adds as first thing in body tag, before #wrapper
echo '<img src="'. get_bloginfo('stylesheet_directory') . '/images/wallpaper.jpg" alt="" id="background" />';
}
add_action('thematic_before', 'background');
function add_scripts(){ //adds jquery library and background plugin scripts to head
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery' , 'http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'); //uses the google-hosted jquery library
wp_enqueue_script('jQuery_tools', get_bloginfo('stylesheet_directory') . '/background.js'); //calls the plugin script code
}
add_action('init','add_scripts');
function my_in_head(){ //adds the function that calls the plugin, in a WP-friendly way
?>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("img#background").fullBg();
});
</script><?php }
add_action('wp_head', 'my_in_head');
some step by step explanations for future people looking to do jquery in wp/thematic
1. jquery library is only called in the admin section. nothing will ever work on the "front-end" until you add that script library in the head section.
(function($) {
$.fn.fullBg = function(){
var bgImg = $(this);
function resizeImg() {
var imgwidth = bgImg.width();
var imgheight = bgImg.height();
var winwidth = $(window).width();
var winheight = $(window).height();
var widthratio = winwidth / imgwidth;
var heightratio = winheight / imgheight;
var widthdiff = heightratio * imgwidth;
var heightdiff = widthratio * imgheight;
if(heightdiff>winheight) {
bgImg.css({
width: winwidth+'px',
height: heightdiff+'px'
});
} else {
bgImg.css({
width: widthdiff+'px',
height: winheight+'px'
});
}
}
resizeImg();
$(window).resize(function() {
resizeImg();
});
};
})(jQuery)
copy the above code into a text editor and save it as background.js In my example this file is in the stylesheet's base directory.
3. in the same function that is queuing up jquery, queue up this background.js script
4. create the small function to add the <script> in the head that executes the plugin.
5. load the image in on the thematic_before hook. i had to use php echo as it wouldn't work the way you had it. also be sure that the location and name of the file match your image source. it is early am, and i spent 5 min wondering why it wasn't working when i was inserting background, but my file was called wallpaper. I only noticed that the element had a height suddenly attached to it and realized that jquery must finally be working.
i think that's it. i had better stop, before anyone starts thinking i know anything about jquery. hope it helps. if you figure out the fixed background thing (his css didn't work for me), post back here as i am curious now.
