Results 1 to 6 of 6

Thread: Videobox / Lightbox conflict

  1. #1
    Join Date
    May 2011
    Location
    Manchester UK
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Videobox / Lightbox conflict

    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)

    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>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,025
    Thanks
    44
    Thanked 3,210 Times in 3,172 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 05-13-2011 at 07:01 AM. Reason: add options
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    May 2011
    Location
    Manchester UK
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,025
    Thanks
    44
    Thanked 3,210 Times in 3,172 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 05-13-2011 at 02:35 PM. Reason: English Usage
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    charter (05-13-2011)

  6. #5
    Join Date
    May 2011
    Location
    Manchester UK
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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.

  7. #6
    Join Date
    Apr 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default fancybox+ youtube embed blank page

    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:

    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:

    Code:
    <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!

Bookmarks

Posting Permissions

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