PDA

View Full Version : thickbox problem


andy1212
11-19-2010, 12:48 AM
I'm designing an image gallery and stumbled upon the thickbox extension. It looked really cool so I downloaded it and set it up with dreamweaver. I set up the page so that when you click a thumbnail of a bigger image, the bigger image would open up in thickbox. The gallery works fine when testing the page from dreamweaver but when I upload the page to my host and all the necessary files that go along with the thickbox, when I click on the thumbnail images, the bigger image opens up in a new window. I have no clue what could be going wrong because I know very little about java script. I tried other extensions like lightbox and colorbox and when i test lightbox from dreamweaver, when clicking a thumbnail the image would open up in a new window with a white background and when I uploaded my page to my host, the same thing happened. Colorbox didn't work for me at all, when I clicked on the thumbnails the bigger pictures wouldn't even open. So I resorted back to thickbox because at least it worked fine when testing from dreamweaver, but how can I get it to work when uploaded to the web. here is my code. I took out the business name, info and links so it doesn't get referenced in any search engines.

<!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>Home</title>
<style type="text/css">
<!--
body {
background-color: #FFF;
margin: 0px;
padding: 0px;
}
#header {
width: 100%;
height: 200px;
}
#headerimage {
width: 1000px;
height: 200px;
margin: 0 auto;
}
#middle {
background-image: url(../images/back.jpg);
background-repeat: repeat-x;
width: 100%;
height: 40px;
position:relative;
margin-left:auto;
margin-right:auto;
display: inline-block;
}
#menu {
width: 50%;
height: 40px;
padding-left: 20px;
margin-left:auto;
margin-right:auto;
display: inline-block;
}
#salonlmsg {
width: 50%;
height: 40px;
position:absolute;
top:0px;
right:0px;
display: inline-block;
}
.menutext {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #70878F;
text-align: left;
text-decoration: none;
margin-top: 10px;
word-spacing: 10px;
}
.salonlmsgtext {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #70878F;
text-align: right;
padding-right: 20px;
text-decoration: none;
margin-top: 10px;
display: inline-block;
display: block;
}
a:hover {
color: #06C;
}
a:link2 {
color: #666;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
#Services {
background-image: url(../images/flashback.png);
background-repeat: repeat-x;
width: 100%;
height: 300px;
}
#footer {
background-image: url(../images/stylistsfooter.png);
background-repeat: no-repeat;
background-position: center;
background-position: top;
width: 1000px;
height: 940px;
margin: 0 auto;
display: inline-block;
display: block;
}
.th1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #4E7A9E;
padding-left: 14px;
padding-top: 20px;
text-decoration: none;
display: block;
}
.th2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #999;
text-decoration: none;
}
.th3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #779CC6;
padding-top: 30px;
text-decoration: none;
}
.th4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
color: #666;
padding-left: 14px;
}
.th5 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
text-decoration: none;
color: #666;
padding-left: 14px;
}
.th6 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #666;
text-decoration: none;
}
.th7 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #666;
text-decoration: none;
}
.th8 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
padding-left: 50px;
color: #666;
text-decoration: none;
}
.th9 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #06C;
text-decoration: none;
}
.th10 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #666;
text-decoration: underline;
}
.th11 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #666;
text-decoration: none;
padding-top: 5px;
}
.th12 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #666;
text-decoration: none;
}
.cap1 {
width: 300px;
height: 60px;
display: inline-block;
display: block;
}
#cap2 {
width: 300px;
height: 60px;
display: inline-block;
display: block;
float: left;
}
#bottommenu {
width: 1000px;
height: 150px;
margin: 0 auto;
display: inline-block;
display: block;
}
-->
</style>
<script src="../Scripts/jquery-latest.js" type="text/javascript"></script>
<script src="scripts/thickbox.js" type="text/javascript"></script>
<script src="../Scripts/jquery-latest.js" type="text/javascript"></script>
<script src="../Scripts/jquery-latest.js" type="text/javascript"></script>
<script src="../Scripts/jquery-latest.js" type="text/javascript"></script>
<script src="../Scripts/jquery-latest.js" type="text/javascript"></script>
<link href="css/thickbox.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header">
<div id="headerimage"><img src="../images/header2.png" width="1000" height="200" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="44,12,182,198" href="http://www.website.com" target="_self" />
<area shape="rect" coords="516,105,785,186" href="http://www.website.com" target="_self" />
</map>
</div>
</div>
<div id="middle">
<div id="menu" style="float: left;">
<p class="menutext"><a href="http://www.website.com" target="_self" class="menutext">Home</a> ⁞ <a href="http://www.website.com/service.html" target="_self" class="menutext">Services</a> ⁞ <a href="http://www.website.com/sylists.html" target="_self" class="menutext">Stylists</a> ⁞ <a href="http://www.website.com/appointments.html" target="_self" class="menutext">Appointments</a></p>
</div>
<div id="salonlmsg" style="float: right;">
<p class="salonlmsgtext">Click the logo to go to the website.
</div>
</div>
<div id="Services" align="center"><img src="../images/servicesmiddle.png" width="1000" height="300" /></div>
<div id="footer" style="margin-top: 10px;">
<div class="th1" style="line-height: 1em; float: left; width: 980px;">This &amp; That Stylists
<p class="th3" style="line-height: 1.25em;">Click on images to enlarge.</p>
<br />
<table width="900" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" style="width: 300px; height: 66px;"><a href="../images/photographs/employees/9.JPG" class="thickbox" rel="thickbox_slide1"><img src="../images/photographs/smallpics/10.jpg" width="100" height="66" border="0" /></a></td>
<td align="left" valign="top" style="width: 300px; height: 66px;"><a href="../images/photographs/employees/10.JPG" class="thickbox" rel="thickbox_slide1"><img src="../images/photographs/smallpics/6.jpg" width="100" height="66" border="0" /></a></td>
<td align="left" valign="top" style="width: 300px; height: 66px;"><a href="../images/photographs/employees/2.JPG" class="thickbox" rel="thickbox_slide1"><img src="../images/photographs/smallpics/2.jpg" width="100" height="66" border="0" /></a></td>
</tr>
<tr>
<td align="left" valign="top" class="th11" style="width: 300px;">Lauri</td>
<td align="left" valign="top" class="th11" style="width: 300px;">Eric</td>
<td align="left" valign="top" class="th11" style="width: 300px;">Taral</td>
</tr>
<tr>
<td align="left" valign="top" class="th12" style="width: 300px;">Owner</td>
<td align="left" valign="top" class="th12" style="width: 300px;">Manager</td>
<td align="left" valign="top" class="th12" style="width: 300px;">Senior</td>
</tr>
<tr>
<td align="left" valign="top" class="th12" style="width: 300px;">This &amp; That</td>
<td align="left" valign="top" class="th12" style="width: 300px;">This</td>
<td align="left" valign="top" class="th12" style="width: 300px;">That</td>
</tr>
<tr>
<td align="left" valign="top" class="th12" style="width: 300px; height: 66px; padding-top: 5px;"><a href="../images/photographs/employees/3.JPG" class="thickbox" rel="thickbox_slide1"><img src="../images/photographs/smallpics/3.jpg" width="100" height="66" border="0" /></a></td>
<td align="left" valign="top" class="th12" style="width: 300px; height: 66px; padding-top: 5px;"><a href="../images/photographs/employees/6.JPG" class="thickbox" rel="thickbox_slide1"><img src="../images/photographs/smallpics/7.jpg" width="100" height="66" border="0" /></a></td>
<td align="left" valign="top" class="th12" style="width: 300px; height: 66px; padding-top: 5px;"><a href="../images/photographs/employees/4.JPG" class="thickbox" rel="thickbox_slide1"><img src="../images/photographs/smallpics/4.jpg" width="100" height="66" border="0" /></a></td>
</tr>
<tr>
<td align="left" valign="top" class="th11" style="width: 300px;">Nathan</td>
<td align="left" valign="top" class="th11" style="width: 300px;">Lisa</td>
<td align="left" valign="top" class="th11" style="width: 300px;">Melanie</td>
</tr>
<tr>
<td align="left" valign="top" class="th12" style="width: 300px;">Senior</td>
<td align="left" valign="top" class="th12" style="width: 300px;">Senior</td>
<td align="left" valign="top" class="th12" style="width: 300px;">Junior</td>
</tr>
<tr>
<td align="left" valign="top" class="th12" style="width: 300px;">This</td>
<td align="left" valign="top" class="th12" style="width: 300px;">That</td>
<td align="left" valign="top" class="th12" style="width: 300px;">This</td>
</tr>
<tr>
<td align="left" valign="top" class="th12" style="width: 300px; height: 66px; padding-top: 5px;"><a href="../images/photographs/employees/16.JPG" class="thickbox" rel="thickbox_slide1"><img src="../images/photographs/smallpics/16.jpg" width="100" height="66" border="0" /></a></td>
<td align="left" valign="top" class="th12" style="width: 300px; height: 66px; padding-top: 5px;"><a href="../images/photographs/employees/15.JPG" class="thickbox" rel="thickbox_slide1"><img src="../images/photographs/smallpics/15.jpg" width="100" height="66" border="0" /></a></td>
<td align="left" valign="top" class="th12" style="width: 300px; height: 66px; padding-top: 5px;"><a href="../images/photographs/employees/8.JPG" class="thickbox" rel="thickbox_slide1"><img src="../images/photographs/smallpics/9.jpg" width="100" height="66" border="0" /></a></td>
</tr>
<tr>
<td align="left" valign="top" class="th11" style="width: 300px;">Matthew</td>
<td align="left" valign="top" class="th11" style="width: 300px;">Abby</td>
<td align="left" valign="top" class="th11" style="width: 300px;">Ashleigh</td>
</tr>
<tr>
<td align="left" valign="top" class="th12" style="width: 300px;">Apprenticing</td>
<td align="left" valign="top" class="th12" style="width: 300px;">Apprenticing</td>
<td align="left" valign="top" class="th12" style="width: 300px;">Junior</td>
</tr>
<tr>
<td align="left" valign="top" class="th12" style="width: 300px;">This</td>
<td align="left" valign="top" class="th12" style="width: 300px;">That</td>
<td align="left" valign="top" class="th12" style="width: 300px;">This</td>
</tr>
<tr>
<td align="left" valign="top" class="th12" style="width: 300px; height: 66px; padding-top: 5px;"><a href="../images/photographs/employees/7.JPG" class="thickbox" rel="thickbox_slide1"><img src="../images/photographs/smallpics/8.jpg" width="100" height="66" border="0" /></a></td>
<td align="left" valign="top" class="th12" style="width: 300px; height: 66px; padding-top: 5px;"><a href="../images/photographs/employees/5.JPG" class="thickbox" rel="thickbox_slide1"><img src="../images/photographs/smallpics/5.jpg" width="100" height="66" border="0" /></a></td>
<td align="left" valign="top" class="th12" style="width: 300px; height: 66px; padding-top: 5px;"><a href="../images/photographs/employees/1.JPG" class="thickbox" rel="thickbox_slide1"><img src="../images/photographs/smallpics/1.jpg" width="100" height="66" border="0" /></a></td>
</tr>
<tr>
<td align="left" valign="top" class="th11" style="width: 300px;">Heather</td>
<td align="left" valign="top" class="th11" style="width: 300px;">Sonja</td>
<td align="left" valign="top" class="th11" style="width: 300px;">Carolyn</td>
</tr>
<tr>
<td align="left" valign="top" class="th12" style="width: 300px;">Senior</td>
<td align="left" valign="top" class="th12" style="width: 300px;">Receptionist</td>
<td align="left" valign="top" class="th12" style="width: 300px;">Esthetician</td>
</tr>
<tr>
<td align="left" valign="top" class="th12" style="width: 300px;">This</td>
<td align="left" valign="top" class="th12" style="width: 300px;">That</td>
<td align="left" valign="top" class="th12" style="width: 300px;">This</td>
</tr>
<tr>
<td align="left" valign="top" class="th12" style="width: 300px; height: 66px; padding-top: 5px;"><a href="../images/photographs/employees/11.JPG" class="thickbox" rel="thickbox_slide1"><img src="../images/photographs/smallpics/11.jpg" width="100" height="66" border="0" /></a></td>
<td align="left" valign="top" class="th12" style="width: 300px; height: 66px; padding-top: 5px;"><a href="../images/photographs/employees/12.JPG" class="thickbox" rel="thickbox_slide1"><img src="../images/photographs/smallpics/12.jpg" width="100" height="66" border="0" /></a></td>
<td align="left" valign="top" class="th12" style="width: 300px; height: 66px; padding-top: 5px;"><a href="../images/photographs/employees/13.JPG" class="thickbox" rel="thickbox_slide1"><img src="../images/photographs/smallpics/13.jpg" width="100" height="66" border="0" /></a></td>
</tr>
<tr>
<td align="left" valign="top" class="th11" style="width: 300px;">Beverly</td>
<td align="left" valign="top" class="th11" style="width: 300px;">Sarah</td>
<td align="left" valign="top" class="th11" style="width: 300px;">Kayla</td>
</tr>
<tr>
<td align="left" valign="top" class="th12" style="width: 300px;">Hair</td>
<td align="left" valign="top" class="th12" style="width: 300px;">Hair</td>
<td align="left" valign="top" class="th12" style="width: 300px;">Apprenticing</td>
</tr>
<tr>
<td align="left" valign="top" class="th12" style="width: 300px;">This</td>
<td align="left" valign="top" class="th12" style="width: 300px;">That</td>
<td align="left" valign="top" class="th12" style="width: 300px;">This</td>
</tr>
<tr>
<td align="left" valign="top" class="th12" style="width: 300px; height: 66px; padding-top: 5px;"><a href="../images/photographs/employees/14.JPG" class="thickbox" rel="thickbox_slide1"><img src="../images/photographs/smallpics/14.jpg" width="100" height="66" border="0" /></a></td>
<td align="left" valign="top" class="th12" style="width: 300px; height: 66px; padding-top: 5px;"><a href="images/thickbox_demo_img1.jpg" class="thickbox" rel="thickbox_slide2"></a></td>
<td align="left" valign="top" class="th12" style="width: 300px; height: 66px; padding-top: 5px;">&nbsp;</td>
</tr>
<tr>
<td align="left" valign="top" class="th11" style="width: 300px;">Melanie</td>
<td align="left" valign="top" class="th12" style="width: 300px;">&nbsp;</td>
<td align="left" valign="top" class="th12" style="width: 300px;">&nbsp;</td>
</tr>
<tr>
<td align="left" valign="top" class="th12" style="width: 300px;">Junior</td>
<td align="left" valign="top" class="th12" style="width: 300px;">&nbsp;</td>
<td align="left" valign="top" class="th12" style="width: 300px;">&nbsp;</td>
</tr>
<tr>
<td align="left" valign="top" class="th12" style="width: 300px;">That</td>
<td align="left" valign="top" class="th12" style="width: 300px;">&nbsp;</td>
<td align="left" valign="top" class="th12" style="width: 300px;">&nbsp;</td>
</tr>
</table>
</div>
</div>
<div id="bottommenu" style="margin-top: 10px;">
<p class="th4" style="line-height: 1em;"><a href="http://www.website.com/contact.html" target="_self" class="th6">Contact Us</a> | <a href="http://www.website.com/sitemap.html" target="_self" class="th6">Sitemap</a> | <a href="http://www.website.com/survey.html" target="_self" class="th7">Take our online survey and get entered into our draw</a></p>
<p class="th5" style="line-height: 1em;"> 2010 This and That All rights reserved. Website design by <a href="http://www.website.com" target="_self" class="th6">No one</a>.</p><br />
<p class="th5" style="line-height: 1em;"><span class="th6" style="line-height: 1em;">Find Thisandthat On: <a href="http://www.website.com" target="_blank"><img src="../images/facebooklogosmall.png" width="30" height="30" border="0" /></a> <span class="th8" style="line-height: 1em;">Find Thatandthis On:</span></span> <a href="http://www.website.com" target="_blank"><img src="../images/facebooklogosmall.png" width="30" height="30" border="0" /></a> <a href="http://twitter.com/YUP" target="_blank"><img src="../images/twitterlogosmall.png" width="30" height="30" border="0" /></a></p>
</div>
</body>
</html>

gentleone
11-19-2010, 06:30 AM
Errr.... maybe a jQuery library of 4 too many?

<script src="../Scripts/jquery-latest.js" type="text/javascript"></script>
<script src="scripts/thickbox.js" type="text/javascript"></script>
<script src="../Scripts/jquery-latest.js" type="text/javascript"></script>
<script src="../Scripts/jquery-latest.js" type="text/javascript"></script>
<script src="../Scripts/jquery-latest.js" type="text/javascript"></script>
<script src="../Scripts/jquery-latest.js" type="text/javascript"></script>

This is enough ;)

<script src="../Scripts/jquery-latest.js" type="text/javascript"></script>
<script src="scripts/thickbox.js" type="text/javascript"></script>

andy1212
11-19-2010, 04:26 PM
thanks for the reply, i'll try that out and post back here with my results.

andy1212
11-19-2010, 04:29 PM
Still doesn't work...

Corrosive
11-19-2010, 04:39 PM
And all your paths are correct so...

<script src="../Scripts/jquery-latest.js" type="text/javascript"></script>
<script src="scripts/thickbox.js" type="text/javascript"></script>

...your JQuery script is a level lower than your thickbox script in your file hierarchy?

andy1212
11-19-2010, 07:02 PM
It's just a host issue, i tried uploading a test page with the thick box to a different hosting account and it worked. I'm just using gofreeserve to test my client's website that I'm designing for her and to show her what it looks like but I forgot that the host is very limited in what it offers and I don't think it supports JQuery or the necessary language that thickbox needs to work. Thanks for the quick responses though!

gentleone
11-19-2010, 08:20 PM
It's just a host issue, i tried uploading a test page with the thick box to a different hosting account and it worked. I'm just using gofreeserve to test my client's website that I'm designing for her and to show her what it looks like but I forgot that the host is very limited in what it offers and I don't think it supports JQuery or the necessary language that thickbox needs to work. Thanks for the quick responses though!

Aha... great and yes I remember someone had this issue too with go-free. The thing with go-free is that there are a lot of onobstructive javascript in the code for all those ugly ads on your page which give conflicts with jQuery and thus not work.

MrJ
12-09-2011, 12:32 PM
Probably its because your active X is being blocked. have you tried allowing it to run?

active X appear probably because it uses java script?