full size background jQuery - implementing in Wordpress child theme - Themes by bavotasan.com

Amp

Hi
I have been trying to implement the jQuery full size background into a Wordpress child theme. I have managed to inject the js into the head of the code using a php function in my functions.php

function childtheme_scripts() {?>
    <!-- your link tags here -->
This is where my js files are being called in from my childtheme folder.
<?php }
add_action('wp_head','childtheme_scripts');

Where I am then struggling is how to then implement the background image and to activate the script from the body.

<img src="images/bg.jpg" alt="" id="background" />
<div id="maincontent">
 
    <div id="box">
        <h1>Full Size Background Image jQuery Plugin</h1>
        <h2>Demo</h2>
        Just resize this window and you will see the plugin in action. Whenever the window size changes, the background image size changes. AND it always stays in the proper aspect ratio.
	    <p><a href="http://bavotasan.com/?p=1748">&laquo; back to tutorial</a></p>
    </div>
</div>
<script type="text/javascript">
$(window).load(function() {
	$("#background").fullBg();
});
 
</script>

Thanks for the great jQuery code. I have been looking for ages to find something that does exacly what you have written. And in a very clean and concise way may I add.

I'd appreciate any help you could offer on this.

cbavota

The lower script needs to be included in the wp_footer() function, similar to how you included it in the head.

Amp

Thanks for the reply I'll give that a shot this weekend.

I saved the contents of

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

as a js file in my child theme

Is this bad practice? I just thought maybe jquery.min.js might move one day and the plug-in wouldn't work.

cbavota

Don't do that. That jQuery file is going nowhere. It will always be available through the Google CDN.

Amp

I have been trying various methods to get the img src and the inline script to work with no joy.
I wrote a function in my childthemes function.php to pull the img and id="background" into the page but I can't reference the class .fullBg

 
// img src tag to give id=background - How do you reference the .fullBg class from function.php into style.css
function my_background() { ?>
<img src="http://www.davidbernarddesign.com/images/artstonebg_2.jpg" alt="#" id="background" />
 
<script type="text/javascript">
$(window).load(function() {
	$("#background").fullBg();
});
</script>
 
<?php }
add_action('wp_footer', 'my_background');

This is pulling in the js

// adding jQuery to your head
function childtheme_scripts() {?>
    <!-- your link tags here -->
		<script type="text/javascript" src="js/jquery.libv1.5window.js"></script>
		<script type="text/javascript" src="js/jquery.fullbg.min.js"></script>
 
<?php }
add_action('wp_head','childtheme_scripts');

cbavota

You need to enqueue the JS script.

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

<?php
function my_scripts_method() {
   wp_register_script( 'fullbg', 'http://yoursite.com/js/jquery.fullbg.min.js', array('jquery'), '1.0', true); // make sure the URL points to the file on your server
}    
add_action('wp_enqueue_scripts', 'my_scripts_method');
 
function load_my_scripts() {
   wp_enqueue_script( 'fullbg' );
}
add_action('wp_head','load_my_scripts');
 
function my_background() { ?>
   <img src="http://www.davidbernarddesign.com/images/artstonebg_2.jpg" alt="#" id="background" />
 
<script type="text/javascript">
/* <![CDATA[ */
(function($) {
   $(window).load(function() {
      $("#background").fullBg();
   });
})(jQuery);
/* ]]> */
</script>
 
<?php }
add_action('wp_footer', 'my_background');
?>

Try messing around with that code to get it to work.

Hey there!

Categories

In this Discussion

Tagged