Greetings Christine!
Thanks for such a quick reply. I took a look at the link to the Codex, but I am such a novice that most of it is unintelligible to me.
Can you tell me the following:
1. In which file do I put the indicated code? And where do I put it?
jQuery(document).ready(function(){
jQuery(#somefunction) ...
});
2. In “jQuery(document)” do I replace “document” with my js file (featureImg.js)?
3. in “ready(function()” do I replace “function” with something, and if so what?
4. in “jQuery(#somefunction)” do I replace “somefunction” with something, and if so what?
Sorry for all the questions, but I really don’t know what I am doing here!
Try this:
jQuery(document).ready(function(){
var curImgId = 0;
var numberOfImages = 10; // Change this to the number of background images
window.setInterval(function() {
JQuery('.featureImg').fadeTo('slow', 0, function() {
jQuery(this).css('background-image','url(http://www.westmont.edu/_sports/images/photos/headers/rotation' + '/' + curImgId + ')').fadeTo('slow', 1);
});
curImgId = (curImgId + 1) % numberOfImages;
},8* 1000);
})();
Hi Christine!
Thank you for the revised code.
I copied and pasted it into the featureImg.js file and uploaded it to themes/js/ directory. Unfortunately, that did not do the trick, the script is still not running.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Your file isn’t being enqueued: view-source:http://blogs.westmont.edu/athletics/
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Instead of this:
function feature-image() {
wp_enqueue_script(
'feature-image', // name your script so that you can attach other scripts and de-register, etc.
get_template_directory_uri() . '/js/featureImg.js', // this is the location of your script file
array('jquery') // this array lists the scripts upon which your script depends
);
}
add_action( 'wp_enqueue_scripts', 'featureImg.js );
Do this:
function feature-image() {
wp_enqueue_script(
'feature-image', // name your script so that you can attach other scripts and de-register, etc.
get_template_directory_uri() . '/js/featureImg.js', // this is the location of your script file
array('jquery') // this array lists the scripts upon which your script depends
);
}
add_action( 'wp_enqueue_scripts', 'feature-image' );
http://codex.ww.wp.xz.cn/Function_Reference/wp_enqueue_script
Greetings Andrew!
Thanks for the help. I see that the file isn’t being enqueued. I copied and pasted the code into the function.php file and then uploaded the function.php to themes/westmont_athletics.
Unfortunately, this the file still isn’t being enqueued.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Hi Andrew!
Thanks again for your help.
My directory structure was:
http://blogs.westmont.edu/athletics/wp-content/themes/js/featureImg.js
I changed this to:
http://blogs.westmont.edu/athletics/wp-content/themes/westmont_athletics/js/featureImg.js
I also changed the script to:
function feature-image() {
wp_enqueue_script(
'feature-image', // name your script so that you can attach other scripts and de-register, etc.
get_template_directory_uri() . 'westmont_athletics/js/featureImg.js', // this is the location of your script file
array('jquery') // this array lists the scripts upon which your script depends
);
}
add_action( 'wp_enqueue_scripts', 'feature-image' );
Unfortunately, it did not make a difference.
As I mentioned earlier, I’m fairly new to all of this and may have missed something very basic. So, I tried to think through it in terms of process. I may being making some incorrect assumptions, but perhaps I’ve found a missing step in the process. Here is what I am thinking:
1. When WordPress loads the header, it comes across:
<div class=”featureImg”></div>
2. the <div> code sends it to style.css where it finds:
.featureImg {
background-image:url(http://www.westmont.edu/_sports/images/photos/headers/rotation/0);
background-position:left;
background-repeat:repeat-x;
border-bottom:3px double #666;clear:both;height:72px;margin:0 0 0;padding:0;
3. The image loads and is formatted by the rest of the attributes listed.
4. How does WordPress then know to look for the js script and carry it out?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Put this in your functions.php file:
exit;
Does anything happen?
Hi Andrew,
No, that didn’t help.
Here is the code now in my functions.php file.
<?php
function feature-image() {
wp_enqueue_script(
'feature-image', // name your script so that you can attach other scripts and de-register, etc.
get_template_directory_uri() . 'westmont_athletics/js/featureImg.js', // this is the location of your script file
array('jquery') // this array lists the scripts upon which your script depends
);
}
add_action( 'wp_enqueue_scripts', 'feature-image' );
exit;
?>
Try using get_template_directory_uri() . '/westmont_athletics/js/featureImg.js',
Hi Andrew,
So, I discovered one problem. I had named my php file function.php, not functions.php.
So, I created a functions.php file and uploaded it to themes/westmont_athletics.
When I went to the site and hit the refresh button, it returned nothing at all, just a black page.
I tried changing to:
get_template_directory_uri() . '/westmont_athletics/js/featureImg.js'
but that also produced a blank page.
For the record, the functions.php file now reads:
<?php
function feature-image() {
wp_enqueue_script(
'feature-image', // name your script so that you can attach other scripts and de-register, etc.
get_template_directory_uri() . '/westmont_athletics/js/featureImg.js', // this is the location of your script file
array('jquery') // this array lists the scripts upon which your script depends
);
}
add_action( 'wp_enqueue_scripts', 'feature-image' );
exit;
?>
Remove the exit; and the closing ?> tag.
