How to make jquery popup window components work successfully on the same page with Video Lightbox

Q: We have purchased the business version of both Visual and Video Lightbox.
We are attempting to place both a video and a photo gallery on the same page;
the photo gallery works fine and comes up with the overlay, but the video now
appears in a separate window.

Prior to installing Visual Lightbox, the video overlay worked fine.
Do the two programs compete with each other?
We need to find out how to make these two components work successfully on the same page.
Thank you for your prompt response.

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