• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Lightbox Error in Dreamweaver Photo Albums

Explorer ,
Nov 29, 2022 Nov 29, 2022

Copy link to clipboard

Copied

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&colon; history.go(-1)" alt="BackArrow" />

    </map>

 

    

    <div id="MyPageButs">

       <p><a href="../Roster/MyPage/mypageFletcherR.html">My Page</a></p>

 

       <p>&nbsp;</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 &quot;Fletch&quot; 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>&nbsp;</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>

TOPICS
Code , Error

Views

421

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 29, 2022 Nov 29, 2022

Copy link to clipboard

Copied

It's hard to make suggestions.  Scripts from 2008 are really showing their age.  The original Lightbox hasn't been in active development for a long time. 

 

Using the first PhotoAlbum as an example, multiple code validation errors.  Modern browsers are less forgiving of code errors now. 

HTML:

https://validator.w3.org/check?verbose=1&uri=https%3A%2F%2Fcentaursinvietnam.org%2FPhotoAlbums%2FiPh...

CSS:

https://jigsaw.w3.org/css-validator/validator?profile=css3&warning=0&uri=https%3A%2F%2Fcentaursinvie...

 

The current layout is not mobile-friendly, too big to fit on small devices (mobile & tablet) and too tiny for extra large displays. 

 

Going forward, what are your plans for this site  -- a total rebuild in Dreamweaver or switching to WordPress or some other online site builder?  

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 29, 2022 Nov 29, 2022

Copy link to clipboard

Copied

I can second that fixing the errors should be done, updating to at least the latest jQuery and other things as well.

 

On the other hand, the error the topic author is searching a solution for has a very easy fix. See my separate answer here.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 09, 2022 Dec 09, 2022

Copy link to clipboard

Copied

Thank you for your response and ideas.

I am considering an upgrade, but it will remain Dreamweaver and of the same dimensions

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 29, 2022 Nov 29, 2022

Copy link to clipboard

Copied

The lightbox instantiation is failing due to an invalid JSON object in your JavaScript. This is due to wrong comment usage, see the attached screenshots. The browser’s console will point you to the error.

 

Fix it by removing the "comments" or properly commenting them (use // not only / for it). The second screenshot shows that the lightbox works again when fixing the error.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 09, 2022 Dec 09, 2022

Copy link to clipboard

Copied

My apologies for the delayed response. Down with covid. Greatly appreciate your finding such a simple solution to what was a big problem for me.

Are you available for hire to totally update my website in Dreamweaver? I need to stay in Dreamweaver with HTML because I am too old to learn anything else.

My Army Veteran friends and I are hoping to eventually get this legacy website into the archives of the Library of Congress before we all kick off (our average age is about 75); but we would have little chance with the current old and full of errors code.

Thank you!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 09, 2022 Dec 09, 2022

Copy link to clipboard

Copied

LATEST
quote

My Army Veteran friends and I are hoping to eventually get this legacy website into the archives of the Library of Congress...


By @powellcentaur

===========

Hope you're feeling better. 

 

Library of Congress has strict submission requirements for print publications & digital collections.  The process is daunting even for professional librarians with years of LOC & archival experience. My advice is to hire professionals who know what they're doing.  This isn't something amateurs can do in their spare time.

https://www.loc.gov/publish/cip/about/process.html

https://www.loc.gov/collections/?fa=subject_topic:war+%26+military

 

Good luck!

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines