Lightbox and Tour for Ipad  

Share your tips and tricks here or get help with any Autopano Tour problem!
No bug reports (of any kind) in this forum!
no avatar
frank007
Member
 
Posts: 109
Joined: Sat Oct 02, 2010 11:21 am

Lightbox and Tour for Ipad

by frank007 » Mon Jan 17, 2011 10:37 am

Hi, Folks,

after producing a Tour with Autopano Tour pro I would like to integrate this in a Lightbox on a webpage. But to be honest: I have no idea how to do this...

With a "normal" swf file it is no problem for me. But with the files of APT? Hmmm.

I always want the Tour to be shown in a Lightbox-Popup with 100% W and 100% H.

Thank you for your help!

Regards!

Frank

no avatar
lacupuika
Member
 
Posts: 16
Joined: Tue Feb 21, 2012 4:23 pm

by lacupuika » Fri Feb 24, 2012 1:33 pm

I don't know about lightbox, but here is code that I used for colorbox.

<head>

<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:800, innerHeight:600});
$(".iframe").colorbox({iframe:true, width:"860", height:"600"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});

//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>
</head>
<body>

<div id="yourDIVid"><a class='iframe' href="yout.html" title="your title"><img src="image.png" alt="something" title="Your Title"/></a></div>

</body>

I use the "iframe" class for <a> tag, but there is other options as well. You can find info about them in colorbox webpage - http://jacklmoore.com/colorbox/

And of course colorbox CSS styling:)


Return to Archive

Who is online

Users browsing this forum: No registered users and 2 guests