logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > Javascript and JS frameworks
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 04-19-2010, 03:30 PM   #1
benjamiknight
 
Join Date: Apr 2010
Posts: 2
Exclamation Lightbox Nightmare

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?
benjamiknight is offline   Reply With Quote
Old 04-19-2010, 05:04 PM   #2
mangofreak
mangofreak's Avatar
 
Join Date: Jan 2006
Location: Toronto-Canada
Posts: 444
Default

Lightbox, has a simple set of instructions. Have you checked there?
Also, seeing your code could help us, help you
__________________
J.
DW | FW | HTML | CSS | ASP | some PHP | Windows | Ubuntu
mangofreak is offline   Reply With Quote
Old 04-19-2010, 05:11 PM   #3
benjamiknight
 
Join Date: Apr 2010
Posts: 2
Default

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.

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>
<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%2Fblogspot%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>

Last edited by Corrosive; 04-20-2010 at 06:07 AM..
benjamiknight is offline   Reply With Quote
Old 04-20-2010, 02:01 AM   #4
mangofreak
mangofreak's Avatar
 
Join Date: Jan 2006
Location: Toronto-Canada
Posts: 444
Default

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.
__________________
J.
DW | FW | HTML | CSS | ASP | some PHP | Windows | Ubuntu
mangofreak is offline   Reply With Quote
Old 04-20-2010, 06:08 AM   #5
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

Welcome to the forum. Please use code tags when posting code as it helps to keep everything neat and readable. Thanks
Corrosive is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 03:17 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com