Lytebox Help please

**aley** · 01-22-2011, 06:33 PM

Hi everyone I am pulling my hair out here, I am not sure if this is possible, basicaly I have a webpage which has a Iframe in it, the iframe loads another page which contains my lytebox thumbnail, I want to then click on the thumbnail and load the lytebox outside of the iframe, rather that loading inside the Iframe creating scroll bars.

this is what I have at the moment Please please please help.

Code:

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

body p {
	font-family: Verdana, Geneva, sans-serif;
}
body p {
	color: #9F3;
}
.oo {
	color: #96C;
}
body p {
	color: #9A9A9A;
	font-size: 12px;
}
.bodyp {
	font-family: Verdana, Geneva, sans-serif;
	color: #F60;
	font-size: 24px;
}
</style>


<link rel="stylesheet" href="../lytebox.css" type="text/css" media="screen" />


</head>

<body>
<table width="1591" height="1193" border="0" align="center">
  <tr>
    <td width="314" height="82">&nbsp;</td>
    <td colspan="2"><table width="587" border="0">
      <tr>
        <td width="169" valign="bottom"><img src="data/websiteTitles/AlexDorman.jpg" width="105" height="85" /></td>
        <td width="407"><table width="407" height="114" border="0">
          <tr>
            <td width="109" valign="bottom"><img src="data/websiteTitles/workblackS.jpg" width="58" height="20" /></td>
            <td width="288" valign="bottom"><img src="data/websiteTitles/contactorangeS.jpg" width="82" height="20" /></td>
          </tr>
        </table></td>
      </tr>
  </table></td>
  </tr>
  <tr>
    <td><p style="font-size: 16px; color: #000;">&nbsp;</p></td>
    <td width="234" valign="top"><table width="300" height="552" border="0" align="right">
      <tr>
        <td width="30">&nbsp;</td>
        <td width="231"><p style="font-size: 16px; color: #000;">&nbsp;</p>
          <p style="font-size: 16px; color: #000;">About</p>
          <p>I am a 3D artist currently working in       the UK, using Maya and Softimage,      with experience with various comping       software such as Nuke, AfterEffects.      As well as Realflow. </p>
          <p>I am a generalist with a leaning      towards Lighting/shading and      simulation. I have experience with      various renderers with most      knowledge in Arnold and Mental Ray. </p>
          <p>I am currently employed at js3d in      sunny Oxfordshire just outside       London. </p>
          <p style="color: #F60">Employment: </p>
          <p style="color: #000">Smoke&amp;Mirrors (London) </p>
          <p>Runner and Junior 3d artsist </p>
          <p style="color: #000">Prime Focus London </p>
          <p>Junior VFX Artist and runner</p>
          <p style="color: #000"> js3d</p>
          <p> Junior 3d Artist </p>
          <p>Before employment in London I was       involved in various social and      community projects in conjunction with      Hastings council helping children gain      experience in different creative      activities including Animation, Film    Production and Video Editing.</p></td>
        <td width="25">&nbsp;</td>
      </tr>
    </table>      <p style="font-size: 16px; color: #000;">&nbsp;</p></td>
    <td width="1029"><table width="1024" height="1482" border="0">
      <tr>
        <td width="600" height="40" align="left" valign="top">&nbsp;</td>
        
        
        
        
        
        
  <td width="414" valign="bottom">
    
    
    
    
  </td>
        </tr>
      <tr>
        <td height="341" valign="top"><iframe src="http://player.vimeo.com/video/18675508?color=c9ff23&amp;loop=1" width="600" height="338" frameborder="0"></iframe></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="10" valign="top">&nbsp;</td>
        <td>&nbsp;</td>
        </tr>
      <tr>
        <td width="600" height="25" align="left" valign="top"><iframe src="http://player.vimeo.com/video/18679008?color=c9ff23&amp;loop=1" width="600" height="338" frameborder="0"></iframe></td>
        <td valign="top">&nbsp;</td>
        </tr>
      <tr>
        <td height="10" valign="top">&nbsp;</td>
        <td>&nbsp;</td>
        </tr>
      <tr>
        <td height="340" align="left" valign="top"><iframe src="http://player.vimeo.com/video/18681055?color=c9ff23" width="600" height="338" frameborder="0"></iframe></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="10" align="left" valign="top">&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td width="600" height="340" align="left" valign="top"><iframe iframe name="work" height="600" width="600" src="C:/Users/alex/Documents/website/lyte/lytetest.html" frameborder="0" marginheight="0" marginwidth="0">
</iframe>&nbsp;</td>
        <td><a href="C:/Users/alex/Documents/website/lytetest.html" target="work">Link</a> &nbsp;</td>
        </tr>
    </table></td>
  </tr>
  <tr>
    <td height="23">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>
</body>
</html>

and the webpage inside my Iframe is

Code:

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="../lytebox.css" type="text/css" media="screen" />


</head>

<body>

<table width="600" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><iframe src="http://player.vimeo.com/video/18675508?color=c9ff23&amp;loop=1" width="600" height="338" frameborder="0"></iframe></td>
  </tr>
  <tr>
   

<td>

<a href="C:\Users\alex\Desktop\Mcdonalds\external_poster.jpg" rel="lytebox" title="Erie Night"><img src="C:\Users\alex\Documents\website\Pictures\external_poster.jpg"></a>


</td>
  </tr>
  <tr>
    <td>Happy Meal</td>
  </tr>
</table>
</body>
</html>

**jscheuer1** · 01-22-2011, 07:26 PM

That can be done, yes.

For this to work on any computer besides your own, once it's live you must replace all paths like:

Code:

C:/Users/alex/Documents/website/lytetest.html

with either their equivalent relative paths or with absolute paths that point to their actual locations on the server.

I think you may need to put the lytebox.js script on the top page as well, and all paths to the scripts and styles must be correct for the pages that they're on.

Also, when testing locally, if all of the files aren't in the same folder and referenced relatively, there could be erroneous cross domain security violations that prevent it from working even if everything else is OK.

If you want more help, put up a live demo and give us a link to it. That's the only way we can diagnose it.

**aley** · 01-22-2011, 07:48 PM

John thank you so much for your help, it wasn't what you said but I appreciate it just the same, after spending all day testing in chrome, I just tested in ie it worked, sometimes I feel so stupid grrrr,

So is this a known issue with chrome? I have no hair left by the way

**aley** · 01-22-2011, 07:54 PM

This could be a run live issue right?

**jscheuer1** · 01-22-2011, 08:37 PM

Chrome is especially sensitive to iframe across folders locally, like I was mentioning:

Also, when testing locally, if all of the files aren't in the same folder and referenced relatively, there could be erroneous cross domain security violations that prevent it from working even if everything else is OK.

So if it works locally in Firefox, Opera, or IE, chances are good it will live in all of them and Chrome. IE is the odd one though, you can't as often count on results in it translating to results in other browsers. Some of these others may balk at local installations and IE has its own local issues.

I usually test something like that on a local server though. That eliminates a lot of the guesswork.

Thread: Lytebox Help please

Thread Tools

Search Thread

Lytebox Help please

Bookmarks

Bookmarks

Posting Permissions