I read posts needed help in getting Shadowbox to work from a iframe, but there was no one posted their results in how they accomplished it. I'm running Drupal 7 and installed the Module, but having no success in getting it to work from a iframe.

In addition to using Drupal, I created web content using Xara Photo & Graphics Design 7 for displaying in a iframe. Below is how the content is exported and my attempt to get Shadowbox to work. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta name="XAR Files" content="knowledge_htm_files/xr_files.txt"/>
 <title>knowledge</title>
 <meta http-equiv="Content-Type" content="text/html; charset=Windows-1252"/>
 <meta name="Generator" content="Xara HTML filter v.4.1.2.673"/>
 <link rel="stylesheet" type="text/css" href="knowledge_htm_files/xr_main.css"/>
 <link rel="stylesheet" type="text/css" href="knowledge_htm_files/xr_text.css"/>

<script language="JavaScript" type="text/javascript" src="http://drupal7.mysite.com/sites/all/libraries/shadowbox/shadowbox.js?v=3.0.3"/>
</head>
<body>
<div class="xr_ap" id="xr_xr" style="width: 960px; height: 600px; top:0px; left:50%; margin-left: -480px;">
....... 
........ stuff...... 
................................ the link for shadowbox
<a href="/sites/mysite.com/files/graph.htm" id="debarim6" rel="shadowbox;width=980;height=400">myiframe</a> stuff............. 
................... 
.............. 
.................stuff 
</div>
</body>
</html>

Has anyone successfully done this using iframe in Drupal and can show me how you did it? Thanks!...

Comments

manfer’s picture

manfer commented

It is always better if you can provide a link to a page with the problem to analyze what's happening.

Try:

<a href="/sites/mysite.com/files/graph.htm" id="debarim6" rel="shadowbox; width=980; height=400; player=iframe">myiframe</a>
manfer’s picture

manfer commented
Category: task » support
Priority: Critical » Normal
Vc Developer’s picture

Vc Developer commented

Hi, thanks for the reply! Here is my url to my development webpage so you can look what I'm trying to do. Let me know what I'm doing wrong.

http://drupal7.tentofappointment.com/key-of-knowledge-unto-salvation

Its a webpage Presentation, so page over using the Right Button at the top right and go to page 2 (seen on the left side) and you will see the Latin suDo "labore" as a link or just click the "3"rd slide at the bottom.

If you can't connect let me know because I'm running "PeerGuarding" and I may have to allow your IP range of your ISP.

manfer’s picture

manfer commented

The problem is just the iframe.

The iframe is actually as another webpage just embedded in your site and it can't use the javascript of the container directly so you can't directly have Shadowbox (which is a javascript library) working on the iframe.

So, or you load shadowbox javascript library inside that iframe or you have to use shadowbox javascript API to use the shadowbox javascript loaded in your site outside the iframe.

Using the shadowbox API means you will have to code your links forgotting the easy shadowbox handle with rel attribute (no more use of rel="shadowbox; ..." inside that iframe) and instead coding the onclick event of those links in a way they trigger a javascript code like this:

window.parent.Shadowbox.open({
  content: '/sites/mysite.com/files/graph.htm',
  player: 'iframe',
  width: '980',
  height: '400'
});
Vc Developer’s picture

Vc Developer commented

Awh thanks that did it! Here's what I had to do just in case someone else comes with the same question:

1) My presentation .html pages and folder is located in the "files" folder which I export out of Xara Photo & Graphics Design 7.
2) Added: 

<script language="JavaScript" type="text/javascript" src="http://drupal7.tentofappointment.com/sites/all/libraries/shadowbox/shadowbox.js?v=3.0.3"></script> 

Pay close attention to the ending "</script>" tag, it must be included!  Important!

3) Added:

<script language="JavaScript" type="text/javascript">
function openShadowbox(content){
window.parent.Shadowbox.open({
  content: content,
  player: 'iframe',
  width: '980',
  height: '400'
});
}
</script>

like example given in above reply.

4) You have to make all .css changes from with in the iframe files!  Important!

#Yirmeyhu50 {
  color: #561A8B;
  cursor: pointer;
}

5) My onclick:

<span class="xr_tl" style="top: -19px;" >Commodo sed labore&nbsp;enim <span id="Yirmeyhu50" onclick="openShadowbox('/sites/tentofappointment.com/files/graph.htm')">laboris</span> incididunt esse </span>

Thanks again for your help! Keep up the excellence!

manfer’s picture

manfer commented
Status: Active » Fixed

1st Method

You don't need to include the script to the html file on your iframe when you use window.parent. With window.parent.Shadowbox you are using the Shadobox object that belongs to the page that contains the iframe (not the Shadowbox object inside the iframe). So point 2 is not needed.

---------------------------------

2nd Method

If you prefer to include the shadowbox library in the iframe. Then do point 2 but with this code:

<link rel="stylesheet" type="text/css" href="http://drupal7.tentofappointment.com/sites/all/libraries/shadowbox/shadowbox.css?v=3.0.3">
<script type="text/javascript" src="http://drupal7.tentofappointment.com/sites/all/libraries/shadowbox/shadowbox.js?v=3.0.3"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

and change the open function to:

function openShadowbox(content){
Shadowbox.open({
  content: content,
  player: 'iframe',
  width: '980',
  height: '400'
});
}

This way you will be using the Shadowbox object of the iframe and not the one that belongs to its container.

------------------

Any of the methods should work. You have mixed a little both methods, anyway it is not harm to add the javascript library on the iframe even if you don't use it.

Vc Developer’s picture

Vc Developer commented

Ok thaks! I shall make the changes as suggested.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

fbaeza’s picture

fbaeza commented

OOOhhhh thanks, it work! just I needed

dianacastillo’s picture

dianacastillo commented

why are you putting this inside php ? this is not a php command. anyways, I tried this
and it doesnt work myiframe

it opens in a new page, not an iframe.
what is wrong with this code? thanks

dianacastillo’s picture

dianacastillo commented

I get this error :
Error: Permission denied to access property 'document'