Videobox / Lightbox conflict

[charter]

I have a web page and on the click of one button I wish to play a video using videobox.

On the click of a different button I wish to show an image in lightbox.

On the page works Videobox works with just the videobox code or the Lightbox works with just the lightbox code. Neither of them work with both codes.

I have all the code elements (including the css) for videobox in a folder called js

All the code elements for lightbox in a folder called js2

Does anyone know why this is happening and how I can get to use both from seperate buttons on the same webpage?

All help much appreciated

This is the code I have used for them on the webpage: (The top code is for the videobox followed by the lightbox code)

<link rel="stylesheet" href="../../js/videobox.css" type="text/css" media="screen" />
<script type="text/javascript" src="../../js/mootools.js"></script>
<script type="text/javascript" src="../../js/swfobject.js"></script>
<script type="text/javascript" src="../../js/videobox.js"></script>

<link rel="stylesheet" href="../../js2/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="../../js2/prototype.js"></script>
<script type="text/javascript" src="../../js2/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="../../js2/lightbox.js"></script>

[jscheuer1]

You can't use mootools and prototype on the same page. You can use other scripts to get a similar effect. There are probably at least a few ways you could go. I'd be inclined to scrap both scripts and use FancyBox:

http://fancybox.net/

Or LightWindow:

http://www.p51labs.com/lightwindow/

Both of the above do images and video. But there are tons of these 'box' scripts out there. You could use SlimBox:

http://www.digitalia.be/software/slimbox

instead of LightBox. Slimbox uses mootools so should work alongside of VideoBox.

Using Google you can probably come up with other options. One thing to remember though is that you generally cannot combine a script that uses one script library with another script that uses a different script library. One exception that I know of is jQuery. It may be combined with one other script library. There are probably one or two other exceptions. I think YUI can combine with other libraries.

[charter]

Many thanks jusheuer1

I've now tried Slimbox and is working fine alongside Mootools Video box.

For curiosity - just why does Mootools and prototype conflict?

Thanks again

[jscheuer1]

In javascript there's a concept known as global variable. A global variable is a variable that's available to all functions. Both Prototype and MooTools script libraries use $ as a global variable. When you try to use both of these script libraries on the same page, one or the other or both end up with a definition for $ that they cannot work with. Many other script libraries do this too. In jQuery it's possible to switch this to a local variable thereby allowing one other library to still use it globally. With the YUI script library I think it doesn't rely on $ for its global. Because of this, and even when there's no conflict, because of bandwidth and efficiency reasons, it's best to use only one script library for an entire site. They all can be used for pretty much the same things. But We were lucky here that there was a MooTools Lightbox already made for us.

More information than you needed perhaps. The bottom line is that both Prototype and MooTools need global control of the $ variable, and with both of them on one page, one or the other or both of them cannot get it.

[charter]

In javascript there's a concept known as global variable. A global variable is a variable that's available to all functions. Both Prototype and MooTools script libraries use $ as a global variable. When you try to use both of these script libraries on the same page, one or the other or both end up with a definition for $ that they cannot work with. Many other script libraries do this too. In jQuery it's possible to switch this to a local variable thereby allowing one other library to still use it globally. With the YUI script library I think it doesn't rely on $ for its global. Because of this, and even when there's no conflict, because of bandwidth and efficiency reasons, it's best to use only on script library for an entire site. They all can be used for pretty much the same things. But We were lucky here that there was a MooTools Lightbox already made for us.

More information than you needed perhaps. The bottom line is that both Prototype and MooTools need global control of the $ variable, and with both of them on one page, one or the other or both of them cannot get it.

Many Thanks John - Some if it is a bit techie for me but I now understand enough about the conflict.

[chaotisch]

Hi!
I hope someone reads tis after all this time...
I was having problem with videobox and lightbox so I went with Fancybox...
Now the galleries (I have one gallery of images and one of videos) are working but the video gallery doesn't open the videos but a blank page in the box.

Here I'm posting the code to see if someone could help me because I'm dwelling with this for three days now.


Jquery code:

<link rel="stylesheet" type="text/css" media="screen" href="jquery.fancybox.css" />

<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery.fancybox.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $(".various").fancybox({
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none'
    });
});

</script>

<script type="text/javascript" language="javascript">

$(document).ready(function(){
$('.fancybox').fancybox();
});
</script>

and how i'm refering to it:

<a class="various fancybox.iframe" href="<src="http://www.youtube.com/embed/WQNQU_EQy6I?rel=0" title="I'm floating"><img src="photos/floatings.png"></a>

Thanks for the help!