Go Back   Dreamweaver Club Forums > Hand Coders Forum > Javascript and JS frameworks
Register FAQ Members List Search Today's Posts Mark Forums Read

Thread Tools Display Modes
Old 11-08-2010, 12:09 AM   #1
Join Date: Oct 2010
Posts: 3
Default Multiple Javascript effects on one image


I was trying to apply 2 javascript effects on one image. First, I use this Jquery effect (http://www.tutorialhero.com/click-55...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/projec...ox2/#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?
e.mckenna730 is offline   Reply With Quote
Old 11-24-2010, 07:28 AM   #2
gentleone's Avatar
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837

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_...ther_Libraries or use the jQuery lightbox alternative Fancybox http://fancybox.net/.
gentleone is offline   Reply With Quote

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

All times are GMT. The time now is 09:12 PM.

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com