Adding Lightbox into Netobjects

April 22, 200917 yr

Hi there everyone!

I have just joined the forum so hope to be around for a while, I design Oak Timber frames but also have designed the company website so I am a newbie at the Website Design game.

I am looking to add a Lightbox 2 into the site, so the pictures show in the box etc, etc and am running into problems getting it to work.

I noticed on this forum a thread running along the same lines and read it with interest, yet still having probs.

Thread is below:

The Thread

There is a step by step guide written by Clearcutdesignz for Smoothonline. It seems to work for Smooth however, I am using the same editor and when I add the given text into my header and publish the site to preview it. A window pops up warning me that a script I am using will make my pc slow or unresponsive if I continue?

I have followed the instructions word for word and cut and paste the text so - i am not sure what I am doing wrong.

I wonder if any one can help?

Thanks for reading my plea.

Tony

April 22, 200917 yr

We can't help you if you don't, either provide a link to your work or post you code in the forum. Guessing what is wrong never seem to do the trick

April 22, 200917 yr

Author

We can't help you if you don't, either provide a link to your work or post you code in the forum. Guessing what is wrong never seem to do the trick

Here is the code that I have put into my head as per the advice given by clearcutdesignz in the thread i linked to.

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

When I publish (i am using netobjects 11) the site to the local publish folder - a window opens up telling me the script i am using is taking a long time to load and my slow my pc down or it will become unresponsive.

Very new at this so bear with me

Cheers

April 22, 200917 yr

I suggest you go to the Lightbox site

Have a read, then download all the latest files.

The main problem is making sure you point to the correct files e.g. your javascript files are in a folder called "js", the style is in a folder called "css" as per the code. You also need to makes sure that the images are also in the correct folder

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

April 24, 200917 yr

Author

Hi there again

I have been to the lightbox site and read up.

I have created a page from netobjects, as soon as i add the code into the head and publish it I get the unresponsive message.

Here is the code from the page I have put all the files contained into the root of the site in there respective folders

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="Generator" content="NetObjects Fusion 11 for Windows">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />


<script type="text/javascript">
<!--
function F_loadRollover(){} function F_roll(){}
//-->
</script>
<script type="text/javascript" src="./assets/rollover.js">
</script>
<link rel="stylesheet" type="text/css" href="./html/fusion.css">
<link rel="stylesheet" type="text/css" href="./html/style.css">
<link rel="stylesheet" type="text/css" href="./html/site.css">
</head>
<body style="margin: 0px;">
<table cellpadding="0" cellspacing="0" border="0" width="710">
 <tr valign="top" align="left">
  <td>
   <table border="0" cellspacing="0" cellpadding="0" width="142">
    <tr valign="top" align="left">
     <td width="12" height="65"><img src="./assets/images/autogen/clearpixel.gif" width="12" height="1" border="0" alt=""></td>
     <td width="5"><img src="./assets/images/autogen/clearpixel.gif" width="5" height="1" border="0" alt=""></td>
     <td></td>
     <td width="42"><img src="./assets/images/autogen/clearpixel.gif" width="42" height="1" border="0" alt=""></td>
    </tr>
    <tr valign="top" align="left">
     <td height="24"></td>
     <td colspan="3" width="130">
      <table id="NavigationBar1" border="0" cellspacing="0" cellpadding="0" width="130">
       <tr valign="top" align="left">
        <td width="130" height="24"><a href="./index.html" class="nof-navPositioning" onmouseover="F_loadRollover('NavigationButton1','',0);F_roll('NavigationButton1',1)" onmouseout="F_roll('NavigationButton1',0)"><img id="NavigationButton1" name="NavigationButton1" height="24" width="130" src="./assets/images/autogen/Home_Hp3_1.gif" onmouseover="F_loadRollover(this,'Home_HRp4_1.gif',0)" border="0" alt="Home" title="Home"></a></td>
       </tr>
      </table>
     </td>
    </tr>
    <tr valign="top" align="left">
     <td colspan="4" height="416"></td>
    </tr>
    <tr valign="top" align="left">
     <td colspan="2" height="43"></td>
     <td width="83"><a href="http://www.netobjects.com"><img id="Picture3" height="43" width="83" src="./assets/images/BuiltWithNOF.gif" border="0" alt="Web Design" title="Web Design"></a></td>
     <td></td>
    </tr>
   </table>
  </td>
  <td>
   <table border="0" cellspacing="0" cellpadding="0" width="568">
    <tr valign="top" align="left">
     <td width="8" height="10"><img src="./assets/images/autogen/clearpixel.gif" width="8" height="1" border="0" alt=""></td>
     <td></td>
    </tr>
    <tr valign="top" align="left">
     <td height="45"></td>
     <td width="560"><img id="Banner1" height="45" width="560" src="./assets/images/autogen/Home_NnBanner.gif" border="0" alt="Home" title="Home"></td>
    </tr>
   </table>
   <table border="0" cellspacing="0" cellpadding="0">
    <tr valign="top" align="left">
     <td width="8" height="468"><img src="./assets/images/autogen/clearpixel.gif" width="8" height="1" border="0" alt=""></td>
     <td></td>
    </tr>
    <tr valign="top" align="left">
     <td></td>
     <td width="560" class="TextNavBar" style="text-align: center;">[Home]</td>
    </tr>
   </table>
  </td>
 </tr>
</table>
</body>
</html>

Please please can someone help me i am tearing my hair out.

Regards everyone

Tony

April 24, 200917 yr

I don't see any code in your code which activates the lightbox (see below - taken from the lighbox website)

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

It would help if you could post a link to your website, so that I/we can check properly

April 24, 200917 yr

Are the Lightbox .js and .css files in their correct folders belowe the document root?, ie...

index.html

/js - [lighbox js files]

/css - [lightbox css file]

The easiest way to sort this is to put the page up on the web somewhere, troubleshooting what's going on on someones system is near impossble

April 24, 200917 yr

Author

I don't see any code in your code which activates the lightbox (see below - taken from the lighbox website)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="Generator" content="NetObjects Fusion 11 for Windows">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />


<script type="text/javascript">
<!--
function F_loadRollover(){} function F_roll(){}
//-->
</script>
<script type="text/javascript" src="./assets/rollover.js">
</script>
<link rel="stylesheet" type="text/css" href="./html/fusion.css">
<link rel="stylesheet" type="text/css" href="./html/style.css">
<link rel="stylesheet" type="text/css" href="./html/site.css">
</head>
<body style="margin: 0px;">


<a href="images/image_1.jpg" alt="Image 1" rel="lightbox"><img src="images/thumbnail_1.jpg" alt="thumbnail" /></a>
<a href="images/image_2.jpg" alt="Image 1" rel="lightbox"><img src="images/thumbnail_2.jpg" alt="thumbnail" /></a>
<a href="images/image_3.jpg" alt="Image 1" rel="lightbox"><img src="images/thumbnail_3.jpg" alt="thumbnail" /></a>

<table cellpadding="0" cellspacing="0" border="0" width="710">
 <tr valign="top" align="left">
  <td>
   <table border="0" cellspacing="0" cellpadding="0" width="142">
    <tr valign="top" align="left">
     <td width="12" height="65"><img src="./assets/images/autogen/clearpixel.gif" width="12" height="1" border="0" alt=""></td>
     <td width="5"><img src="./assets/images/autogen/clearpixel.gif" width="5" height="1" border="0" alt=""></td>
     <td></td>
     <td width="42"><img src="./assets/images/autogen/clearpixel.gif" width="42" height="1" border="0" alt=""></td>
    </tr>
    <tr valign="top" align="left">
     <td height="24"></td>
     <td colspan="3" width="130">
      <table id="NavigationBar1" border="0" cellspacing="0" cellpadding="0" width="130">
       <tr valign="top" align="left">
        <td width="130" height="24"><a href="./index.html" class="nof-navPositioning" onmouseover="F_loadRollover('NavigationButton1','',0);F_roll('NavigationButton1',1)" onmouseout="F_roll('NavigationButton1',0)"><img id="NavigationButton1" name="NavigationButton1" height="24" width="130" src="./assets/images/autogen/Home_Hp3_1.gif" onmouseover="F_loadRollover(this,'Home_HRp4_1.gif',0)" border="0" alt="Home" title="Home"></a></td>
       </tr>
      </table>
     </td>
    </tr>
    <tr valign="top" align="left">
     <td colspan="4" height="416"></td>
    </tr>
    <tr valign="top" align="left">
     <td colspan="2" height="43"></td>
     <td width="83"><a href="http://www.netobjects.com"><img id="Picture3" height="43" width="83" src="./assets/images/BuiltWithNOF.gif" border="0" alt="Web Design" title="Web Design"></a></td>
     <td></td>
    </tr>
   </table>
  </td>
  <td>
   <table border="0" cellspacing="0" cellpadding="0" width="568">
    <tr valign="top" align="left">
     <td width="8" height="10"><img src="./assets/images/autogen/clearpixel.gif" width="8" height="1" border="0" alt=""></td>
     <td></td>
    </tr>
    <tr valign="top" align="left">
     <td height="45"></td>
     <td width="560"><img id="Banner1" height="45" width="560" src="./assets/images/autogen/Home_NnBanner.gif" border="0" alt="Home" title="Home"></td>
    </tr>
   </table>
   <table border="0" cellspacing="0" cellpadding="0">
    <tr valign="top" align="left">
     <td width="8" height="468"><img src="./assets/images/autogen/clearpixel.gif" width="8" height="1" border="0" alt=""></td>
     <td></td>
    </tr>
    <tr valign="top" align="left">
     <td></td>
     <td width="560" class="TextNavBar" style="text-align: center;">[Home]</td>
    </tr>
   </table>
  </td>
 </tr>
</table>
</body>
</html>

Thanks again

April 24, 200917 yr

I've tried your code and it works

However, the caveats ..

I've had to change the links to point to my directory structure
I don't have the other CSS and js files (see list below), which may conflict with the style/running of the lightbox

<script type="text/javascript" src="assets/rollover.js"></script>
<link rel="stylesheet" type="text/css" href="./html/fusion.css">
<link rel="stylesheet" type="text/css" href="./html/style.css">
<link rel="stylesheet" type="text/css" href="./html/site.css">

I think you have to publish and be damned

April 25, 200917 yr

I had a real headache with lightbox once, because of a malformed doctype statement... your doctype looks fine, just thought I'd throw it out there...

Adding Lightbox into Netobjects

Featured Replies

Create an account or sign in to comment

Recently Browsing 0

Member Statistics

Forum Statistics

Join WDF

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)