You probably won’t need to know any javascript to fix this.
I just looked at your site, and it’s throwing a javascript error:
ReferenceError: Validator is not defined
http://ktfphotos.ca/blog/
Line 163
With javascript, if you have one error like that, other things, like Lightbox, for example, will often (usually) fail to work. so fixing this error is the first step.
The next step is to check to make sure all the javascript libraries you need are indeed loaded. It looks like JQuery is loading, but I’m not seeing an entry for Lightbox if it’s supposed to have its own library.
What I would try is to compare the javascript libraries loaded for your custom theme and those loaded for 2010, which works. The ones I see loaded for your custom theme are:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=3.4.2'></script>
<script type='text/javascript' src='http://ktfphotos.ca/wp-content/themes/BLANK-Theme/js/slides.min.jquery.js?ver=3.4.2'></script>
<script type='text/javascript' src='http://ktfphotos.ca/wp-includes/js/comment-reply.js?ver=3.4.2'></script>
When you load the site with 2010, see if something is missing. Adding the missing library will be an easy fix.
Let us know what you discover.
Thanks alot for reply.
For that error “ReferenceError: Validator is not defined”, How would I go about troubleshooting that?
I see what you mean how the lightbox loading. When I use the 2011 (I said 2010 but its actually the 2011) and view source I am seeing:
<!– Lightbox Plus v2.3 – 2011.08.11 – Message: 0–>
<script type=”text/javascript”>
jQuery(document).ready(function($){
$(“a[rel*=lightbox]”).colorbox({opacity:0.8});
});
as well as:
<script type=’text/javascript’ src=’http://ktfphotos.ca/wp-content/plugins/lightbox-plus/js/jquery.colorbox-min.js?ver=1.3.17.2′></script>
Should I load the Lightbox library manually in the functions.php file? The blog uses a different page template than the other pages of the website, could that have something to do with it?
I think you found the answer.
This code block:
<!-- Lightbox Plus v2.3 - 2011.08.11 - Message: 0-->
<script type="text/javascript">
jQuery(document).ready(function($){
$("a[rel*=lightbox]").colorbox({opacity:0.8});
});
is a non-conflict JQuery command setting the opacity of all the lightbox links with a class of “colorbox” to 0.8. You’re going to need that in your custom theme’s <head> section.
The reason you get the “validator not defined” is that the library that contains it is not being loaded. That’s this part:
<script type='text/javascript' src='http://ktfphotos.ca/wp-content/plugins/lightbox-plus/js/jquery.colorbox-min.js?ver=1.3.17.2'></script>
What you need to do is make sure the correct library you identified by looking at twenty-eleven is loaded in your custom theme. You can hard-code it in the overall_header.html file for the theme, but the correct way to add it is to use the wp_enqueue_script function from WordPress in your functions.php as you said. You’ll just need to get the plugins url using the plugins_url() function to get the path to the jquery.colorbox-min.js file.
I added:
<!– Lightbox Plus v2.3 – 2011.08.11 – Message: 0–>
<script type=”text/javascript”>
jQuery(document).ready(function($){
$(“a[rel*=lightbox]”).colorbox({opacity:0.8});
});
to the header and when I view source it is loading. I’m trying to load the script to the functions file, but I am getting an error and its breaking the whole site. I already have this in the functions file:
if ( !is_admin() ) {
wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’, (“http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js”), false);
wp_enqueue_script(‘jquery’);
wp_register_script(‘myscript’ , get_bloginfo(‘template_directory’) . “/js/slides.min.jquery.js”);
wp_enqueue_script(‘myscript’);
}
I thought that I could copy this syntax, but it didnt work. How can I load the script?
What’s the error message you’re getting?
I think the script you need to load is /wp-content/plugins/lightbox-plus/js/jquery.colorbox-min.js rather than what you have in your code if you’re trying to fix the lightbox issue.
Is there a particular reason you’re including the base JQuery library in your code?
I dont know what the message I was getting but I was due to a syntax error in my functions.php file.
I added this to functions.php:
wp_register_script(‘jquery’, (“/wp-content/plugins/lightbox-plus/js/jquery.colorbox-min.js”), false);
wp_enqueue_script(‘jquery’);
This isnt breaking the site like my earlier attempt to load it, but when I view source its not loading.
I’m not sure what you mean by “including the base Jquery library in your code”. This was some code that I got with the starter blank template I used, but I though I needed that in order to load the slides.js plugin I’m using on the homepage.
It sounds like I didn’t explain very well. I think what you’re going to need is something like the following in your functions.php to load the lightbox script:
function load_the_script(){
wp_enqueue_script('jquery.colorbox-min', plugins_url() . '/lightbox-plus/js/jquery.colorbox-min.js');
}
add_action('wp_enqueue_scripts', 'load_the_script');
What I meant about the base jquery library is that I don’t think you need to include it because it was already listed in your source code.
Give that a try and see if the jquery.colorbox-min.js script shows up in your source with the correct path.
I added the code you sent me, and its loading, but the image is not getting the lightbox popup effect. What else could be going on?
http://www.ktfphotos.ca/blog
You’re still getting a couple of javascript errors which are most likely the reason it’s not working.
It looks like you have an extra “<script>” tag hard-coded above the commented line:
<script>
<!-- Lightbox Plus v2.3 - 2011.08.11 - Message: 0-->
<script type="text/javascript">
jQuery(document).ready(function($){
$("a[rel*=lightbox]").colorbox({opacity:0.8});
});
</script>
should be:
<!-- Lightbox Plus v2.3 - 2011.08.11 - Message: 0-->
<script type="text/javascript">
jQuery(document).ready(function($){
$("a[rel*=lightbox]").colorbox({opacity:0.8});
});
</script>
Try removing that extra script tag and re-test. You’re still getting a “Validator not defined” error from that contact form, but that could be because the javascript is breaking up above it.
By the way, I noticed that you have your email address in clear text on your site. There are spammers that still use ‘bots to comb the web for email addresses that way, so it’s a good idea not to do that and just use a good contact form.
Deleting that extra <script> tag did it, everything is working now! Wow, that sure felt like the deep end for me! Thanks alot man!! 🙂
Sweet! I’m glad you got it working. It probably felt more like the deep end than it needed to, but I didn’t know how much you knew, so I pointed you to the resources to fix it instead of just giving you the code in the first place.
