You are not logged in.

1

Sunday, July 3rd 2011, 2:00pm

How to insert a PDF document in Virtual Tour

Hello, i dont understand something or too complicated for me.

One client wants have the possibilitie to press a button (plugin) and it will appear a pdf document in the same window.

If i ve well understand, it s a javacript with by example Thickbox.

Someone can explain to me how i must do ?

thx the pro's

This post has been edited 1 times, last edit by "stretchie" (Jul 3rd 2011, 2:11pm)


Zephyr

Professional

Posts: 1,003

Location: Netherlands

Occupation: Web developer

  • Send private message

2

Sunday, July 3rd 2011, 4:15pm

What do you mean "the same window"?

Do you want it in the same browser window? then you just can do openurl('linkto.pdf", _parent"); if you want to keep the tour in the background, then you need a thickbox, or some SWF plugin that can read pdf's.

3

Sunday, July 3rd 2011, 4:21pm

In my XML KRpano, i ve put :

<script type="text/javascript" src="thickbox/jquery.js"></script>
<script type="text/javascript" src="thickbox/thickbox.js"></script>
<link rel="stylesheet" href="thickbox/thickbox.css" type="text/css" media="screen" />


I've created a button :

<data name="buttontext">
<p align="center">
<font face="Arial" size="20">
OPEN<b>PDF DOCUMENT</b>
</font>
</p>
</data>


<plugin name="button" url="%SWFPATH%/plugins/textfield.swf"
align="bottom" y="52" width="350" height="30" children="false"
html="data:buttontext"
background="true"
autosize="center"
onclick="action();"
/>


I want when i click on "Open Pdf Document", the pdf document appears in my virtual tour in a box.

and yes, its for a "pop-up" in the virtual tour like this LINK > Iframedcontent demos


thx a lot Zephyr

Zephyr

Professional

Posts: 1,003

Location: Netherlands

Occupation: Web developer

  • Send private message

4

Sunday, July 3rd 2011, 9:52pm

hmm try

Source code

1
onclick="js(tb_show('the title', 'theurlto.pdf'))"

5

Monday, July 4th 2011, 12:29am

doesnt work.

Do you know where i can have an syntax error maybe ?

VN2011

Professional

Posts: 1,336

Location: Duluth MN

  • Send private message

6

Monday, July 4th 2011, 2:40am

it cant be done. google for pdf in thickbox. a while back i needed that and had to manually modify the thickbox.js to allow it to embed a pdf. even after i got it to work it was not 100% sometime all it would load was a red X. why not create a jpg of the pdf at 100% and put that into a scrolling textfield. it would be very close to the same thing. place a link in the textbox to allow direct downloading of the pdf if the jpg is not good enough. i just know for sure showing a pdf in thickbox is not doable without a hack of the js.


i did some digging and found my old tour where i used this, like i said it was not a 100% fix when it did work and i think FF does not support this at all. so i already undid my use of pdfs in that tour but there was 1 thickbox files left in the folder. one is the js that comes with the actual download, one is the modded version that sort works with pdfs. i dont know which is which anymore but 1 of them is setup for the pdf hack.

www.virtualnorthland.com/tb_pdf.rar

plus if they do not have the pdf brouser plugin then it will not work no matter what brouser is being used.

This post has been edited 2 times, last edit by "VN2011" (Jul 4th 2011, 3:03am)


Zephyr

Professional

Posts: 1,003

Location: Netherlands

Occupation: Web developer

  • Send private message

7

Monday, July 4th 2011, 11:02am

a pdf can be loaded in a browser, or even in an iframe (http://www.cs.tut.fi/~jkorpela/html/iframe-pdf.html) A lightbox/thickbox/shadowbox etc can load content in an iframe, so it should be possible.

I haven't used thickbox in years, I use fancybox now, together with jquery and wrote a javascript function that opens that popup.

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 <script type="text/javascript" src=js/jquery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src=js/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<link rel="stylesheet" href="js/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />
<script type="text/javascript">
function openPopup(t,linktourl,w,h,type)
{
$.fancybox({
'title' : t,
'width' : w,
'height' : h,
'href' : linktourl,
'type' : type,
'autoScale' : 'true',
'overlayColor' : '#000000',
'overlayAlpha' : '0.3'
});
}
</script>


then in krpano:

Source code

1
onclick="js(openPopup('a title', 'linkto.pdf', 500, 500, 'iframe'))"


here is fancybox
http://fancybox.net/

8

Thursday, July 7th 2011, 1:31pm

Have you an exampre of that iframe working on krpano to see?

Zephyr

Professional

Posts: 1,003

Location: Netherlands

Occupation: Web developer

  • Send private message

9

Thursday, July 7th 2011, 1:46pm

Sorry, nothing public :(

a.pu

Trainee

Posts: 120

Occupation: software engineer, author of krpano syntax highlighting, bundler and style guide

  • Send private message

10

Monday, February 10th 2014, 6:17pm

Sorry, nothing public :(
Your code was really helpful, thanx a lot! *g*

P.S. For followers: verify script and style names otherwise it won't work. ;-)

11

Thursday, November 3rd 2016, 5:19pm

Fancybox in panorama (pdf and many other)?

I followed this advice - https://krpano.com/forum/wbb/index.php?p…d&threadID=5437, all works fine. Probably the same way you can insert into a panorama, and Google maps, and galleries and html pages using iframe. How this can be prescribed in xml file?

Html I added this:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript">

function openPopup(t,linktourl,w,h,type)
{
$.fancybox({
'title' : t,
'width' : w,
'height' : h,
'href' : linktourl,
'type' : type,
'autoScale' : 'true',
'overlayColor' : '#000000',
'overlayAlpha' : '0.3'
});
}
</script>


I added in the description in hotspot:
onclick="js(openPopup('picture', 'something.jpg', 1000, 1000, 'iframe'))"


This works for video, single images, pdf files. But as it is possible to insert, for example, a link to Google maps or gallery?