Question

I am working on a website that has incorporated the jquery cycle plugin. It was all working fine until I tried to add the lightbox plugin. There seems to be an issue within the element that only allows the latter JS files to work. Any help would be great.

Here is the jquery code I am using in the element.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>
<!--  initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function () {
    var titles = ['Pentiction Summer Classic', 'Ryan Kesler', 'Trevor Linden'];
    $('.slideshow').after('<div id="navigation"><div id="nav"></div></div>').cycle({
        fx:     'fade', 
        timeout: 5000, 
        pager:  '#nav',
        pagerAnchorBuilder: function (index) {
            return '<a href="#">' + titles[index] + '</a>';
        }
    });
});
</script>

It works without any issue.

Here is the lightbox code in the element.

<script src="js/prototype.js" type="text/javascript"></script>
    <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
    <script src="js/lightbox.js" type="text/javascript"></script>

It also works alone without any issue. When I put them together, only the last one in the element works. The first one breaks.

I have checked the error console and this is the error:

Error: element.dispatchEvent is not a function
Source File: http://localhost:8888/rockymountainsports/rms/web/js/prototype.js
Line: 3972

That error does not appear when the cycle js is not there. Any ideas?

Thanks

Answer 1

I presume the error is due to the fact that you’re using 2 Javascript Frameworks, jQuery and Prototype.

This usually isn’t recommended unless you really need to use both frameworks.

I would consider using the jQuery alternative of lightbox or using jQuery in noConflict() mode. Something like:

var $j = jQuery.noConflict();

And then instead of using $("someelement") use $j("somelement");

But, my personal recommendation is to ditch one of the framworks and stick with just one.