|
HTML - Help With Greybox Pop-up
If you're familiar with Greybox, the pop-up window: http://orangoo.com/labs/GreyBox/
I'd just like to know how I can get it to pop-up not in the center of the page. I'd like it to pop-up on the left side of the page. Is that possible? If so can you help me accomplish this? Thanks. Similar Tutorialshello, I'm trying to open a greybox where the link to it is inside an iframe. My problem is that while it works, it only takes the dimensions of the iframe, and not the parent window... so it doesn't look good. I'm hoping there's some code I can add to the link so that it targets the parent window. here is the link code for my greybox: HTML Code: <a id="video-link" href="../videos/Pallets.html" title="Pallets" rel="gb_page_center[640, 385]"> and here is the link to see what I'm talking about: (there is a "video" link on the left side menu that is located in the parent winodow and there is several "video" links within the iframe once you enter the products) http://www.solstudio.eu/skycore/demo...-Multiparking/ Hi, I am in the middle of building a html page and want to use the greybox lightbox code Ive found to load another webpage in the lightbox over my home page. Ive downloaded the greybox files and link to them (as instructed), Ive added the greybox script in my head tags (as instructed) and finally added the rel tag to my links... the pages open, but in a seperate browser window- they don't open in the greybox window. Ive played around with it for ages, trying to work it out- can anyone tell me what is wrong with this code?? <html> <head> <title>YOUTOPIA // personal fitness & wellbeing</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <style type="text/css"> <!-- body,td,th { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #F8E0B2; } body { background-color: #000000; background-image: url(images/home-bg.jpg); background-repeat: repeat-x; } a:link { text-decoration: none; color: #F8E0B2; } a:visited { text-decoration: none; color: #F8E0B2; } a:hover { text-decoration: none; color: #FFFFFF; } a:active { text-decoration: none; color: #F8E0B2; } .style1 { font-size: 10px; font-style: italic; } #facebook { position:absolute; width:50; height:50; z-index:1; background-image: url(images/greenfblogo.png); left: 246px; top: 523px; visibility: visible; } .style2 {font-size: 12px} --> </style> <script type="text/javascript"> var GB_ROOT_DIR = "http://www.youtopiastudio.com.au/public/www/greybox/"; </script> <script type="text/javascript" src="http://www.youtopiastudio.com.au/public/www/greybox/AJS.js"></script> <script type="text/javascript" src="http://www.youtopiastudio.com.au/public/www/greybox/AJS_fx.js"></script> <script type="text/javascript" src="http://www.youtopiastudio.com.au/public/www/greybox/gb_scripts.js"></script> <link href="http://www.youtopiastudio.com.au/public/www/greybox/gb_styles.css" rel="stylesheet" type="text/css" /> </head> <body> <!-- ImageReady Slices (home-youtopia.psd) --> <script type="text/javascript"> var GB_ROOT_DIR = "http://www.youtopiastudio.com.au/public/www/greybox/"; </script> <script type="text/javascript" src="http://www.youtopiastudio.com.au/public/www/greybox/AJS.js"></script> <script type="text/javascript" src="http://www.youtopiastudio.com.au/public/www/greybox/AJS_fx.js"></script> <script type="text/javascript" src="http://www.youtopiastudio.com.au/public/www/greybox/gb_scripts.js"></script> <link href="http://www.youtopiastudio.com.au/public/www/greybox/gb_styles.css" rel="stylesheet" type="text/css" /> <a rel="gb_page_center[500, 500]" href="http://www.youtopiastudio.com.au/what.html" >link</a> <table width="900" height="600" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01"> <tr> <td colspan="14"> <img src="images/image-1.jpg" width="900" height="90" border="0" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="90" alt=""></td> </tr> <tr> <td rowspan="2"> <img src="images/home-youtopia_02.jpg" width="82" height="33" alt=""></td> <td colspan="4"> <img src="images/home-youtopia_03.jpg" width="203" height="18" alt=""></td> <td> <img src="images/home-youtopia_04.jpg" width="63" height="18" alt=""></td> <td colspan="8" rowspan="2"> <img src="images/home-youtopia_05.jpg" width="552" height="33" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="18" alt=""></td> </tr> <tr> <td colspan="4"> <img src="images/home-youtopia_06.jpg" width="203" height="15" alt=""></td> <td> <img src="images/home-youtopia_07.jpg" width="63" height="15" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="15" alt=""></td> </tr> <tr> <td colspan="14"> <img src="images/home-youtopia_08.jpg" width="900" height="28" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="28" alt=""></td> </tr> <tr> <td colspan="3"> <img src="images/home-youtopia_09.jpg" width="228" height="51" alt=""></td> <td colspan="6" rowspan="3"> <img src="images/home-youtopia_10.jpg" width="281" height="269" alt=""></td> <td colspan="4" rowspan="4" background="images/test-panel-main.jpg"> <div style="position:relative; width:300px;"> <div id="maintext" style="position:absolute; left:11px; top:-128px; z-index:10; width: 353px; height: 272px; visibility: visible;"> <div align="justify"> <p class="style2"><em>We are a private, personal training and wellness facility, with a focus on lifestyle, balance and wellbeing. Youtopia provides a calm, safe and friendly environment where you can go to simply get fit for living <strong>LIFE</strong>! There are no cues for equipment, no life-long contracts and no pricey membership fees. </em></p> <p class="style2"><em><br> Youtopia provides a challenging and functional workout rather than frustrating encounters. Youtopia is exclusive but not expensive & more importantly it’s all about <strong>YOU</strong>! There’s no non-sense, no attitude and no judgements.</em></p> <p class="style2"><em> <br> Many of us want to lead more active and healthy lifestyles and have regular exercise be a part of our lives. But we lack the motivation to reach our goals alone... <a href="http://www.youtopiastudio.com.au/what.html"title="What is Youtopia?" rel="gb_page_center[500, 500]" ><strong>read more</strong></a> </em></p> <p class="style1"> </p> </div> </div> </div> </td> <td rowspan="5"> <img src="images/home-youtopia_12.jpg" width="19" height="313" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="51" alt=""></td> </tr> <tr> <td colspan="3"> <img src="images/text--bar-left.jpg" width="228" height="22" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="22" alt=""></td> </tr> <tr> <td colspan="3"> <img src="images/text-panel-small.jpg" width="228" height="196" alt=""> </td> <td> <img src="images/spacer.gif" width="1" height="196" alt=""></td> </tr> <tr> <td colspan="9" rowspan="2"> <img src="images/home-youtopia_15.jpg" width="509" height="44" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="22" alt=""></td> </tr> <tr> <td colspan="4"> <img src="images/text-bar-right.jpg" width="372" height="22" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="22" alt=""></td> </tr> <tr> <td colspan="14"> <img src="images/home-youtopia_17.jpg" width="900" height="35" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="35" alt=""></td> </tr> <tr> <td colspan="14"> <img src="images/home-youtopia_18.jpg" width="900" height="16" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="16" alt=""></td> </tr> <tr> <td colspan="2" rowspan="2"> <a href="http://www.facebook.com" target="_blank"><img src="images/home-youtopia_19.jpg" alt="" width="95" height="60" border="0"></a></td> <td colspan="2"> <img src="images/button-why.jpg" alt="" width="155" height="30" border="0"></td> <td rowspan="2"> <img src="images/home-youtopia_21.jpg" width="35" height="60" alt=""></td> <td colspan="2"> <img src="images/button-philosophy.jpg" width="160" height="30" alt=""></td> <td rowspan="2"> <img src="images/home-youtopia_23.jpg" width="35" height="60" alt=""></td> <td colspan="2"> <img src="images/button-trainers.jpg" width="149" height="30" alt=""></td> <td rowspan="2"> <img src="images/home-youtopia_25.jpg" width="35" height="60" alt=""></td> <td> <a href="http://www.thehavocplan.com"rel="gb_page_center[500, 500]"><img src="images/button-gallery.jpg" alt="" width="181" height="30" border="0"></a></td> <td colspan="2" rowspan="2"> <img src="images/home-youtopia_27.jpg" width="55" height="60" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="30" alt=""></td> </tr> <tr> <td colspan="2"> <img src="images/button-eat.jpg" width="155" height="30" alt=""></td> <td colspan="2"> <img src="images/button-offers.jpg" width="160" height="30" alt=""></td> <td colspan="2"> <img src="images/button-press.jpg" width="149" height="30" alt=""></td> <td> <img src="images/button-details.jpg" width="181" height="30" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="30" alt=""></td> </tr> <tr> <td colspan="14"> <img src="images/home-youtopia_32.jpg" width="900" height="25" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="25" alt=""></td> </tr> <tr> <td> <img src="images/spacer.gif" width="82" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="13" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="133" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="22" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="35" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="63" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="97" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="35" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="29" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="120" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="35" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="181" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="36" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="19" height="1" alt=""></td> <td></td> </tr> </table> <!-- End ImageReady Slices --> </body> </html> |
|||||||