This JavaScript object code populates an accordion drawer and reveals the contents as part listing rows, some with thumbnails, some without. Clicking/tapping on the thumbnail opens a modal to show a larger view of the image and caption underneath. Clicking/tapping on the upper right X will close the modal. All of this works.
The problem: if there is more than one thumbnail in the parts listing, only the lower thumbnail will open up a modal, even though each thumb has its own id assigned, and each id is separately targeted in the CSS.
A sample of the JavaScript object (a TaffyDB code) looks like this:
(A screenshot of working app: http://www.reedyrace.com/ae/history/screenshot.jpg )
{
yearHistory: 1989, // ******************** 1989
heading:"year1989",
partNo:"6025",
partName:"RC10 Graphite, less electrics and bearings",
popupId:"b1989", // add to index.html for :target
popupContent:"#6025 RC10 Graphite",
imageThumb:"rc10-6025"
},
{
yearHistory: 1989,
heading:"year1989",
partNo:"6030",
partName:"RC10 Graphite, less electrics, with bearings",
imageThumb:"blank"
},
{
yearHistory: 1989,
heading:"year1989",
breakpoint:"---", // Add breakpoint between vehicle types if a series
partNo:"unknown",
partName:"TQ10 Graphite",
popupId:"a1989", // add to index.html for :target
popupContent:"Released exclusively for Horizon Hobby Distributors Inc. Substantially the same as the RC10 Graphite, but the chassis is not woven, and is a slightly different shape. Features TQ wheels and tires, limited-slip VariLok ball differential allows the outside rear wheel to turn slightly faster than the inside on the corner, unpainted driver, wing, and body (from TQ10 Graphite Instruction Manual, no date).",
imageThumb:"tq10"
},
The code to cycle through the above looks like this:
// REPEATING ELEMENTS -- part listing of rows
db({heading:show}).each(function (name){ // 'show' and 'heading' = yearxxxx; "name" is an alias
var partNo = name.partNo; // part no in listing row
var partName = name.partName; // part name in listing row
var imageThumb = name.imageThumb; // thumbnail in listing row; 'blank' if no thumbnail
var yearHistory = name.yearHistory; // like 1999
var breakpoint = name.breakpoint; // only if adding a solid line above this record
// construct and target the unique outputxxxx innerHTML div id
var output = "output" + yearHistory;
output = document.getElementById(output);
if(breakpoint === "---"){output.innerHTML+="<span class='breakhr'></span";} // create a solid line above this record
// show full size image and caption in modal
var popupId = name.popupId; // identify the modal for this record
var popupContent = name.popupContent; // the modal caption
// if imageThumb is other than 'blank', construct the code to write out the parts listing and make the modal when thumbnail is clicked
var imageThumbSrc = "<span style='width:7em'>#" + partNo + "</span><span style='width:100px'><a href='#" + popupId + "'><img style='width:60px;' src='images/" + imageThumb + ".jpg'></a></span><span>" + partName + "</span><br><div id='" + popupId + "' class='popup'><div class='popup__block'><img class='image_thumb' style='width:100%; border:1px black solid;' src='images/" + imageThumb + ".jpg'><p>" + popupContent + "</p><a href='#' class='popup__close'>Close</a>";
// don't display thumbnail if imageThumb = "blank", otherwise a "image broken" icon will show
if(imageThumb === "blank"){imageThumbSrc = "<span style='width:7em'>#" + partNo + "</span><span style='width:100px'><img class='image_thumb' src='images/" + imageThumb + ".jpg' style='height:4px;'></span><span>" + partName + "</span><br>";}
output.innerHTML+="" + imageThumbSrc;
});
}
I appears that the cycling through is not really working. It is only allowing the last thumbnail to be clickable. Where did I go wrong?
