View Full Version : Multiple Javascript effects on one image

11-08-2010, 01:09 AM

I was trying to apply 2 javascript effects on one image. First, I use this Jquery effect (http://www.tutorialhero.com/click-55165-jquery_fade_in_fade_out_effect.php) on the image. It works like it should until I put in the light box effect (this is the one I am using http://www.huddletogether.com/projects/lightbox2/#download). The lightbox also works, it just depends on which order I put them in the code on which one will come through.

I am relatively new to javascript and I am learning as I go along. Below I inserted part of my code geared towards these two effects. I know I have everything else in the code correct (the body) because they work individually, just not put together (or maybe I have to put a line of code in the body to enable it to work?). Essentially, I want the image to be dulled out when the visitor opens the page, get brighter when they roll over it, then trigger the lightbox when they click on it.

The easy option would be to use an image swap for the dull/bright mouseOver effect; however, I like the way it is done by tutorialhero.


<script type="text/javascript" src="javascript/lightbox/prototype.js"></script>
<script type="text/javascript" src="javascript/lightbox/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="javascript/lightbox/lightbox.js"></script>
<script type="text/javascript" src="javascript/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="javascript/js/custom.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />\
<link href="css/aloft_about.css" rel="stylesheet" type="text/css" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />

The first three scripts are for the light box and the second two are for the rollover. The style sheets are as follows- lightbox, about page layout, rollover effect. Is it possible to have both these effects on the same image?

11-24-2010, 08:28 AM
You use two javascript libraries (prototype & jQuery) on the same page which causes the conflict. Either use jQuery.noconflict() http://docs.jquery.com/Using_jQuery_with_Other_Libraries or use the jQuery lightbox alternative Fancybox http://fancybox.net/.