Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    jQuery Prototype conflict

    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>

  • #2
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    I think you should read this: http://docs.jquery.com/Using_jQuery_...ther_Libraries

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •