Lightbox Error in Dreamweaver Photo Albums
Dreamweaver version 21.3; iMac 27in; 4.2 GHz Quad-Core intel Core i7, Radeon Pro 580 8 GB; 64 GB 2400 MHz DDR4; Ventura 13.0.1; Army Vets Legacy Website
Lightbox code apparently not working properly on our website centaursinvietnam.org. Our photo album pages have worked great for a decade, now all of them do not work properly. Click on the thumbnail of a photo album and the full size photo shows up alone with no captions or options to continue clicking through the full size photos. Here is example of one page (https://centaursinvietnam.org/PhotoAlbums/iPhotoFletcherRolland.html😞
<!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>Photos Rolland 'Fletch' Fletcher</title>
<style type="text/css">
/*This is for Big Window*/
#BigWin {
position:absolute;
visibility:visible;
left:264px;
top:123px;
width:1036px;
height:636px;
z-index:1;
}
#PageTitle {
position:absolute;
visibility:visible;
left:28px;
top:24px;
width:297px;
height:55px;
z-index:1;
font-family: "Comic Sans MS", cursive;
font-size: 36px;
font-style: normal;
color: #FFF;
text-align: center;
text-shadow: -2px -2px #000;
}
#TopButs {
position:absolute;
visibility:visible;
left:343px;
top:23px;
width:565px;
height:63px;
}
#TopButs ul.cssmenu3 {list-style: none;padding: 0px;}.displace { position: absolute; left: -5000px;}
ul.cssmenu3 li { float: none; }
ul.cssmenu3 li a { display:block; width:178px;height:36px;
background:url(../BigWindow/Buttons2.jpg) no-repeat}
ul.cssmenu3 li.photo a {/*All Centaurs of Rosters page*/
background:url(../BigWindow/Buttons2.jpg) no-repeat -356px -108px;
height: 36px;
width: 178px;
position: absolute;
left: 3px;
top: 11px;
}
ul.cssmenu3 li.photo a:hover{ background-position: -356px -108px; }
ul.cssmenu3 li.photo a:active{ background-position: -356px -108px; }
ul.cssmenu3 li.photo a:selected{ background-position: -356px -108px; }
ul.cssmenu3 li.audio a{/*InContact of Rosters page*/
background:url(../BigWindow/Buttons2.jpg) no-repeat -178px -288px;
height: 36px;
width: 178px;
position: absolute;
left: 194px;
top: 11px;}
ul.cssmenu3 li.audio a:hover{ background-position: 0px -288px; }
ul.cssmenu3 li.audio a:active { background-position: -356px -288px; }
ul.cssmenu3 li.audio a:selected { background-position: 0px -216px; }
ul.cssmenu3 li.video a {/*Guests of Roster Page*/
background:url(../BigWindow/Buttons2.jpg) no-repeat -178px -324px;
height: 36px;
width: 178px;
position: absolute;
left: 385px;
top: 11px;}
ul.cssmenu3 li.video a:hover{ background-position: 0px -324px; }
ul.cssmenu3 li.video a:active { background-position: -356px -324px; }
ul.cssmenu3 li.video a:selected { background-position: 0px -324px; }
#LWin {
height: 523px;
width: 929px;
position: absolute;
left: 15px;
top: 97px;
background-image: url(../LittleWinImages/LWclouds.jpg);
overflow: auto;
}
#BigWin #LWin {
font-family: Comic Sans MS, cursive;
}
</style>
<link href="../styleNav.css" rel="stylesheet" type="text/css" />
<script src="../scripts/jquery.js" type="text/javascript"></script>
<script src="../scripts/lightbox.js" type="text/javascript"></script>
<link href="../css/lightbox.css" rel="stylesheet" type="text/css" />
<link href="../css/sample_lightbox_layout.css" rel="stylesheet" type="text/css" />
<script src="../scripts/jquery.js" type="text/javascript"></script>
<script src="../scripts/lightbox.js" type="text/javascript"></script>
<link href="../css/lightbox.css" rel="stylesheet" type="text/css" />
<link href="../css/sample_lightbox_layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2127022: #gallery */
.lbGallery {
/*gallery container settings*/
background-color: transparent;
padding-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
width: auto;
height: auto;
text-align:center;
}
.lbGallery ul { list-style: none; margin:0;padding:0; }
.lbGallery ul li { display: inline;margin:0;padding:0; }
.lbGallery ul li a{text-decoration:none;}
.lbGallery ul li a img {
/*border color, width and margin for the images*/
border-color: #3e3e3e;
border-left-width: 3px;
border-top-width: 3px;
border-right-width: 3px;
border-bottom-width: 3px;
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px:
}
.lbGallery ul li a:hover img {
/*background color on hover*/
border-color: #ffffff;
border-left-width: 3px;
border-top-width: 3px;
border-right-width: 3px;
border-bottom-width: 3px;
}
#lightbox-container-image-box {
margin-left: 200px;
margin-top: -40px;
border-top: 0px none #ffffff;
border-right: 0px none #ffffff;
border-bottom: 0px none #ffffff;
border-left: 0px none #ffffff;
}
#lightbox-container-image-data-box {
margin-left: 200px;
margin-top: 0px;
border-top: 0px;
border-right: 0px none #ffffff;
border-bottom: 0px none #ffffff;
border-left: 0px none #ffffff;
}
/* EndOAWidget_Instance_2127022 */
body,td,th {
font-family: "Comic Sans MS", cursive;
font-size: 16px;
color: #000;
}
#MyPageButs {
position:absolute;
visibility:visible;
left:950px;
top:143px;
width:77px;
height:348px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
text-align: center;
line-height: normal;
}
.MyPageText {
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-weight: normal;
color: #FFF;
text-align: center;
}
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFC;
}
a:hover {
text-decoration: underline;
color: #9FF;
}
a:active {
text-decoration: none;
}
</style>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2127022" binding="#gallery" />
</oa:widgets>
-->
</script>
</head>
<body>
<div id="container"><img src="../HomePageV10df.jpg" alt="WinBkg" name="WinBkg" width="1366" height="768" border="0" usemap="#Map" id="WinBkg" />
<div id="BigWin">
<img src="../BigWindow/BigWinVideo.jpg" alt="BigWindow" width="1036" height="636" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="960,500,1008,561" href="javascript: history.go(-1)" alt="BackArrow" />
</map>
<div id="MyPageButs">
<p><a href="../Roster/MyPage/mypageFletcherR.html">My Page</a></p>
<p> </p>
</div>
<div id="TopButs"><ul class="cssmenu3">
<li class="photo"><a href="iPhoAudVidP.html"title="" ><span class="displace">photo</span></a></li>
<li class="audio"><a href="../Audio/iPhoAudVidA.html"title="" ><span class="displace">audio</span></a></li>
<li class="video"><a href="../Video8mm/iPhoAudVidV.html"title="" ><span class="displace">video</span></a></li>
</ul></div>
<div id="LWin">
<p>This is the Photo Album of Rolland "Fletch" Fletcher</p>
<div id="gallery" class="lbGallery">
<ul>
<li> <a href="FletcherRollandAlbum/001.jpg" title="War is not all 'HELL' at Officer's club pool at Michelin Rubber Plantation…forward base camp for War Zone C operation."><img src="FletcherRollandAlbum/001Tb.jpg" width="160" height="90" alt="" /></a> </li>
<li> <a href="FletcherRollandAlbum/002.jpg" title="Fletch gasses the Hootch maids"><img src="FletcherRollandAlbum/002Tb.jpg" width="160" height="90" alt="" /></a> </li>
<li> <a href="FletcherRollandAlbum/003.jpg" title="Fletch moves to D Troop in April 68
"><img src="FletcherRollandAlbum/003Tb.jpg" width="160" height="90" alt="" /></a> </li>
<li> <a href="FletcherRollandAlbum/004.jpg" title="A Mouseketeer I believe at a site on Cu Chi d(Don't remember which one.
"><img src="FletcherRollandAlbum/004Tb.jpg" width="160" height="90" alt="" /></a> </li>
<li> <a href="FletcherRollandAlbum/005.jpg" title="Dec Change of command for Col. Otis"><img src="FletcherRollandAlbum/005Tb.jpg" width="160" height="90" alt="" /></a> </li>
<li> <a href="FletcherRollandAlbum/006.jpg" title="Outside of Operations"><img src="FletcherRollandAlbum/006Tb.jpg" width="160" height="90" alt="" /></a> </li>
<li></li>
</ul>
</div>
<script type="text/javascript">
// BeginOAWidget_Instance_2127022: #gallery
$(function(){
$('#gallery a').lightBox({
imageLoading:'lightbox/lightbox-ico-loading.gif',/ (string) Path and the name of the loading icon
imageBtnPrev:'lightbox/lightbox-btn-prev.gif',/ (string) Path and the name of the prev button image
imageBtnNext:'lightbox/lightbox-btn-next.gif',/ (string) Path and the name of the next button image
imageBtnClose:'lightbox/lightbox-btn-close.gif',/
imageBlank:'lightbox/lightbox-blank.gif',/ (string) Path and the name of a blank image (one pixel)*/
fixedNavigation:false,/ (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.
containerResizeSpeed:400, / Specify the resize duration of container image. These number are miliseconds. 400 is default.
overlayBgColor: "#999999",/ (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color.
overlayOpacity:.6,/ (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9
txtImage:'Image',/Default text of image
txtOf:'of'
});
});
/ EndOAWidget_Instance_2127022
</script>
<p> </p>
</div>
<div id="PageTitle">PhotoAudioFlim</div>
</div>
<div id="navbutts"> <ul class="cssmenu">
<li class="home"><a href="../index.html" title="" ><span class="displace">Home</span></a></li>
<li class="roster"><a href="../Roster/irosterCentaurs.html" title="" ><span class="displace">irosterInfo</span></a></li>
<li class="society"><a href="../History/ihistoryEqAirSplash.html" title=""><span class="displace">society</span></a></li>
<li class="memory"><a href="../Memoriam/imemoriamIntro.html" title=""><span class="displace">memoriam</span></a></li>
<li class="reunion"><a href="../Reunion/ireunionAllIntro.html" title=""><span class="displace">reunion</span></a></li>
<li class="history"><a href="../History/ihistorySiteMap.html" title=""><span class="displace">history</span></a></li>
<li class="time"><a href="../Timeline/itimeIntro.html" title=""><span class="displace">timeline</span></a></li>
<li class="war"><a href="../WarStories/iwarVideos.html" title=""><span class="displace">society</span></a></li>
<li class="audiovid"><a href="iPhoAudVidP.html" title=""><span class="displace">AudioVideo</span></a></li>
<li class="help"><a href="../Help/ihelpAnswers.html" title=""><span class="displace">help</span></a></li>
<li class="link"><a href="../Help/ihelpAboutUs.html" title=""><span class="displace">about us</span></a></li>
</ul></div>
</div>
</body>
</html>
AdChoices