Hey there guys, I'm at a loss and can't seem to figure this out.
Basically, I have an image gallery that pulls it's info from Google Spreadsheets using Sheetrock.js and Handlebars.js to template. When you click on the magnifying glass, it enlarged the image and displays the title and description (as defined by Google Sheets).
My problem is that it shows the same name and info for all the images.
Here is an example.
Here is the code that makes up the modal that pops up
<div class="modal">
<div class="overlay">
<a class="modal__close" href="#"><div class="fa fa-times modal__close"></div></a>
</div>
<div class="modal__contents modal--transition">
<img src="{{cells.ImageURL}}">
<div class="info-box">
<h3 class="car-title">{{cells.Title}}</h3>
<p class="car-info">{{cells.Description}}</p>
</div>
</div>
</div>
Here is the JS for my template with Sheetrock / Handlebars JS
var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/1it6QkBRPDsIqYOtr_UbFFmHBEADVkKaKjdghLSX5d3E/edit#gid=0';
var RBITemplate = Handlebars.compile($('#team-rbi-template').html());
$('#image-grid').sheetrock({
url: mySpreadsheet,
rowHandler: RBITemplate
});
});
Just can't seem to get the title and description matched up, any help is appreciated!