Loading javascript inside of colorbox [#1819994]

Hi,

I would like to use colorbox-inline to load an HTML5 panorama virtual tour.

You can see here: http://housing.drupaldev.oist.ucsb.edu/residences/anacapa-hall

The virtual tour icon is a simple link: <a class="colorbox-inline" href="?width=650&height=500&inline=true#container">virtual tour</a>

and you can see the tour open in colorbox. The problem is when I set the inline element to display: none; because of the javascript needed inline with that element.

Here is the code for my inline element:

<div id="container" style="width:640px;height:480px;">
		This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 9 or higher.
</div>
<script type="text/javascript" src="/sites/housing.drupaldev.oist.ucsb.edu/themes/housing/js/pano2vr_create.js">
		</script>

I have tried wrapping both the container and script in a div and using that id in the colorbox link but the Javascript is stripped. I tried separating out the javascript in another field on the page so that it would display and only the "container" would be display: none , that didn't work.

I would appreciate any advice, seems the main colorbox support website is down.

Thanks!

Comment	File	Size	Author
#4	Images_text_code_togetherinonenode.pdf	126.44 KB	clcl

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

frjo CreditAttribution: frjo commented 22 October 2012 at 18:52

I'm little unsure what your problem is but the normal way to do this is something like this.

<div style="display: none;">
<div id="id-of-content">What ever content you want to display in a Colorbox.</div>
</div>

And then have a link like this:

<a class="colorbox-inline" href="?width=500&height=500&inline=true#id-of-content">Link to click</a>

Comment #2

mollybt CreditAttribution: mollybt commented 22 October 2012 at 19:14

Hi, thank you. I am unsure too otherwise I could explain it better:) I understand the format you suggested and have it working elsewhere on the site.

In this case, it is not working I am assuming because of the javascript.

If I have

<div style="display: none;">
<div id="id-of-content">My content plus
<script type="text/javascript"></script>
</div>
</div>

with the link

<a class="colorbox-inline" href="?width=500&height=500&inline=true#id-of-content">Link to click</a>

It strips the js . So I guess my question is: Is it possible to load javascript inside a colorbox window?

Comment #3

sunchaser CreditAttribution: sunchaser commented 2 May 2013 at 18:11

any solution for this ?

I have an html form inside a node (it's from campaign monitor) and I want to do some jQuery validation on some of the fields , but all the Javascript is being stripped out by the colorbox
Is that to prevent XSS attacks ? (cause same happens with Lightbox2)

can we conclude that it is impossible to add any snippet of javascript inside a page (node, ...) that is being loaded through a colorbox (/lightbox?) that seems so far fetched ...