Colorbox/Lightbox from tour?

[lacupuika]

Colorbox/Lightbox from tour?

by lacupuika » Sat Feb 25, 2012 12:07 pm

Hello to everyone!:)

Such a dumb question - is it possible to open Colorbox/Lightbox or some other "box" using button from tour?

I made a "plugin" for button, and can open different file types, but don't know how to open in these boxes.

<plugin name="contact"
url=""
width="80" height="prop"
keep="true"
align="bottom"
x="0"
y="5"
onclick="set(fullscreen, false);js(popup(file, width, height));"
onhover="showtext('test');"

Thank you in advance!:)

[lacupuika]

by lacupuika » Sat Feb 25, 2012 2:41 pm

Found soulution!!!!

Information source http://www.flashxml.net/adding-lightbox-to-flash.html

To call the Lightbox gallery, you need to inculde this plugin in your tours XML
<plugin name="yourplugin name"
url="your url"
alturl="builddata/graphics/menu/menu1.png"
align="your align"
onclick="set(fullscreen, false);js(GroupDelegate(img1));"
onhover="showtext('your text');"
/>

For single image use this JS function js(LightboxDelegate(yourimge.jpg,youtcaption)

[klausesser]

by klausesser » Sat Feb 25, 2012 3:23 pm

Found soulution!!!!

Information source http://www.flashxml.net/adding-lightbox-to-flash.html

To call the Lightbox gallery, you need to inculde this plugin in your tours XML
<plugin name="yourplugin name"
url="your url"
alturl="builddata/graphics/menu/menu1.png"
align="your align"
onclick="set(fullscreen, false);js(GroupDelegate(img1));"
onhover="showtext('your text');"
/>

For single image use this JS function js(LightboxDelegate(yourimge.jpg,youtcaption)

Hi!

Can you show an example?

best, Klaus

[lacupuika]

by lacupuika » Sat Feb 25, 2012 5:34 pm

Found soulution!!!!

Information source http://www.flashxml.net/adding-lightbox-to-flash.html

To call the Lightbox gallery, you need to inculde this plugin in your tours XML
<plugin name="yourplugin name"
url="your url"
alturl="builddata/graphics/menu/menu1.png"
align="your align"
onclick="set(fullscreen, false);js(GroupDelegate(img1));"
onhover="showtext('your text');"
/>

For single image use this JS function js(LightboxDelegate(yourimge.jpg,youtcaption)

Hi!

Can you show an example?

best, Klaus

Yes I can:) The gallery button isn't very nice, but will do for example:) You can use this JS function for the hotspots as well.

Here is link to my example http://www.avpakalpojumi.lv/test/lightbox

Haven't styled the lightbox yet as well:)

Last edited by lacupuika on Sat Feb 25, 2012 5:35 pm, edited 1 time in total.

[mediavets]

by mediavets » Sat Feb 25, 2012 5:50 pm

Here is link to my example http://www.avpakalpojumi.lv/test/lightbox

How do you dismiss/close the gallery once it's opened?

[lacupuika]

by lacupuika » Sat Feb 25, 2012 7:29 pm

Here is link to my example http://www.avpakalpojumi.lv/test/lightbox

How do you dismiss/close the gallery once it's opened?

[mediavets]

by mediavets » Sat Feb 25, 2012 11:18 pm

I don't see that Close link - when viewing with FireFox 4.0.1 on Windows XP/32 with SP3.

Nor does clicking outside the Gallery frame close the box.

Also one cannot display the gallery and stay in Fullscreen, invoking the gallery takes you out of fullscreen mode.

Last edited by mediavets on Sat Feb 25, 2012 11:23 pm, edited 1 time in total.

[Destiny]

by Destiny » Sat Feb 25, 2012 11:31 pm

Hi... Really interesting subject.. Right at the heart to what I am doing.. I tried Lightbox weeks ago but I found it to be too restrictive, but so far I have had heaps of success... I need to try out Colourbox too.. See what can be done with that..

http://www.destinyvirtualtours.com/AntiqueChineeseScreen/virtualtour.html

Testing ground with Grid VRs + interactive tests hotshots...


http://www.destinyvirtualtours.com/ShadowboxText/index.html

http://www.destinyvirtualtours.com/ShadowBoxImage/index.html

http://www.destinyvirtualtours.com/ShadowBox/index.html

http://www.destinyvirtualtours.com/ShadowboxSlideShow/index.html

http://www.destinyvirtualtours.com/ShadowboxFlippingBook/index.html

http://www.destinyvirtualtours.com/ShadowBoxFlatPano/index.html

http://www.destinyvirtualtours.com/ShadowBox3DRotate/index.html


I will try your process out and see what I can do with it.. Sounds exciting.. Love it..Well done..

Destiny...

Found soulution!!!!

Information source http://www.flashxml.net/adding-lightbox-to-flash.html

To call the Lightbox gallery, you need to inculde this plugin in your tours XML
<plugin name="yourplugin name"
url="your url"
alturl="builddata/graphics/menu/menu1.png"
align="your align"
onclick="set(fullscreen, false);js(GroupDelegate(img1));"
onhover="showtext('your text');"
/>

For single image use this JS function js(LightboxDelegate(yourimge.jpg,youtcaption)

Last edited by Destiny on Sun Feb 26, 2012 2:49 am, edited 1 time in total.

[lacupuika]

by lacupuika » Sun Feb 26, 2012 10:01 am

I don't see that Close link - when viewing with FireFox 4.0.1 on Windows XP/32 with SP3.

Nor does clicking outside the Gallery frame close the box.

Also one cannot display the gallery and stay in Fullscreen, invoking the gallery takes you out of fullscreen mode.

The problem might be FireFox 4.0.1. Because everything works fine in 10.0.2 and Safari 5.1.3 (Mac OS X 10.7.3) and even on IE9 (Windows 7 on Parallels Desktop). Haven't tried Chrome yet.

Of course you can't stay in fullscreen mode when you open something, that is not embedded in the tour. In this case you call Lightbox gallery via JS. Therefore I always publish my tours to occupy 100% of the page:)

[lacupuika]

by lacupuika » Sun Feb 26, 2012 10:22 am

Hi... Really interesting subject.. Right at the heart to what I am doing.. I tried Lightbox weeks ago but I found it to be too restrictive, but so far I have had heaps of success... I need to try out Colourbox too.. See what can be done with that..

http://www.destinyvirtualtours.com/AntiqueChineeseScreen/virtualtour.html

Testing ground with Grid VRs + interactive tests hotshots...


http://www.destinyvirtualtours.com/ShadowboxText/index.html

http://www.destinyvirtualtours.com/ShadowBoxImage/index.html

http://www.destinyvirtualtours.com/ShadowBox/index.html

http://www.destinyvirtualtours.com/ShadowboxSlideShow/index.html

http://www.destinyvirtualtours.com/ShadowboxFlippingBook/index.html

http://www.destinyvirtualtours.com/ShadowBoxFlatPano/index.html

http://www.destinyvirtualtours.com/ShadowBox3DRotate/index.html


I will try your process out and see what I can do with it.. Sounds exciting.. Love it..Well done..

Destiny...

Hello!:)

Nice!!! I just found out, that this thing don't work on Chrome (Lightbox). Will try Shadowbox instead. I need this, because friend of mine opened nice restaurant and he wants to use virtual tour as his place webpage:) Tonight I will shoot it, tomorrow create tour and hopefully the day after tomorrow will publish it:)

[lumelix]

by lumelix » Sun Feb 26, 2012 2:28 pm

Hmmmm ...
I don't see the close link in Firefox 10.0.2 nor in iE 8.0.76... (win7 x64, actual flash, JS active)
It flashes up for a millisecond and then it's not visible again.
In Safari 5.1.2, I could not open the gallery.

[mediavets]

by mediavets » Sun Feb 26, 2012 3:22 pm

I don't see that Close link - when viewing with FireFox 4.0.1 on Windows XP/32 with SP3.

Nor does clicking outside the Gallery frame close the box.

Also one cannot display the gallery and stay in Fullscreen, invoking the gallery takes you out of fullscreen mode.

The problem might be FireFox 4.0.1. Because everything works fine in 10.0.2 and Safari 5.1.3 (Mac OS X 10.7.3) and even on IE9 (Windows 7 on Parallels Desktop). Haven't tried Chrome yet.

Just the same for me with Firefox 10.0.2 as with 4.0.1 on Windows XP/32 with SP3 - no Close link and clicking outside the Gallery frame does not close the Gallery.

I hope you manage to find a solution that works with all major browsers on all common OS.

[lacupuika]

by lacupuika » Sun Feb 26, 2012 4:08 pm

I really don't know where is the problem... I sent the same link to my friends - everything works for them...

I even recorded video, where I am opening the same link in FF 10.0.2 and Safari 5.1.3 Couldn't record when Desktop Parallels is launched - it is too much for my hardware:(

http://www.youtube.com/watch?v=bIwBKM7AfhI

P.S. The same problem is in Ubuntu via FF.. but I could close gallery using ESC button.

Last edited by lacupuika on Sun Feb 26, 2012 4:20 pm, edited 1 time in total.

[lumelix]

by lumelix » Sun Feb 26, 2012 8:24 pm

There must be something inside the lightbox plugin, because the pictureshow self is running with next/prev buttons.
It's only this bottom line of lightbox, witch will not shown properly.
To close the lightbox, I can use ESC.

In iE 8.0 I get folowing error message:
Meldung: 'JSON' ist undefiniert
Zeile: 418
Zeichen: 6
Code: 0
URI: http://www.avpakalpojumi.lv/test/lightbox/

When I check it with firebug in FF, for this navi bottom line there is a div "imageDataContainer" with opacity: 0.999999;
This could make problems with some browsers and versions (see first image below).
As you can see, in this moment, the navi bar is not shown. But when I use "investigate object", it is shown (second image below).
So perhaps it is a issue with floating, hover, opacity or the z-index of this div container.


But it is a nice bathroom - like Ali Baba and the 1000 ...

Last edited by lumelix on Sun Feb 26, 2012 8:46 pm, edited 1 time in total.

[lacupuika]

by lacupuika » Sun Feb 26, 2012 9:38 pm

There must be something inside the lightbox plugin, because the pictureshow self is running with next/prev buttons.
It's only this bottom line of lightbox, witch will not shown properly.
To close the lightbox, I can use ESC.

In iE 8.0 I get folowing error message:
Meldung: 'JSON' ist undefiniert
Zeile: 418
Zeichen: 6
Code: 0
URI: http://www.avpakalpojumi.lv/test/lightbox/

When I check it with firebug in FF, for this navi bottom line there is a div "imageDataContainer" with opacity: 0.999999;
This could make problems with some browsers and versions (see first image below).
As you can see, in this moment, the navi bar is not shown. But when I use "investigate object", it is shown (second image below).
So perhaps it is a issue with floating, hover, opacity or the z-index of this div container.


But it is a nice bathroom - like Ali Baba and the 1000 ...

Hmm.. I think the problem might be with Lightbox styling and as you say with z-index. I will play around with css tomorrow, but it seams so, that I will use colorbox.. Tried shadowbox, but somehow didn't manage to get it work. Maybe Destiny will teach us his magic;)

Tomorrow I will talk about it with one AS3/2 and JS guru.

P.S. It is not bathroom:D It is VIP zone in one sport club:) http://www.jokerklubs.lv and here is full tour http://www.avpakalpojumi.lv/tuures/jokerklubs

Last edited by lacupuika on Sun Feb 26, 2012 9:42 pm, edited 1 time in total.

[lacupuika]

by lacupuika » Mon Feb 27, 2012 9:18 pm

Today I talked with this guy - AS an JS guru and he told me, that there might be two problems:

1. Lack of doctype in tour html.
2. Z-index

As the matter of fact - the first problem causes the second one:( And what is more - when I insert appropriate doctype, then contents of html collapse

[lacupuika]

by lacupuika » Fri Mar 02, 2012 9:36 pm

Finally!!!

Here is full code to get Colorbox working on every browser and every OS.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Virtual Tour generated by Panotour</title>
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>

<link href="layout.css" rel="stylesheet" type="text/css" />

<link media="screen" rel="stylesheet" href="colorbox.css" />
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="colorbox/jquery.colorbox.js"></script>

</head>
<body>
<script src="swfobject/swfkrpano.js"></script>
<div id="container">
<div id="panoDIV" style="height:100%;">
<script>
embedpano({target:"panoDIV",swf:"$(SWF)",width:"100%",height:"100%",allowFullScreen:"true"});
</script>
<noscript>
<div id="tour">
<object data="$(SWF)">
<param name="wmode" value="transparent" />
<param name="allowscriptaccess" value="always">
<embed src="$(SWF)" allowFullScreen="true" vmode="transparent" />

</object>
</div>
</noscript>
</div>
</div>

<script type="text/javascript">
function LaunchColorbox(url, caption){
$.colorbox({href:url, title:caption, width:"80%", height:"80%",iframe:true});
}
</script>
</body>
</html>


Most important thing - I edited swfkrpano.js - row 33 - add this - f.addParam("wmode","transparent");

However, I had to modify colorbox.css as well.

If anyone wants PTP theme with css, js and html - post me, and I will send.

Here is example http://www.avpakalpojumi.lv/tuures/eksportbars/

Best regards;)

Last edited by lacupuika on Fri Mar 02, 2012 9:37 pm, edited 1 time in total.

[mediavets]

by mediavets » Fri Mar 02, 2012 11:27 pm

Here is example http://www.avpakalpojumi.lv/tuures/eksportbars/

The Gallery works well for me - but the menu and drinks menu buttons don't seem to work properly.

[lacupuika]

by lacupuika » Sat Mar 03, 2012 7:22 am

Here is example http://www.avpakalpojumi.lv/tuures/eksportbars/

The Gallery works well for me - but the menu and drinks menu buttons don't seem to work properly.

It is because the owner hasn't sent me menus yet For now there is only links to non existing html

Last edited by lacupuika on Sat Mar 03, 2012 7:24 am, edited 1 time in total.

[eben]

by eben » Wed May 15, 2013 7:10 am

Finally!!!

Here is full code to get Colorbox working on every browser and every OS.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Virtual Tour generated by Panotour</title>
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>

<link href="layout.css" rel="stylesheet" type="text/css" />

<link media="screen" rel="stylesheet" href="colorbox.css" />
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="colorbox/jquery.colorbox.js"></script>

</head>
<body>
<script src="swfobject/swfkrpano.js"></script>
<div id="container">
<div id="panoDIV" style="height:100%;">
<script>
embedpano({target:"panoDIV",swf:"$(SWF)",width:"100%",height:"100%",allowFullScreen:"true"});
</script>
<noscript>
<div id="tour">
<object data="$(SWF)">
<param name="wmode" value="transparent" />
<param name="allowscriptaccess" value="always">
<embed src="$(SWF)" allowFullScreen="true" vmode="transparent" />

</object>
</div>
</noscript>
</div>
</div>

<script type="text/javascript">
function LaunchColorbox(url, caption){
$.colorbox({href:url, title:caption, width:"80%", height:"80%",iframe:true});
}
</script>
</body>
</html>


Most important thing - I edited swfkrpano.js - row 33 - add this - f.addParam("wmode","transparent");

However, I had to modify colorbox.css as well.

If anyone wants PTP theme with css, js and html - post me, and I will send.

Here is example http://www.avpakalpojumi.lv/tuures/eksportbars/

Best regards;)

I have been searching all day looking for the information in this thread. Thanks for adding your code. A few questions? What changes did you make to the virtualtour0.xml file to make the colorbox link to a hotspot?

I’m trying to load a website page inside a colorbox or any other lightbox type plugin in a drupal site by clicking on a hotsport in a PTP tour. However It's not working yet...

[Destiny]

by Destiny » Wed May 15, 2013 11:25 am

Sorry, I haven't been keeping tabs with this thread.... Always get confused when someone talks to a guru.. with no results..

Anyway.. this is a colourbox test.. I will make up demo lightbox when I get time...

You need to test this in different browsers... The skin will depend on the css used...

http://members.westnet.com.au/dps/colorboxtest/virtualtour.html

Destiny...

[eben]

by eben » Wed May 15, 2013 11:53 am

Hi Destiny

That’s grate, exactly the effect I have been trying to create. Can you share how you did it? The code, both for embedding the pano and what you need to add to the virtualtour0.xml, etc. Thanks in advance.

Eben

[eben]

by eben » Thu May 16, 2013 11:11 am

Thanks Destiny

I was able to get the colorbox to load using Lacupuika’s code and your xml JavaScrip call. However I now have the small problem that the page I’m trying to open in the colorbox will not load as it adds the pano page location onto the page address url. I’m shore the fix for this is in the documentation for Krpano but I can’t find it

Here is my JS calling code on my test pano from the xml file:

Code: Select all

<hotspot name="spot0"
         onclick="set(fullscreen, false);js(LaunchColorbox('http://junshanclimber.com', climbing));"
         url="virtualtourdata/graphics/spots/spot0.png"
         onhover="showtext(opencolorbox);"
         ath="-19.7688"
         atv="2.49342"/>

I uploaded the test pano to: http://zenquest.co/testpano/

Instead of loading http://junshanclimber.com it tries to load: testpano http junshanclimber com…

The next question is how did you get it working on iPad, iPhone, etc? My code loads ok on my mac with FF, Safari, Opera but when I switch the developer menu in Safari to ipad the pano dose not load at all. However I see in Destiny’s example the html5 is working perfectly in iPhone or iPad mode on Safari.

Here is the content of my modified html file from the example at: http://zenquest.co/testpano/

Code: Select all

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Virtual Tour generated by Panotour</title>
  <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <meta name="apple-mobile-web-app-capable" content="yes"/>
 
 
  <style type="text/css">
    @media only screen and (min-device-width: 800px) { html { overflow:hidden; } }
    * { padding: 0; margin: 0; }
    html { height: 100%; }
    body { height: 100%; overflow:hidden; }
    #container { height: 100%; min-height: 100%; width: 100%; margin: 0 auto; }
  </style>

  <link media="screen" rel="stylesheet" href="colorbox/example1/colorbox.css" />
 
  <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script src="colorbox/jquery.colorbox.js"></script>
 
</head>
<body>
  <script src="swfobject/swfkrpano.js"></script>
  <div id="container">
      <div id="panoDIV" style="height:100%;">
        <script>
          embedpano({target:"panoDIV",swf:"virtualtour.swf",width:"100%",height:"100%",allowFullScreen:"true"});
        </script>

          <noscript>
            <div id="tour">
              <object data="virtualtour.swf">
                <param name="wmode" value="transparent" />
                <param name="allowscriptaccess" value="always">
                <embed src="virtualtour.swf" width="100%" height="100%" allowFullScreen="true" vmode="transparent"></embed>
              </object>
            </div>
          </noscript>
        </div>
      </div>
 

 
</body>

      <script type="text/javascript">
           
           function LaunchColorbox(url, caption){
           
           $.colorbox({href:url, title:caption, width:"80%", height:"80%",iframe:true});
           
           }
      </script>
</html>

Any suggestions or feedback are very welcome, I’m a total beginner here not knowing much about JavaScript or Flash!

Thanks

Eben

[Destiny]

by Destiny » Thu May 16, 2013 10:04 pm

Hi Eben..

You need to remove your ' from the url.. Also, make sure all of your files have been uploaded.. There appears to be some missing..

http://members.westnet.com.au/dps/colorboxtest/virtualtour.html

Destiny..

[eben]

by eben » Fri May 17, 2013 3:16 am

Grate, it’s fixed and working. By taking out the ‘ solved the url problem I had also added the f.addParam("wmode","transparent"); in the wrong place which had stopped the tour loading in html5.

Thanks for your help.Grate, it’s fixed and working. By taking out the ‘ solved the url problem I had also added the f.addParam("wmode","transparent"); in the wrong place which had stopped the tour loading in html5.

http://zenquest.co/testpano/virtualtour.html

Thanks for your help. I still don't know why some of the images fail to load as you zoom. All files are present and permissions are ok. I checked that I can open them as images to see if there was some file corruption but they were ok... Anyway this is only a test to find out how to load colorbox....

Eben