Is there something I have to do to make scriptaculous lightbox and video lightbox play nice together

Q: I had a video using video lightbox on a page and it was working fine.
I then added some images using visual lightbox. Now the visual lightbox
photos work, but the video no longer works properly; it is just going
straight to the youtube page rather than the lightbox popup.

Video LB was on the page first. Then I added visual LB. At first, I had
both video and visual LB pointing to the same "engine" and "data"
directories & I made sure that the respective files for each were in
those folders. But when video LB quit working, then I moved all of the
visual LB stuff to another folder and updated all of the links in my
HTML. But it still didn't work. So is there something I have to do to
make those two play nice together?

A: To install VisualLightBox and Video LightBox galleries
on the same page, you should:

- set Video LightBox HEAD section before VisualLightBox HEAD section;
- remove the following line from VisualLightBox HEAD section:

<script src="engine/js/jquery.min.js" type="text/javascript"></script>



So you'll have:

<head>
         ...
                <!-- Start VideoLightBox.com HEAD section -->
                <link rel="stylesheet" href="video/engine/css/videolightbox.css" type="text/css" />
                <style type="text/css">#videogallery a#videolb{display:none}</style>
                <link rel="stylesheet" type="text/css" href="video/engine/css/overlay-minimal.css"/>
                <script src="video/engine/js/jquery.tools.min.js" type="text/javascript"></script>
                <script src="video/engine/js/swfobject.js" type="text/javascript"></script>
                <!-- make all links with the 'rel' attribute open overlays -->
                <script src="video/engine/js/videolightbox.js" type="text/javascript"></script>
                <!-- End VideoLightBox.com HEAD section -->

                
                <!-- Start VisualLightBox.com HEAD section -->
                <link rel="stylesheet" href="visual/engine/css/vlightbox2.css" type="text/css" />
                <link rel="stylesheet" href="visual/engine/css/visuallightbox.css" type="text/css" media="screen" />
        
                <script src="visual/engine/js/visuallightbox.js" type="text/javascript"></script>
                <script src="visual/engine/js/vlbdata.js" type="text/javascript"></script>
                <!-- End VisualLightBox.com HEAD section -->
          ...
    </head>

Recent Questions »

Related