Open HTML page in lightbox

  • Hi Grollaz, I use floatbox which is a lightbox clone. I can click on an image/icon in my tour and it will open a any content within the floatbox.

    You can see it in action here - just click on the Google map icon

    Here is the script I use.

    Place in your tour.html in the head section:

    <link type="text/css" rel="stylesheet" href="http://http://www.YourDomain.com/floatbox5.7/floatbox.css" />
    <script type="text/javascript" src="http://http://www.YourDomain.com/floatbox5.7/floatbox.js"></script>
    <script type="text/javascript" src="http://http://www.YourDomain.com/floatbox5.7/options.js"></script>

    <script>
    function lightboxme(url, loptions) {

    fb.start(url,loptions);

    }

    function rescroll() {
    $('html').css({overflow:'auto'});
    }

    function lightbox_noscroll(url, loptions) {

    $('html').css({overflow:'hidden'});
    fb.start(url+'&'+$('#Form2').serialize(),loptions);

    }
    function resizefb() {

    fb.resize();

    }

    //this one is to check if it´s not working that the call is being made to the right place

    function checkcall(){

    alert('got it!');

    }
    </script>

    in xml
    this sets up the clickable image and associated target link

    <!-- set optional skin logo url -->
    <layer name="skin_logo" url="YourImage.jpg" scale="1.00" align="lefttop" onclick="js(lightboxme('http://www.YourTargetURL.com','type:video width:1050 height:710 sameBox:true'));" />


    Floatbox is not free but you can try it for free no problem. I am sure there are other similar lightbox options out there for free and you just need to make the js call to it.

    Hope it helps *thumbsup*

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!