Adobe Community: DW cs5 using Lightbox on template page

PyrateJIm Calculating status...

Currently Being Moderated

DW cs5 using Lightbox on template page

Sep 3, 2012 6:24 AM

I am using DW cs5 on a 64-bit Windows system. I have created my template page to be used through out my site (not published as of yet). My main body is an "editable" area where I have inserted a table for pictures/thumbnails on several pages. I want to use "Lightbox" with these pictures to create a floating/pop up, larger version. The problem I am having is that when I try run the pic through "Lightbox" (once links and everything have been identified in DW) I get a DW error message that says the process can not be completed as page is locked by template, even though this is within an editable body section.

How do I get "Lightbox" to work as it should with these pictures without have to unlink these pages from the main template page?

Thanks

2802 Views 24 Replies Latest reply: PyrateJIm, Sep 16, 2012 6:54 PM

Replies

Currently Being Moderated

1. MurraySummers,

Sep 3, 2012 6:30 AM in reply to PyrateJIm

Report

Show us the code on your template page, please. The 'locked' region likely refers not to your body's editable region, but the lack of a suitable location in the head for the javascript code.

|
Mark as:
Currently Being Moderated

2. PyrateJIm,

Sep 3, 2012 4:49 PM in reply to MurraySummers

Report

Sorry for the delay in responding, I had to get home to get the code. Here is the template page code in its entirity:

<!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>Untitled Document</title>



<style type="text/css">
.container {
width: auto;
max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
min-width: 780px;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
background-color: #FFF;
background-image: url(../images/MainPages/underwater_bckgrnd.jpg);
background-repeat: no-repeat;
}
.Header1-Centered {
text-align: center;
height: 108px;
width: auto;
background-image: url(../images/MainPages/header_bckgrnd.jpg);
}
#apDiv1 {
position:absolute;
width:90px;
height:750px;
z-index:1;
left: 5px;
top: 29px;
}
#apDiv2 {
position:absolute;
width:1123px;
height:637px;
z-index:2;
left: 103px;
top: 145px;
overflow: scroll;
bottom: auto;
}
#apDiv3 {
position:absolute;
width:90px;
height:754px;
z-index:3;
left: 1235px;
top: 28px;
}
#apDiv4 {
position:absolute;
width:1090px;
height:199px;
z-index:1;
left: -1085px;
top: auto;
text-align: center;
}
#apDiv3 #apDiv4 table tr td {
text-align: center;
}
.Copywrite {
font-size: 14px;
bottom: auto;
}
#apDiv3 #apDiv4 table {
font-size: 18px;
}
body {
background-image: url(../images/MainPages/underwater_bckgrnd.jpg);
width: 1250px;
overflow: scroll;
height: auto;
}
a:link {
color: #00F;
}
a:visited {
color: #F0F;
}
a:hover {
color: #F00;
}
a:active {
color: #0F0;
}
</style>
</head>
<body>

<div class="Header1-Centered">
<h1>Page Name/Header</h1>
</div>

<div id="apDiv1"><img src="../images/MainPages/anchor chain lt.jpg" width="90" height="750" alt="anchor_lft" /></div>
<p> </p>

<div id="apDiv2">body editable</div>

<div id="apDiv3"><img src="../images/MainPages/anchor chain rt.jpg" width="90" height="750" alt="anchor_rt" />
<div id="apDiv4">
    <hr width="1080" />
    <table width="1080" height="98" border="0">
      <tr>
        <td style="font-size: 18px"><a href="../who_is_hrd.html" target="_self">Who is HRD, Inc.</a></td>
        <td style="font-size: 18px"><a href="../treasure_gallery.html" target="_self">Treasure Gallery</a></td>
        <td style="font-size: 18px"><a href="../Main Page.html" target="_self">HRD, Inc.</a></td>
        <td style="font-size: 18px"><a href="../facebook.com/hrd1715" target="_new">HRD's Facebook Page</a></td>
        <td style="font-size: 18px"><a href="../www.ioffer.com/selling/sales1715" target="_new">HRD, Inc. Store</a></td>
      </tr>
      <tr>
        <td style="font-size: 18px"><a href="../digital_camera_masks.html" target="_self">Digital Camera Masks</a></td>
        <td style="font-size: 18px"><a href="../dpv_scooters.html" target="_self">DPV - Scooters</a></td>
        <td style="font-size: 18px"><a href="../treasure_coins.html" target="_self">1715 Treasure Coins</a></td>
        <td style="font-size: 18px"><a href="../www.cafepress.com/hrd1715" target="_new">HRD, Inc. Merchandise</a></td>
        <td style="font-size: 18px"><a href="../remote_sensing.html" target="_self">Remote Sensing</a></td>
      </tr>
      <tr>
        <td style="font-size: 18px"><a href="../presentations_lectures.html" target="_self">Presentations/Lectures</a></td>
        <td style="font-size: 18px"><a href="../shipwreck_story.html" target="_self">1715 Shipwreck Story</a></td>
        <td style="font-size: 18px"><a href="../henrietta_marie_story.html" target="_self">Henrietta Marie Story</a></td>
        <td style="font-size: 18px"><a href="../geo_documentary.html" target="_self">Geo Documentary</a></td>
        <td style="font-size: 18px"><a href="../treasure_links.html" target="_self">Treasure Links</a></td>
      </tr>
      <tr>
        <td colspan="5" align="center"><hr width="1080" />
          <p class="Copywrite">Material within property of HRD, Inc. ©   2003-2012. <br />
            You <strong><em><U>must </U></em></strong>request before copying text or graphics<br />
        <a href="Webmaster
mailto:michonjd@hrd1715.com">Webmaster</a></p></td>
      </tr>
    </table>
</div>
</div>
<p> </p>
</body>
</html>

|
Mark as:
Currently Being Moderated

3. PyrateJIm,

Sep 3, 2012 4:53 PM in reply to PyrateJIm

Report

ONce I set the source link and the link for the larger picture, I am clicking on the 4-level tool and am simply typing in the text for the image. Once I click on okay, the actual message that appears from Dreamweaver reads:

"Making this change would require changing code that is locked by a template or translator. The change will be discarded."

|
Mark as:
Currently Being Moderated

4. PyrateJIm,

Sep 4, 2012 2:24 PM in reply to MurraySummers

Report

Please help if you can. I am not sure what code you are referring to as I am new to all this and am trying to learn so many parts at the same time.

Thank you.

|
Mark as:
Currently Being Moderated

5. Nancy O.,

Sep 4, 2012 2:50 PM in reply to PyrateJIm

Report

jQuery has 3 parts to it.
A link in the <head> tag to the core library.
A link in the <head> tag to the plug-in scripts and CSS files (if any).
A function code to invoke the plug-in. I usually put this just before the closing </body> tag.

Open your Template.dwt file.

Insert the links in your <head> tags.


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>


<script type="text/javascript" src="../Scripts/plug-in.js"></script>
<link href="../Styles/plug-in.css" rel="stylesheet" type="text/css">

</head>

Add function code near the bottom of your Template.


<script type="text/javascript">
$(document).ready(function() {
etc....
</script>

</body>
</html>

Save Template, update child pages.

Now you have most of what you need to run your plug-in on every site page.

Open the child page, add images, etc.. with appropriate plug-in classes.

Nancy O.

|
Mark as:
Currently Being Moderated

6. PyrateJIm,

Sep 4, 2012 4:07 PM in reply to Nancy O.

Report

Thank you Nancy O. I am cutting/pasting exactly what you have and I am getting a syntax error for the following:


<script type="text/javascript">
$(document).ready(function() {
etc....
</script>

</body>
</html>

It does not like the "ect...." Is there something that I need to close or delete, or replace the "ect...." with?

|
Mark as:
Currently Being Moderated

7. Nancy O.,

Sep 4, 2012 4:21 PM in reply to PyrateJIm

Report

I gave you generic basics to follow. You must modify paths/filenames to scripts and CSS files in your site. You also must use the appropriate function code for your particular plug-in (whatever that is).

Nancy O.

|
Mark as:
Currently Being Moderated

8. Nancy O.,

Sep 4, 2012 4:29 PM in reply to PyrateJIm

Report

Incidentally, there must be a dozen different Lightbox scripts out there. I like Fancybox because it's flexible and you can do more than just image galleries with it.
http://fancybox.net/howto

Nancy O.

|
Mark as:
Currently Being Moderated

9. PyrateJIm,

Sep 4, 2012 5:29 PM in reply to Nancy O.

Report

Thanks Nancy, but with what you have given me, and the fact that I am a complete novice at this, I am beginning to think that I need to forget about using a "lightbox" all together. Code is something I am just starting to learn as I am an old WYSIWYG guy and trying to follow that scares the begebers out of me.

|
Mark as:
Currently Being Moderated

10. Nancy O.,

Sep 5, 2012 10:20 AM in reply to PyrateJIm

Report

If you don't overcome your fear of code now, you'll never make great web sites.
Code is very simple when you understand the basics. If you make mistakes, so what? Everyone makes mistakes. That's how we all learn. Use Ctrl+Z to undo. Use code validation tools to check your work during development. Don't fall back on old, comfortable habits. You just won't get anywhere that way.

Now, what exactly don't you understand about using Fancybox?

Nancy O.

|
Mark as:
Currently Being Moderated

11. PyrateJIm,

Sep 7, 2012 5:16 PM in reply to Nancy O.

Report

I have been playing with the code for 2 days and have found a hundred different things that dont work. I am using "4 Level Lightbox" which is a Dreamweaver extension. I am working withthe code that you (Nancy O.) supplied but still get the same error message. It seems to have something to do with this portion:


<script type="text/javascript">
$(document).ready(function() {
etc....
</script>

</body>
</html>

It doesnt like the: ect.... Is this suppose to be replaced with something else? What about the " (function() { " is this to be repalced by something or left as is?

|
Mark as:
Currently Being Moderated

12. John Waller,

Sep 7, 2012 5:35 PM in reply to PyrateJIm

Report

That's boilerplate generic script. It'll never work as written verbatim because it's meaningless.

Needs to be customised to your page and website. Refer post 7 from Nancy.

In her post 5 she was merely outlining principles for how jQuery works. It wasn't a precise step-by-step tutorial, which I suspect you've assumed that it was.

jQuery has three slots for code:

Link to the main jQuery file
Link to the specific Javascript and CSS for the plugin you want to use
Add the function code to the body of the page.

If you struggle with that, you may be better off paying for a commercial point-and-click WYSIWYG Lightbox solution for now.

|
Mark as:
Currently Being Moderated

13. PyrateJIm,

Sep 7, 2012 8:40 PM in reply to John Waller

Report

From what I have learned, and read from several other forums about this exact same error, is that when using templates, this is a very common error when trying to use a lightbox on a template created page. That as soon as the page is removed from the lightbox works fine. This is is my case as well. As soon as I remove the page from being linked to the template page, the light box works perfectly and all the code that is required is already installed.

So this seems to be my solution. Design the page with the template. Once done, unlink it from the template and lightbox will work fine. When updates are needed, THEN, relink to the template (lightbox pics will now open in another tab instead) make changes to template page, update, then unlink page/s from template and lightbox will return to working as needed.

It appears that some things dont play well with templates. Lightbox's happen to be one ofthem.

|
Mark as:
Currently Being Moderated

14. John Waller,

Sep 7, 2012 9:19 PM in reply to PyrateJIm

Report

PyrateJIm wrote:

It appears that some things dont play well with templates. Lightbox's happen to be one ofthem.
No, thats not the case.

Templates can have editable regions for scripts to be placed into them so dynamic widgets such as lightboxes work correctly.

There's no need to link and unlink pages to and from Templates. That workflow creates unnecessary work.

|
Mark as:
Currently Being Moderated

15. PyrateJIm,

Sep 8, 2012 6:20 AM in reply to John Waller

Report

Good morning,

I am trying to do this within an editable region on a page created off my template page. Everything works fine/editable, with the exception of the lightbox. In doing a google search with the exact error message I am recieving, I have found that it is a common issue and may be related to a bug within the CSS code/format.

I broke down and asked my wife for help, as she is very familiar with DW cs5 and coding and after 4 hours, she gave up. Code is good, but lightbox is not. She even tried it on her web site that has a variety of add-ons/extensions in the editable areas of a templatge created page, and even that was giving off the same error message and not working.

Looking at the code I posted in #2, do you see anything missing? This is 100% my template page. Obviosuly, I must be missing something that will allow this widget to work properly withing the editable region.

|
Mark as:
Currently Being Moderated

16. Nancy O.,

Sep 8, 2012 10:52 AM in reply to PyrateJIm

Report

Why can't you put the essential Lightbox code into your Template <head> tags?

Then add the images and classes to editable regions in your Child page?

That's how I would do it.

Nancy O.

|
Mark as:
Currently Being Moderated

17. PyrateJIm,

Sep 8, 2012 8:31 PM in reply to Nancy O.

Report

HI Nancy, that is what I have done, yet it doesnt work.

So, I am posting two sets of codes. The first set is my complete template page (as soon above) the second set is from a test page that I ahve created directly from the template page, with a single picture in the editable body region that I am trying to convert to a lightbox photo. Although a test page, there is no difference, other than some text changes, from an actual page that I am wanting for the web site. Please tell me what, if anything, I am missing, as it bewilders both me and my wife, who does code.    Thanks.

From the template page:
<!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="stylesheet" href="lightbox_assets/css/lightbox.css" type="text/css" media="screen" />
<script src="lightbox_assets/js/prototype.js" type="text/javascript"></script>
<script src="lightbox_assets/js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="lightbox_assets/js/lightbox.js" type="text/javascript"></script>



<script type="text/javascript" src="../Scripts/plug-in.js"></script>
<link href="../Styles/plug-in.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>



<style type="text/css">
.container {
width: auto;
max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
min-width: 780px;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
background-color: #FFF;
background-image: url(../images/MainPages/underwater_bckgrnd.jpg);
background-repeat: no-repeat;
}
.Header1-Centered {
text-align: center;
height: 108px;
width: auto;
background-image: url(../images/MainPages/header_bckgrnd.jpg);
}
#apDiv1 {
position:absolute;
width:90px;
height:750px;
z-index:1;
left: 5px;
top: 29px;
}
#apDiv2 {
position:absolute;
width:1123px;
height:637px;
z-index:2;
left: 102px;
top: 135px;
overflow: scroll;
bottom: auto;
}
#apDiv3 {
position:absolute;
width:90px;
height:754px;
z-index:3;
left: 1235px;
top: 28px;
}
#apDiv4 {
position:absolute;
width:1090px;
height:199px;
z-index:1;
left: -1085px;
top: auto;
text-align: center;
}
#apDiv3 #apDiv4 table tr td {
text-align: center;
}
.Copywrite {
font-size: 14px;
bottom: auto;
}
#apDiv3 #apDiv4 table {
font-size: 18px;
}
body {
background-image: url(../images/MainPages/underwater_bckgrnd.jpg);
width: 1250px;
overflow: scroll;
height: auto;
}
a:link {
color: #00F;
}
a:visited {
color: #F0F;
}
a:hover {
color: #F00;
}
a:active {
color: #0F0;
}
</style>
</head>
<body>

<div class="Header1-Centered">
<h1>Page Name/Header</h1>
</div>

<div id="apDiv1"><img src="../images/MainPages/anchor chain lt.jpg" width="90" height="750" alt="anchor_lft" /></div>

<div id="apDiv2">body editable</div>

<div id="apDiv3"><img src="../images/MainPages/anchor chain rt.jpg" width="90" height="750" alt="anchor_rt" />
<div id="apDiv4">
    <hr width="1080" />
    <table width="1080" height="98" border="0">
      <tr>
        <td style="font-size: 18px"><a href="../who_is_hrd.html" target="_self">Who is HRD, Inc.</a></td>
        <td style="font-size: 18px"><a href="../treasure_gallery.html" target="_self">Treasure Gallery</a></td>
        <td style="font-size: 18px"><a href="../Main Page.html" target="_self">HRD, Inc.</a></td>
        <td style="font-size: 18px"><a href="../facebook.com/hrd1715" target="_new">HRD's Facebook Page</a></td>
        <td style="font-size: 18px"><a href="../www.ioffer.com/selling/sales1715" target="_new">HRD, Inc. Store</a></td>
      </tr>
      <tr>
        <td style="font-size: 18px"><a href="../digital_camera_masks.html" target="_self">Digital Camera Masks</a></td>
        <td style="font-size: 18px"><a href="../dpv_scooters.html" target="_self">DPV - Scooters</a></td>
        <td style="font-size: 18px"><a href="../treasure_coins.html" target="_self">1715 Treasure Coins</a></td>
        <td style="font-size: 18px"><a href="../www.cafepress.com/hrd1715" target="_new">HRD, Inc. Merchandise</a></td>
        <td style="font-size: 18px"><a href="../remote_sensing.html" target="_self">Remote Sensing</a></td>
      </tr>
      <tr>
        <td style="font-size: 18px"><a href="../presentations_lectures.html" target="_self">Presentations/Lectures</a></td>
        <td style="font-size: 18px"><a href="../shipwreck_story.html" target="_self">1715 Shipwreck Story</a></td>
        <td style="font-size: 18px"><a href="../henrietta_marie_story.html" target="_self">Henrietta Marie Story</a></td>
        <td style="font-size: 18px"><a href="../geo_documentary.html" target="_self">Geo Documentary</a></td>
        <td style="font-size: 18px"><a href="../treasure_links.html" target="_self">Treasure Links</a></td>
      </tr>
      <tr>
        <td colspan="5" align="center"><hr width="1080" />
          <p class="Copywrite">Material within property of HRD, Inc. ©   2003-2012. <br />
            You <strong><em><U>must </U></em></strong>request before copying text or graphics<br />
        <a href="Webmaster
mailto:michonjd@hrd1715.com">Webmaster</a></p></td>
      </tr>
    </table>
</div>
</div>

</body>
</html>

From the test page:
<!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="stylesheet" href="lightbox_assets/css/lightbox.css" type="text/css" media="screen" />
<script src="lightbox_assets/js/prototype.js" type="text/javascript"></script>
<script src="lightbox_assets/js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="lightbox_assets/js/lightbox.js" type="text/javascript"></script>



<script type="text/javascript" src="Scripts/plug-in.js"></script>
<link href="Styles/plug-in.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>testing page</title>



<style type="text/css">
.container {
width: auto;
max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
min-width: 780px;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
background-color: #FFF;
background-image: url(images/MainPages/underwater_bckgrnd.jpg);
background-repeat: no-repeat;
}
.Header1-Centered {
text-align: center;
height: 108px;
width: auto;
background-image: url(images/MainPages/header_bckgrnd.jpg);
}
#apDiv1 {
position:absolute;
width:90px;
height:750px;
z-index:1;
left: 5px;
top: 29px;
}
#apDiv2 {
position:absolute;
width:1123px;
height:637px;
z-index:2;
left: 102px;
top: 135px;
overflow: scroll;
bottom: auto;
}
#apDiv3 {
position:absolute;
width:90px;
height:754px;
z-index:3;
left: 1235px;
top: 28px;
}
#apDiv4 {
position:absolute;
width:1090px;
height:199px;
z-index:1;
left: -1085px;
top: auto;
text-align: center;
}
#apDiv3 #apDiv4 table tr td {
text-align: center;
}
.Copywrite {
font-size: 14px;
bottom: auto;
}
#apDiv3 #apDiv4 table {
font-size: 18px;
}
body {
background-image: url(images/MainPages/underwater_bckgrnd.jpg);
width: 1250px;
overflow: scroll;
height: auto;
}
a:link {
color: #00F;
}
a:visited {
color: #F0F;
}
a:hover {
color: #F00;
}
a:active {
color: #0F0;
}
</style>
</head>
<body>

<div class="Header1-Centered">
<h1>Page Name/Header</h1>
</div>

<div id="apDiv1"><img src="images/MainPages/anchor chain lt.jpg" width="90" height="750" alt="anchor_lft" /></div>

<div id="apDiv2"> <a href="images/Gallery/2escudos.jpg"><img src="images/Gallery/thumbnails/2escudos.jpg" width="150" height="72" alt="coins" /></a></div>

<div id="apDiv3"><img src="images/MainPages/anchor chain rt.jpg" width="90" height="750" alt="anchor_rt" />
<div id="apDiv4">
    <hr width="1080" />
    <table width="1080" height="98" border="0">
      <tr>
        <td style="font-size: 18px"><a href="who_is_hrd.html" target="_self">Who is HRD, Inc.</a></td>
        <td style="font-size: 18px"><a href="treasure_gallery.html" target="_self">Treasure Gallery</a></td>
        <td style="font-size: 18px"><a href="Main Page.html" target="_self">HRD, Inc.</a></td>
        <td style="font-size: 18px"><a href="facebook.com/hrd1715" target="_new">HRD's Facebook Page</a></td>
        <td style="font-size: 18px"><a href="www.ioffer.com/selling/sales1715" target="_new">HRD, Inc. Store</a></td>
      </tr>
      <tr>
        <td style="font-size: 18px"><a href="digital_camera_masks.html" target="_self">Digital Camera Masks</a></td>
        <td style="font-size: 18px"><a href="dpv_scooters.html" target="_self">DPV - Scooters</a></td>
        <td style="font-size: 18px"><a href="treasure_coins.html" target="_self">1715 Treasure Coins</a></td>
        <td style="font-size: 18px"><a href="www.cafepress.com/hrd1715" target="_new">HRD, Inc. Merchandise</a></td>
        <td style="font-size: 18px"><a href="remote_sensing.html" target="_self">Remote Sensing</a></td>
      </tr>
      <tr>
        <td style="font-size: 18px"><a href="presentations_lectures.html" target="_self">Presentations/Lectures</a></td>
        <td style="font-size: 18px"><a href="shipwreck_story.html" target="_self">1715 Shipwreck Story</a></td>
        <td style="font-size: 18px"><a href="henrietta_marie_story.html" target="_self">Henrietta Marie Story</a></td>
        <td style="font-size: 18px"><a href="geo_documentary.html" target="_self">Geo Documentary</a></td>
        <td style="font-size: 18px"><a href="treasure_links.html" target="_self">Treasure Links</a></td>
      </tr>
      <tr>
        <td colspan="5" align="center"><hr width="1080" />
          <p class="Copywrite">Material within property of HRD, Inc. ©   2003-2012. <br />
            You <strong><em><U>must </U></em></strong>request before copying text or graphics<br />
        <a href="Webmaster
mailto:michonjd@hrd1715.com">Webmaster</a></p></td>
      </tr>
    </table>
</div>
</div>

</body>
</html>

|
Mark as:
Currently Being Moderated

18. Nancy O.,

Sep 9, 2012 10:16 AM in reply to PyrateJIm

Report

Open Template.dwt

Change this:

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

to this with leading dots and slash:

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

==============================
Also delete this irrelevant code.




<script type="text/javascript" src="../Scripts/plug-in.js"></script>
<link href="../Styles/plug-in.css" rel="stylesheet" type="text/css" />

=====================================

I urge you to put your CSS code into an external style sheet. It will make site management much easier and rid your template and child pages of repetitive code.
http://alt-web.com/DEMOS/DW-Link-Stylesheet.shtml

=======================================

Save template and update pages.

Can you upload your test page and support files to a web space you control and post a link here?

Nancy O.

|
Mark as:
Currently Being Moderated

19. PyrateJIm,

Sep 9, 2012 3:05 PM in reply to Nancy O.

Report

Thanks for the suggestions above. I have replaced the code as you have suggested, as well as deleted the irrelevant code. Once the template was updated and all linked pages, I tried it again. Same error message. No difference. I have tried creating a new tempalte page, and have even tried a stock template page from DW with no changes other than adding a picture and Lightbox extension. ALL attempts have resulted in the same error. I have emailed "Fourlevel.com" tech support and am still waiting on a reply.

I am working on creating a CSS stylesheet as you have suggested. I dont have that right now, but do see the need for it. I am not sure, other than for reasons you have given, if it will make any difference with the issue at hand.

As I am reworking a site done in FrontPage several years ago, I am not "live" with the DW version as of yet. I have decided at this time to unlink my photo gallery pages from the template and the lightbox extension works fine. Once I publish the new site, I will post a link (hopefully within the next couple of days) and then, if a solution is ever found, I can always work it in.

Jim

|
Mark as:
Currently Being Moderated

20. Nancy O.,

Sep 9, 2012 4:03 PM in reply to PyrateJIm

Report

Jim,
You could cut some time off this project by using Fancybox instead of this 4-level extension.

Fancybox wouId take about 10 minutes to download, extract the files to your local site, paste some code into your pages and you'd be up and running.

http://fancybox.net/

Nancy O.

|
Mark as:
Currently Being Moderated

21. PyrateJIm,

Sep 9, 2012 4:48 PM in reply to Nancy O.

Report

I would love to, as Fancybox even allows for a gallery (panning from one image to another in the lightbox), and I did try it.It wasnt installing properly for me. Even "the boss" was called in on it and it wasnt making sense to her.

Out of approx. a dozen+ pages on my site, I am using pics that I want in a lightbox on about 4 pages. Two of those pages have between 15 and 45 pics on each and I will be adding a hundred or so more on a catalog once I get this part of the site up and running.

|
Mark as:
Currently Being Moderated

22. Nancy O.,

Sep 10, 2012 10:21 AM in reply to PyrateJIm

Report

If you want 1-2-1 help, contact me through my site.

Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

|
Mark as:
Currently Being Moderated

23. PyrateJIm,

Sep 10, 2012 12:33 PM in reply to Nancy O.

Report

THANK YOU!!

Let me get the rest of my pics set and linked together and when I am ready for the next step, I will contact you that way.

I really do appreciate the offer.

|
Mark as:
Currently Being Moderated

24. PyrateJIm,

Sep 16, 2012 6:54 PM in reply to PyrateJIm

Report

Hi Nancy,

looks like I am ready to ask for that 1-2-1 help. I have Fancybox installed (been working with it for a few days now) and directions/links have been changed. I am working on a test page (not live yet) and am getting no error messages, but when doing a preview in browser, it is opening up the larger picture in the same window, instead of a lightbox. My wife and I are guessing we are missing a code somepalce, but as of now, cant find it.

I will be sending you an email through your site, if this is the best way, to set up a time for this help session that will only take about 10 mins or so as you have said. Thanks again for the offer.

|
Mark as:

Forum guidelines

Answers + Points = Status

10 points awarded for Correct Answers
5 points awarded for Helpful Answers
10,000+ points
1,001-10,000 points
501-1,000 points
5-500 points

Dreamweaver

DW cs5 using Lightbox on template page

Sep 3, 2012 6:24 AM

More Like This

Bookmarked By (0)

Answers + Points = Status