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!

CommentFileSizeAuthor
#4 Images_text_code_togetherinonenode.pdf126.44 KBclcl

Comments

frjo’s picture

frjo commented

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>
mollybt’s picture

mollybt commented

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?

sunchaser’s picture

sunchaser commented

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 ...

clcl’s picture

clcl commented
StatusFileSize
new Images_text_code_togetherinonenode.pdf126.44 KB

I don't know if this is really related/helpfull but I'm having code snippets, text and images in the same node. And finaly it works like a charm.

I use the folowing modules:
Colorbox 7.x-2.4
Insert 7.x-1.3
Libraries 7.x-2.1

Syntax highlighter 7.x-2.0
From Syntaxhighlighter Insert ->Activated:
Syntaxhighlighter Insert 7.x-1.1
Syntaxhighlighter Insert WYSIWYG 7.x-1.1

Wysiwyg 7.x-2.2
IMCE 7.x-1.7
IMCE Wysiwyg API bridge 7.x-1.0

The folowing libraries:
syntaxhighlighter_2.0.278
jQuery Colorbox v1.4.15 - 2013-04-22
CKEditor 3.6.6.1 SVN',revision:'7696'

I'll atach a pdf where I'll show an exemple. Maybe it helps someone.

neslee canil pinto’s picture

neslee canil pinto
he/him
Primary language English
commented
Issue summary: View changes
Status: Active » Closed (works as designed)