PDA

View Full Version : jQuery Prototype conflict



Isoparm
07-19-2008, 09:03 PM
Hi, I've been trying to get the jQuery galleria plugin to co-exist with a prototype plugin, but can't get it to work. I can get one or the other, but not both. If anyone could tell me what/how the code needs to be changed I would be really, really appreciative. (Seems like it is an issue with the $ variable, but I don't know what to change) The code is:

<head>
<script type="text/javascript" src="/js/prototype.js""></script>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.galleria.js"></script>
<link href="/css/galleria.css" rel="stylesheet" type="text/css" media="screen">

<script type="text/javascript">
jQuery(function($) {
$('.gallery_demo_unstyled').addClass('gallery_demo');
$('.nav').css('display','none'); // hides the nav initially

$('ul.gallery_demo').galleria({
history : false,
clickNext : false,
insert : undefined,
onImage : function() { $('.nav').css('display','block'); }
});
});
</script>

<script type="text/javascript">
defaultId = 'a';

// sliders, drawers
var freeDrawers = function(container) {
return function() {
if (!AC.Detector.isIEStrict()) {
$(container).setStyle({height: 'auto'});
}
}
}

var createSlider = function(container, drawers, triggerEvent) {
var sliders = new AC.SlidingBureau($(container));
for (var d = 0; d < drawers.length; d++) {
var handle = drawers[d].getElementsByClassName('drawer-handle')[0];
var content = drawers[d].getElementsByClassName('drawer-content')[0];
var drawer = new AC.SlidingDrawer(content, handle, sliders, {
triggerEvent: 'mouseover',
triggerDelay: 120});
sliders.addDrawer(drawer);

var title = 'Window Shade - ' + drawer.handle.innerHTML;
var properties = {sprop3: title};
AC.Tracking.trackLinksWithin(content, function() {return true;} , title, properties);
}
setTimeout(freeDrawers(container), 1000);

return sliders;
}

Event.observe(window, 'load', function() {
var triggerEvent = 'mouseover';
createSlider('leftdrawers', $$("#leftdrawers .drawers>li"), triggerEvent);
});

</script>

</head>

NancyJ
07-19-2008, 10:43 PM
the jquery calls needs to use jquery instead of $ - which is overwritten by prototype but IMHO you'd be better finding/writing a jquery plugin to replace the prototype.

Isoparm
07-19-2008, 11:02 PM
So would I do something like this:

CHANGE:
$('.gallery_demo_unstyled').addClass('gallery_demo');

TO:
jQuery('.gallery_demo_unstyled').addClass('gallery_demo');


Would I also need to replace every instance of $ in the jquery.galleria.js, and jquery.js files?

A1ien51
07-20-2008, 01:41 PM
I think you should read this: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Eric