Posted by Vc Developer on January 27, 2012 at 4:44pm
4 followers
Jump to:
| Project: | Shadowbox |
| Version: | 7.x-3.0-beta8 |
| Component: | Miscellaneous |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed (fixed) |
Issue Summary
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
#1
It is always better if you can provide a link to a page with the problem to analyze what's happening.
Try:
<?php<a href="/sites/mysite.com/files/graph.htm" id="debarim6" rel="shadowbox; width=980; height=400; player=iframe">myiframe</a>
?>
#2
#3
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.
#4
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:
<?phpwindow.parent.Shadowbox.open({
content: '/sites/mysite.com/files/graph.htm',
player: 'iframe',
width: '980',
height: '400'
});
?>
#5
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 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!
#6
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:
<?php<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:
<?phpfunction 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.
#7
Ok thaks! I shall make the changes as suggested.
#8
Automatically closed -- issue fixed for 2 weeks with no activity.
#9
OOOhhhh thanks, it work! just I needed