Tour in a lightbox?

Has anyone done this, having a tour pop up in a lightbox or shadowbox as some people call them?  Any tips?

Thanks

---

Thanks for the effort Offliner63 but I played with it but still could not figure it out and I know it's my lack of techieness.
I think I'll just have to hire someone local to set down with me and show me how to do it. It may be that I just don't know where to put the code and how to and where to put the lightbox files on my server which is Yahoo hosting.

---

Nikon D300, D3s, Nikon 10.5 lens, RingT105N+Footplate+MrotatorTCPs, Giottos MT9261 Tripod, Manfrotto 410 Jr geared head.

If you know the "secret" then everyday is a good day!

Quote:

---

My question is do you have to code everything or is it provided. I'm not very techie and afraid it may be way over my head.

---

RJ,

Sorry for the delay in getting back to you.

OK, let's see if we can get you sorted.
Go to www.events-digital.com/bumpbox.html and download the rar (zip) file. Unzip the file and place the 4 files in the root directory (the directory is where www.realty360tours.com is kept) Hope I'm not teaching you how to suck eggs with the root directory thing. It's amazing how many people don't know what or where the root directory is.

Do NOT put the files anywhere other than in the root directory or in a folder of their own.

The 4 files are:

1) bumpbox.js
2) mootools.js
3) mootoolsmore.js
4) closed.png

Now that you have the above files on your server copy the following code into each of your html pages which have a VR link. The code goes immediately after </title>.

<script language="javascript" type="text/ecmascript" src="mootools.js"></script>
<script language="javascript" type="text/ecmascript" src="mootoolsmore.js"></script>
<script language="javascript" type="text/ecmascript" src="bumpbox.js"></script>

The cool thing about this is that you don't have to add any code to the files Tourweaver generates.
You just have to change the way your VR files are href'd.

Instead of the usual link that tourweaver generates (below)

<a title="#" onClick="javascript:window.open('vr.html','_blank','status=yes,top=0,left=0,width=600,height=440');">link</a>

Use this:

<a class="bumpbox" title="http://www.YOUR_WEB_ADDRESS/FOLDER/vr.html" rel="640,480">link</a>

To get bumpbox to open at the right size you will have to play with the "rel" parameters to suit. Be aware that ie7 displays slightly differently to Firefox so it's a good idea to test the "rel" sizes in both browsers to find a happy medium.

It really is that simple, but if you are still struggling look at www.events-digital.com/bump.html
The page has been totally stripped of everything except the bumpbox stuff. Just right click and look at the "view page source" in Firefox or "view source" in ie7.

Good luck and have fun.

Wayne.

---

Doing What I Like, When I Like, If I Like.....Providing it's OK with the wife.

Events Digital

Nice post Wayne. Good work.

---

Apartment rentals Nerja

Villa rentals Nerja

Accommodation Nerja

Thanks Wayne, everything looks simple and easy BUT that would only be simple and easy for someone that is somewhat techie, which I'm not.
1. I am one of those that can not find the root directory. The problem may be that I can't or just don't know how to access it or find it. I use Yahoo hosting and have full manger access to all the files that I upload. But have been looking around and can't seen to find what the root directory is. I have tons of pages, files and folders on my site and they all have html pages.  
2. I don't know what the "VR links" are either.
I think I'm a hopeless case!

Thanks for taking the time to post the tutorial.

---

Nikon D300, D3s, Nikon 10.5 lens, RingT105N+Footplate+MrotatorTCPs, Giottos MT9261 Tripod, Manfrotto 410 Jr geared head.

If you know the "secret" then everyday is a good day!

You're more techie than you think. the root is the space where you uploaded your home page (index.html) you just didn't know its name. You're certainly not hopeless!
You do know what the VR links are because you have linked to them already. They are your published Tourweaver 360's.

Now go do it!!

Wayne.

---

Doing What I Like, When I Like, If I Like.....Providing it's OK with the wife.

Events Digital

Hi Jerry, basically your root directory is where you upload your index.html file or Home page. So if you download the 4 files as suggested and then upload them to the same place you would upload your homepage to. Ok that now puts inplace script files on your server.

Now you have to put code onto your page so that the scripts will run. So is you now go to your page VirtualTours.html and add the following into the html code:

Scroll down the page until you find this:
    --></style>
</head>
<body bgcolor="#000000" text="#000000" link="#0000FF" vlink="#800080" topmargin="0" leftmargin="0">

I know you know where this as this is where you can <center> a tour or change the background colour. Now after the --></style> Copy and paste the following:

<script language="javascript" type="text/ecmascript" src="mootools.js"></script>
<script language="javascript" type="text/ecmascript" src="mootoolsmore.js"></script>
<script language="javascript" type="text/ecmascript" src="bumpbox.js"></script>


Ok now that is done you need to tell the script where it is to apply the effect. So if you now scroll on futher down your page you will find

<div id="e7" style="position:absolute;left:34;top:1710;width:375;height:295;"><a title="http://realty360tours.com/pro_tour/122_kilgore/122_kilgore/TourWeaver_122_kilgore.html"><img src="images/ScreenHunter_02_Apr._11_10.46.gif" width="375" height="295" border="0" alt=""></a></div>

Now copy and paste class="bumpbox" in between the <a and title= so you end up with

<a class="bumpbox" title="http://realty360tours.com/pro_tour/122_kilgore/122_kilgore/TourWeaver_122_kilgore.html">

Now copy and paste rel="640,480" at the end just before the >

So you end up with

<a class="bumpbox" title="http://realty360tours.com/pro_tour/122_kilgore/122_kilgore/TourWeaver_122_kilgore.html" rel="640,480">

You may want to play around with the sizes but you will see the principle.

All you need to do now is repeat those last two copy & paste instructions for the other VT links i.e ID e8, e9, e10 etc

Now save an upload this file and hopefully we will hear a happy Jerry :) If not upload the file and let me know and I will see what the problem is once you have had a go.

Good luck

---

Apartment rentals Nerja

Villa rentals Nerja

Accommodation Nerja

Thanks guys I'm getting close.
I have the 4 files uploaded to my "root directory".
I followed Nerjaace's instructions above and ended up with this:

        <div id="e7" style="position:absolute;left:34;top:1710;width:375;height:295;"><a  class="bumpbox" title="http://realty360tours.com/pro_tour/122_kilgore/122_kilgore/TourWeaver_122_kilgore.html" rel="775,665"><img src="images/ScreenHunter_02_Apr._11_10.46.gif" width="375" height="295" border="0" alt=""></a></div>

When I click the thumbnail the bumpbox opens but it's not centered on the page, the box seems wide enough but not tall enough. I played with the numbers but that didn't seen to change anything.
The tour inside the box is very small with scroll bars. I don't see any other place to change the numbers or to center the box.

It can be viewed here: http://www.realty360tours.com/VirtualTours.html thumbnail at the bottom on the left.

Thanks if anyone has the solution..........I'm so close. Water Water everywhere and nary drop to drink!

PS: I'M USING IE8...............JUST CHECKED FIREFOX AND IT'S BASICALY THE SAME PROBLEM

---

Nikon D300, D3s, Nikon 10.5 lens, RingT105N+Footplate+MrotatorTCPs, Giottos MT9261 Tripod, Manfrotto 410 Jr geared head.

If you know the "secret" then everyday is a good day!

Try binning this

<div id="e7" style="position:absolute;left:34;top:1710;width:375;height:295;">

and refresh.

Wayne.

---

Doing What I Like, When I Like, If I Like.....Providing it's OK with the wife.

Events Digital

I don't understand what you mean by "binning". Because what you have is already in the code as above.

Thanks Wayne.

---

Nikon D300, D3s, Nikon 10.5 lens, RingT105N+Footplate+MrotatorTCPs, Giottos MT9261 Tripod, Manfrotto 410 Jr geared head.

If you know the "secret" then everyday is a good day!

Hi Jerry, sorry try deleting the style part

style="position:absolute;left:34;top:1710;width:375;height:295;">

---

Apartment rentals Nerja

Villa rentals Nerja

Accommodation Nerja