Javascript not applying to my page

JavaScript
1

I installed a jquery plugin but it does not seem to show up on my page, anyone know why?
my page:Imagery Gallery
the plugin:
Catch My Fame » jQuery Before/After Plugin

2

You’ll need to rearrange the order of your scripts. Currently you’re including the plugins before you include jQuery itself.

I see you’re also including both the regular and minified version of the plugin script, you should only use the uncompressed version for development as you can often save quite a bit in filesize with the minified version.

Change the code in your header:


<script type="text/javascript" src="/jquery.beforeafter-1.3.js"></script> 
<script type="text/javascript" src="/jquery.beforeafter-1.3.min.js"></script> 
<script type="text/javascript" src="/jquery-1.6.1.min.js"></script> 
<script type="text/javascript" src="/jquery-ui-1.8.13.custom.min.js"></script>

To this:


<script type="text/javascript" src="/jquery-1.6.1.min.js"></script> 
<script type="text/javascript" src="/jquery-ui-1.8.13.custom.min.js"></script> 
<script type="text/javascript" src="/jquery.beforeafter-1.3.min.js"></script>
3

Its still not recognizing the JavaScript! ? ? ?

4

Maybe there’s a conflict with Mootools? It might be worth trying jQuery NoConflict.

5

I will give that a try

6

I tried adding the no conflict, not sure if I did it correctly:
Imagery Gallery

7

I’m beginning to think that because the page already has so much other js that it’s messing with the plugin ? ? ?

8

just tried it on a completely blank html document and it worked perfectly.

9

I’m not sure, I can’t see it in there. BUT: I’ve just noticed that the link to this file:

<script type="text/javascript" src="/js/jquery.beforeafter-1.3.min.js"></script>

leads not to the jQuery file, but to an html page, so you need to fix that first of all.

10

oh im just cleaning up the code a bit and trying a few different things. I will post my results soon.

11

And they cause 404 errors.

Best make sure the files are in the correct location.

12

I got it to work!! however I still have a small problem. It disables the lightbox function on my website.
Imagery Gallery
Page with Lightbox:SAR 101

13

At the moment you have your Lytebox.js script commented out which is why the lightbox isn’t working.

I would suggest uncommenting the lines in the header line by line until you get an error (which will likely be around the mootools)

If it is indeed the mootools library causing the error, it will be worth trying the jQuery.noConflict method again.

To make sure the jQuery.noConflict will work you’d need to modify the 3 lines near the top to say:

<script type="text/javascript" src="/jquery-1.6.1.min.js"></script> 
<script type="text/javascript" src="/jquery-ui-1.8.13.custom.min.js"></script> 
<script type="text/javascript" src="/jquery.beforeafter-1.3.min.js"></script>
<script type="text/javascript"> 
	jQuery.noConflict();
	jQuery(function(){
		jQuery('#bf_container').beforeAfter();
	});
</script>