PDA

View Full Version : Lightbox Nightmare


benjamiknight
04-19-2010, 04:30 PM
I joined this forum because I cannot find anything useful for what I am trying to do and I need some help. FYI: I am not an expert coder.

I am working on a website and here is what I'd like to do:

I want to launch a lightbox from a hotspot/image map that contains an html page. I know there are supposedly some that can do this (i.e. Thickbox, etc.), but I am not able to get them to work. I got a Thickbox extension from TCN Widgets, but it only shows a loading bar when I try to launch the lightbox containing HTML and I have not been able to get it to work with a hotspot.

Any suggestions? Am I missing something simple?

mangofreak
04-19-2010, 06:04 PM
Lightbox, has a simple set of instructions. Have you checked there?
Also, seeing your code could help us, help you ;)

benjamiknight
04-19-2010, 06:11 PM
Yes, I have checked the Lightbox instructions. I can get lightbox to work with images no problem, but not with image maps/hotspots and not with html content.

<!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>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Java Journey</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
font-size: 100%;
background-image: url(../texture.JPG);
background-repeat: repeat;
}
.oneColLiqCtr #container {
width: 1028px; /* this will create a container 80% of the browser width */
background: #FFFFFF; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
margin-top: 20px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: inherit;
}
.oneColLiqCtr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
#apDiv1 {
position:absolute;
width:380px;
height:240px;
z-index:1;
overflow: auto;
left: 459px;
top: 93px;
}
#apDiv2 {
position:absolute;
width:auto;
height:auto;
z-index:1;
top: -22px;
left: 70px;
}
#apDiv3 {
position:absolute;
width:402px;
height:235px;
z-index:1;
top: 59px;
overflow: auto;
left: 409px;
}
#apDiv4 {
position:absolute;
width:103px;
height:27px;
z-index:2;
left: 775px;
top: 288px;
}
#apDiv5 {
position:absolute;
width:200px;
height:115px;
z-index:2;
left: 641px;
top: 452px;
}
#apDiv6 {
position:absolute;
width:213px;
height:242px;
z-index:3;
left: 161px;
top: 49px;
}
#apDiv7 {
position:absolute;
width:356px;
height:33px;
z-index:3;
left: 526px;
top: 323px;
color: #FFF;
}
a:link {
text-decoration: none;
color: #000;
}
a:visited {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: none;
color: #666;
}
a:active {
text-decoration: none;
color: #000;
}
#apDiv8 {
position:absolute;
width:200px;
height:115px;
z-index:4;
left: -363px;
top: 37px;
}
#apDiv9 {
position:absolute;
width:200px;
height:255px;
z-index:4;
left: 674px;
top: 341px;
}
#apDiv10 {
position:absolute;
width:200px;
height:115px;
z-index:5;
left: 70px;
top: 29px;
}
#apDiv11 {
position:absolute;
width:114px;
height:23px;
z-index:6;
left: 663px;
top: 294px;
}
a {
font-size: medium;
color: #000;
}
#apDiv12 {
position:absolute;
width:70px;
height:20px;
z-index:4;
left: 730px;
top: 280px;
}
.oneColLiqCtr #apDiv2 #apDiv12 a {
font-family: Arial, Helvetica, sans-serif;
}
.oneColLiqCtr #apDiv2 #apDiv12 a {
font-family: Pristina;
font-size: x-large;
}
#apDiv13 {
position:absolute;
width:69px;
height:170px;
z-index:7;
left: 879px;
top: 73px;
}
#apDiv14 {
position:absolute;
width:93px;
height:45px;
z-index:8;
left: 214px;
top: 535px;
}
#apDiv15 {
position:absolute;
width:200px;
height:115px;
z-index:9;
left: -529px;
top: 161px;
}
#apDiv16 {
position:absolute;
width:200px;
height:115px;
z-index:9;
}
-->
</style>
<script src="../scripts/jquery-latest.js" type="text/javascript"></script>
<script src="scripts/thickbox.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link href="css/thickbox.css" rel="stylesheet" type="text/css" />
</head>

<body class="oneColLiqCtr" onload="MM_preloadImages('../about.png','../staff.png','../location.png','../contact.png','../menu.png','../facebook.png','../twitter.png','../reverb.png','../events2.png','../vols3.png','../images/painter_s_over.png')">
<div id="apDiv16"><img src="../images/reservations.png" width="300" height="193" border="0" usemap="#Map6"/>
<map name="Map6" id="Map6">
<area shape="poly" coords="22,141,55,186,274,48,214,9" href="../calendar.html" class="thickbox" rel="thickbox_slide1"/>
</map></div>
<div id="apDiv7"><style type="text/css">
.html-marquee {height:100px;width:350px;background-color:none;font-family:Arial;font-size:12pt;color:#000000;border-width:0;border-style:solid;border-color:none;}
</style>
<marquee class="html-marquee" direction="left" behavior="scroll" scrollamount="5" >
<div id="apDiv15"><img src="../images/painter_s.png" width="197" height="157" border="0" usemap="#Map3" id="Image4" />
<map name="Map3" id="Map3">
<area shape="rect" coords="115,89,189,110" href="../artwork.html" onmouseover="MM_swapImage('Image4','','../images/painter_s_over.png',1)" onmouseout="MM_swapImgRestore()" />
<area shape="rect" coords="3,128,188,149" href="../artwork.html" onmouseover="MM_swapImage('Image4','','../images/painter_s_over.png',1)" onmouseout="MM_swapImgRestore()" />
</map>
</div>
<a href="#" target="_blank">Live Music April 16th Featuring St. Stephens High School Performers!</a>
</marquee><p style="font-family:verdana,arial,sans-serif;font-size:10px;"></p></div>
<div id="apDiv2">
<img src="../back.png" width="850" height="680" border="0" id="Image1" />
<div id="apDiv12"><a href="../index.html">Home</a></div>
<div id="apDiv6"><img src="../standard.png" width="231" height="228" border="0" usemap="#Map2" id="Image2" />
<map name="Map2" id="Map2">
<area shape="rect" coords="127,7,224,34" href="../menu.html" onmouseover="MM_swapImage('Image2','','../menu.png',1)" onmouseout="MM_swapImgRestore()" />
<area shape="rect" coords="99,59,224,79" href="../about.html" onmouseover="MM_swapImage('Image2','','../about.png',1)" onmouseout="MM_swapImgRestore()" />
<area shape="rect" coords="88,102,221,126" href="../staff.html" onmouseover="MM_swapImage('Image2','','../staff.png',1)" onmouseout="MM_swapImgRestore()" />
<area shape="rect" coords="8,145,226,171" href="../location.html" onmouseover="MM_swapImage('Image2','','../location.png',1)" onmouseout="MM_swapImgRestore()" />
<area shape="rect" coords="46,190,225,217" href="../contact.html" onmouseover="MM_swapImage('Image2','','../contact.png',1)" onmouseout="MM_swapImgRestore()" />
</map>
</div>
<!-- TemplateBeginEditable name="EditRegion3" -->
<div id="apDiv3">
<div>
<div align="center"><strong>JAVA JOURNEY COFFEE SHOP</strong><br />
</div>
<div align="center"><strong><em>where coffee, caring, and community connect*</em></strong></div>
<p><a href="http://maps.google.com/places/us/north-carolina/hickory/n-center-st/2149/-java-journey?hl=en&amp;gl=us">Find Us On Google</a></p>
<p class="cushycms">Java Journey, a coffee shop community in Hickory, North Carolina, provides hope and restoration to the hurting and broken by sharing Christ's story, showing His love and by empowering the restored to serve others. We also serve up a great cup of coffee and other palate delights.<br />
</p>
</div>
<div></div>
<div>
<p align="center">Our current business hours are:</p>
<p align="center">Monday - Friday: 6am - 8pm</p>
<p align="center">Saturday: 7am-10pm</p>
<p align="center">Sunday: 8am - 11am<br />
</p>
</div>
<br />
<p align="center">&nbsp;</p>
</div>
<!-- TemplateEndEditable --></div>
<div id="apDiv4"><img src="../buttons.png" width="90" height="32" border="0" usemap="#Map" id="Image3" />
<map name="Map" id="Map">
<area shape="rect" coords="5,4,28,28" href="http://www.facebook.com/pages/Hickory-NC/Java-Journey/221171470782" target="_self" onmouseover="MM_swapImage('Image3','','../facebook.png',1)" onmouseout="MM_swapImgRestore()" />
<area shape="rect" coords="34,5,56,27" href="http://www.twitter.com/javajourney" target="_self" onmouseover="MM_swapImage('Image3','','../twitter.png',1)" onmouseout="MM_swapImgRestore()" />
<area shape="rect" coords="62,5,83,26" href="http://www.reverbnation.com/#/venue/javajourney" target="_self" onmouseover="MM_swapImage('Image3','','../reverb.png',1)" onmouseout="MM_swapImgRestore()" />
</map>
</div>
<div id="apDiv9"><p width="100%" align="center"><embed pluginspage="http://www.adobe.com/go/getflashplayer" src="http://www.yourminis.com/Dir/GetContainer.api?uri=yourminis/yourminis/mini:rsscontainer" wmode="transparent" width="210" height="270" FlashVars="view=full&cr=10&dividerVis=1&color=0&appparam=http%3A%2F%2Ffeeds%2Efeedburner%2Ecom%2Fb logspot%2FEwRG&auth=&numberlines=5&subtext=0&inline=0&tooltips=1&newwindow=0&xheight=270&xwidth=210&mininame=rsscontainer&uri=yourminis%2Fyourminis%2Fmini%3Arsscontainer&width=200&height=260&swfurl=%2Fwidget%5Frsscontainer%2Eswf&title=Java%20Connection&" type="application/x-shockwave-flash" allowScriptAccess="always"></embed><br /><a title="For more widgets please visit www.yourminis.com" href="http://www.yourminis.com/index_minis.aspx?embeddedmini" target="_blank"><img border="0" alt="For more widgets please visit www.yourminis.com" src="http://www.yourminis.com/images/poweredby.png"/></a></p></div>
<div id="apDiv11"><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="FG9NFCP2TDMHW">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
<div id="apDiv13"><img src="../events.png" width="62" height="163" border="0" usemap="#Map4" id="Image5" />
<map name="Map4" id="Map4">
<area shape="rect" coords="16,7,42,154" href="../eventsmain.html" onmouseover="MM_swapImage('Image5','','../events2.png',1)" onmouseout="MM_swapImgRestore()" />
</map>
</div>
<div id="apDiv14"><img src="../vols2.png" width="391" height="47" border="0" usemap="#Map5" id="Image6" />
<map name="Map5" id="Map5">
<area shape="rect" coords="5,10,384,32" href="../volunteer.html" onmouseover="MM_swapImage('Image6','','../vols3.png',1)" onmouseout="MM_swapImgRestore()" />
</map>
</div>
</body>
</html>

mangofreak
04-20-2010, 03:01 AM
It seems that the problem is not on the way you are implementing thickbox but your links. i.e. ../calendar.html should be calendar.html, because it is in the same directory.

Try that.

Corrosive
04-20-2010, 07:08 AM
Welcome to the forum. Please use code tags when posting code as it helps to keep everything neat and readable. Thanks :)