Javascript files (Hoverizr) load properly but won't work
-
I’m having trouble getting Hoverizr script to work on my wordpress site. I have all of the javascript files loading properly, but it still just won’t work. It works perfectly in a basic html file in a non-wordpress site, so I know I’m doing something slightly off in wordpress.
In my js folder, I have a file called jquery.hoverizr.min.js.
And in my functions.php page, I added the following:
<?php // Add the hoverizr script function hoverizr_script() { wp_register_script('hoverizr', get_template_directory_uri() . '/js/jquery.hoverizr.min.js', array('jquery')); wp_enqueue_script('hoverizr'); } function hoverizr_in_footer(){ ?> <script type="text/javascript"> jQuery(window).load(function() { jQuery.noConflict(true); jQuery('.grayscale').hoverizr(); }); </script> <?php } add_action('wp_footer', 'hoverizr_in_footer'); add_action('wp_enqueue_scripts', 'hoverizr_script'); ?>
The code above loads the following into my header:
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js?ver=3.5.2'></script> <script type='text/javascript' src='https://localhost:8888/wp-content/themes/brian-ferrell-designs/js/jquery.hoverizr.min.js?ver=3.5.2'></script>
as well as the following into my footer:
<script type="text/javascript"> jQuery(window).load(function() { jQuery.noConflict(true); jQuery('.grayscale').hoverizr(); }); </script>
Finally, I have an image in the html that looks like this:
<img class="grayscale" src="https://localhost:8888/wp-content/themes/brian-ferrell-designs/images/thumbnail-1.jpg" alt="thumbnail-1" />
Once, I’ve loaded the page, I viewed the source and clicked on each of the links to make sure they were going to the proper location, and they are. So I have to imagine something is wrong in my jquery.hoverizr.min.js file. Do I have to do something with jQuery.noConflict on the actual hoverizr javascript file, too? Any help would be appreciated.
All hoverizr is supposed to do is make all of my images, with a class of “grayscale,” be grayscale until hovered over.
And I don’t know if this matters or not, but everything is currently running on the local server with MAMP.
- The topic ‘Javascript files (Hoverizr) load properly but won't work’ is closed to new replies.