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 11-19-2010, 01:48 AM   #1
andy1212
 
Join Date: Sep 2010
Posts: 17
Default thickbox problem

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.

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>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>
andy1212 is offline   Reply With Quote
Old 11-19-2010, 07:30 AM   #2
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Errr.... maybe a jQuery library of 4 too many?
HTML Code:
<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
HTML Code:
<script src="../Scripts/jquery-latest.js" type="text/javascript"></script>
<script src="scripts/thickbox.js" type="text/javascript"></script>
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 11-19-2010, 05:26 PM   #3
andy1212
 
Join Date: Sep 2010
Posts: 17
Default

thanks for the reply, i'll try that out and post back here with my results.
andy1212 is offline   Reply With Quote
Old 11-19-2010, 05:29 PM   #4
andy1212
 
Join Date: Sep 2010
Posts: 17
Default

Still doesn't work...
andy1212 is offline   Reply With Quote
Old 11-19-2010, 05:39 PM   #5
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

And all your paths are correct so...

Code:
<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?
Corrosive is offline   Reply With Quote
Old 11-19-2010, 08:02 PM   #6
andy1212
 
Join Date: Sep 2010
Posts: 17
Default

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!
andy1212 is offline   Reply With Quote
Old 11-19-2010, 09:20 PM   #7
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Quote:
Originally Posted by andy1212 View Post
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.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 12-09-2011, 01:32 PM   #8
MrJ
 
Join Date: Dec 2011
Posts: 1
Default

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?
MrJ 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:09 PM.


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