Lightbox issue [can't preview]

[RockyRakoon]

I'm not an experienced Dreamweaver user--meaning I use Dreamweaver to work on a website designed by my predecessor.  On most of our pages we include a lightbox gallery of photos related to the page topic.  Whenever I needed to create a new page, I took an existing one, resaved it under a new name, and then modified what needed to be modified to make the new page.

So to create the new gallery, I went into the lightbox grid on my page, deleted the contents of each gridbox, then added back in each new thumbnail and linked it to the full-size image.  But now with Dreamweaver 2020 I can't do that any more.

I need to create a new page that includes a six photo grid, 3x2.  I do what I normally do and everything looks fine.  But for starters, since the 2020 update, the live view no longer features a workable lightbox gallery...I click the thumbnails and nothing happens, so I can't test before uploading to the remote server.  When I do that I get to the new page, and when I click a lightbox thumbnail, instead of creating the image above the page with forward/back arrows, it creates a new full page with nothing but the full-size image on it...so I would have to hit the back arrow in Safari to move back to the prior page where I can see the lightbox gallery again. 

To make sure it wasn't me that was doing something different, I opened another page, changed some text but did not modify the gallery at all.  Saved the page and then uploaded it to the server and I get the same thing...clicking on a lightbox thumbnail--that I did not modify in any way--takes me to a new full page with nothing on it but the full-size image of what the thumbnail protrayed.

Here's a link to the particular page in question:  

http://www.detailandscale.com/scale_model_F-80C_Shooting_Star_Monogram_1_48th_scale_(general_photo_g...

Can anyone help me figure this out so I can go back to "recreating" my lightbox galleries?

Rock

[Nancy OShea]

Of course you can preview your work.  Use your local browsers to test. 

Right click the open tab, select Open in Browser.  See screenshot.

If the page is not working, validate your code and fix reported errors.

[RockyRakoon]

Thank you for your reply, Ma'am.

Thanks for that preview tip.  I can do that now and it shows the webpage fine, but when I click on one of the lightbox thumbnails it doesn't create the lightbox "window" over the page but opens a new blank page with nothing but the full-size photo in it, so the lightbox gallery again isn't working...my issue was not really with the lack of preview capability but the fact that the lightbox gallery no longer worked in DW2020.

I was also clueless on code validation.  I tried it and found two errors, but I'm not code-smart enough to know how to fix:

First error:  Bad value Content-Type for attribute http-equiv on XHTML element meta . [none].  The line it points to is:

Line 6:  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Second error:  need whitespace between attributes [none]. The line it points to is:

Line 16:  var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

I don't understane either of these errors, but both lines have been used on countless pages on our website before, so I'm still in the dark.

I do apprecaite your taking the time to help me though, Nancy.

Rock

[Nancy OShea]

"I was also clueless on code validation. I tried it and found two errors, but I'm not code-smart enough to know how to fix:"

If you can't work with code, I don't know why you are tasked with managing a web site.   Your #1 priority is to keep the site running and you can't do that if you can't fix your code errors.  Find a working lightbox document and compare the code with your non-working document.  

It's essential that you start learning to read and write code before things get any worse.  Read the chapters, do the code exercises, take quizzes at the end.

• https://www.w3schools.com/html/
  https://www.w3schools.com/css/
  
• https://www.w3schools.com/js/

[RockyRakoon]

That's a great question, Nancy! I'm just a 70-year old retired Air Force guy trying to help out a 73-year old former Army guy. 😀. But not helping out very much...

Thanks for those lesson links and I will go there and try to get smarter.

But there's something more at play here.  I just went to our website and selected a page I'd put up there a year or so ago.  The lightbox gallery on that page worked fine.  So I called up that webpage in Dreamweaver 2020 and MADE NO CHANGEs to it, but did a "Save as" and replaced the original file with the new but unmodified file. Then I uploaded that new file to the website and went back to it online.  The lightbox gallery now does not work.

So there's something in DW2020 that's changed...I don't know if it has to do with how it interacts with the lightbox plug-in or what....  But resaving a page with no changes gets me a broken page.

Is there no one else out there who has seen something like this?

Again, Nancy, thank you for your time.

Rock

[Nancy OShea]

That lightbox script is sorely out of date and so is the jQuery library that supports it.  

It would be great if we could see a code BEFORE and AFTER.  You say DW is doing something to break your pages.  But we don't have any idea what that means without seeing the code before and after.   I suspect the site has been broken for a while though.  

[RockyRakoon]

Hi, Nancy, and thanks again for hanging with me.

Well, as I play around with this maybe it's not a code issue after all.  I go to our website and check a page that exists there with a working lightbox gallery.  Then I use Dreamweaver to open the page, save it without making any changes, and then use Filezilla to ftp the file to the remote server, and when I relook at the page the lightbox gallery no longer works.

Here is a screenshot of a lightbox gallery working--it creates a slidewhow above the webpage where you can next/previous to other photos in the gallery.

But after I resave the file with no changes, clicking on a thumbnail in the grid now shows the image full size but on a page all by itself and I have to use the browser back button to get back to the page with the grid...a new page is shown below:

Now the really weird thing is I now think it's not a Dreamweaver 2020 problem.  Because this happens when I save the new file using Dreamweaver 2020 on my iMac, but it also happens if I save the new file using Dreamweaver CS6 on my MacBook Pro.

Still clueless...but appreciative of your continued help.

Rock

[BenPleysier]

Looking at the HEAD section of your document as per

<!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"><!-- InstanceBegin template="/Templates/D_and_S_Ads.dwt" codeOutsideHTMLIsLocked="false" -->


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Detail &amp; Scale General Scale Model Photo Set -- F-80C Shooting Star, Monogram 1/48th Scale</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/lightbox.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/lightbox.css" rel="stylesheet" type="text/css" />
<link href="css/sample_lightbox_layout.css" rel="stylesheet" type="text/css" />
<!-- InstanceEndEditable -->
<link href="D_and_S_Ads.css" rel="stylesheet" type="text/css" />
<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>

<!-- Insert to your webpage before the </head> -->
<script src="sliderengine/jquery.js"></script>
<script src="sliderengine/amazingslider.js"></script>
<link rel="stylesheet" type="text/css" href="sliderengine/amazingslider-1.css">
<script src="sliderengine/initslider-1.js"></script>
<!-- End of head section HTML codes -->

<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>Amazing Slider</title>

<!-- Insert to your webpage before the </head> -->
<script src="F9Fsliderengine/jquery.js"></script>
<script src="F9Fsliderengine/amazingslider.js"></script>
<link rel="stylesheet" type="text/css" href="F9Fsliderengine/amazingslider-1.css">
<script src="F9Fsliderengine/initslider-1.js"></script>
<!-- End of head section HTML codes -->

<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>Amazing Slider</title>

<!-- Insert to your webpage before the </head> -->
<script src="JF1sliderengine/jquery.js"></script>
<script src="JF1sliderengine/amazingslider.js"></script>
<link rel="stylesheet" type="text/css" href="JF1sliderengine/amazingslider-1.css">
<script src="JF1sliderengine/initslider-1.js"></script>
<!-- End of head section HTML codes -->

<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>Amazing Slider</title>

<!-- Insert to your webpage before the </head> -->
<script src="USNMCWWIIsliderengine/jquery.js"></script>
<script src="USNMCWWIIsliderengine/amazingslider.js"></script>
<link rel="stylesheet" type="text/css" href="USNMCWWIIsliderengine/amazingslider-1.css">
<script src="USNMCWWIIsliderengine/initslider-1.js"></script>
<!-- End of head section HTML codes -->


</head>

I see that the jQuery has been loaded on a number of occasions (shown in red). This makes the browser go round the bend; which library should it follow? There are also other duplicate CSS and JS scripts that have been loaded and which do not help the cause.

I then have a look at Templates/D_and_S_Ads.dwt and that shows me 

<!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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../D_and_S_Ads.css" rel="stylesheet" type="text/css" />
<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>

<!-- Insert to your webpage before the </head> -->
<script src="sliderengine/jquery.js"></script>
<script src="sliderengine/amazingslider.js"></script>
<link rel="stylesheet" type="text/css" href="sliderengine/amazingslider-1.css">
<script src="sliderengine/initslider-1.js"></script>
<!-- End of head section HTML codes -->

<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>Amazing Slider</title>

<!-- Insert to your webpage before the </head> -->
<script src="F9Fsliderengine/jquery.js"></script>
<script src="F9Fsliderengine/amazingslider.js"></script>
<link rel="stylesheet" type="text/css" href="F9Fsliderengine/amazingslider-1.css">
<script src="F9Fsliderengine/initslider-1.js"></script>
<!-- End of head section HTML codes -->

<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>Amazing Slider</title>

<!-- Insert to your webpage before the </head> -->
<script src="JF1sliderengine/jquery.js"></script>
<script src="JF1sliderengine/amazingslider.js"></script>
<link rel="stylesheet" type="text/css" href="JF1sliderengine/amazingslider-1.css">
<script src="JF1sliderengine/initslider-1.js"></script>
<!-- End of head section HTML codes -->

<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>Amazing Slider</title>

<!-- Insert to your webpage before the </head> -->
<script src="USNMCWWIIsliderengine/jquery.js"></script>
<script src="USNMCWWIIsliderengine/amazingslider.js"></script>
<link rel="stylesheet" type="text/css" href="USNMCWWIIsliderengine/amazingslider-1.css">
<script src="USNMCWWIIsliderengine/initslider-1.js"></script>
<!-- End of head section HTML codes -->


</head>

Proposal: Make a copy of the template file so that you can recover if things go amiss. Remove the red parts in the original D_and_S_Ads.dwt, apply the change to all of the child pages and see what happens.

If this works, all is well otherwise undo the changes and we'll have another look.

From a fellow septuagenarian (76)

[RockyRakoon]

Ben, from one old guy to another, thanks for taking the time to work with me.

I've deleted the red stuff and all still seems to be working OK except my original problem still exists...can't get the lightbox gallery to work as clicking on a thumbnail still shows me a single full resolution photo on a new page.

Rock

[BenPleysier · Accepted solution]

Oops, one too many deletions. Please put this back, not in the template, only in the relevant page.

[RockyRakoon]

Good Lord that fixed it!

Ben, I can't thank you enough for this...when can I buy you a beer???

Rock

[BenPleysier]

Rock, I am so glad that the problem has been fixed, this has made my day.