I’m having a problem with lightgallery where images aren’t loading up, while the plugin itself is functional.
I’m using handlebars to render the content, including the images.
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Recipe Website</title>
<link rel="stylesheet" href="lightgallery/lightgallery-bundle.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main>
<header class="header">
Recipe Book
</header>
<div id="recipes-container">
</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</main>
<script id="recipe-template" type="text/x-handlebars-template">
{{#each this}}
<div class="recipe-card">
<h2>{{name}}</h2>
<div class="image-container" data-lg-size="600-600">
<img src="{{image}}" alt="{{name}}" class="recipe-image" >
<div class="ingredients">
<b>Ingredients:</b> <ul>
{{#each ingredients}}
<li>{{this}}</li>
{{/each}}
</ul></div>
</div>
<button class="toggle-button">Read More</button>
<p class="recipe-details">{{recipe}}</p>
</div>
{{/each}}
</script>
<script src="lightgallery/lightgallery.min.js"></script>
<script src="lightgallery/lg-thumbnail.min.js"></script>
<script src="lightgallery/lg-zoom.min.js"></script>
<script src="lightgallery/lg-fullscreen.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.8/handlebars.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
,and JS :
const recipesData = [
{
"name": "Spaghetti Carbonara",
"ingredients": [
"200g spaghetti",
"100g pancetta",
"2 eggs",
"50g grated Parmesan cheese",
"2 cloves garlic",
"Salt and pepper to taste"
],
"recipe": "1. Cook spaghetti according to package instructions. nn2. In a pan, cook pancetta until crispy. Add minced garlic and cook until fragrant. nn3. In a bowl, whisk together eggs and Parmesan cheese. nn4. Drain spaghetti and add it to the pan with pancetta. Remove from heat and quickly stir in egg mixture. The heat from the spaghetti will cook the eggs. nn5. Season with salt and pepper. Serve hot.",
"image": "images/carbonara.jpg"
}
// rest of the data left out
];
// handlebars
const container =document.querySelector('#recipes-container');
const renderRecipe = Handlebars.compile(document.querySelector('#recipe-template').innerHTML);
let output=renderRecipe(recipesData);
container.innerHTML=output;
lightGallery(document.querySelector('.recipe-card'),{
plugins: [lgZoom, lgThumbnail, lgFullscreen],
thumbnail: true,
thumbWidth: 80,
controls: true,
getCaptionFromTitleOrAlt: true,
loop : true,
actualSize: false,
counter: true,
fullScreen: true,
zoom: true,
mode: 'lg-fade'
});
I tried selecting different DOM elements , selecting only one element of class .recipe-card (not All) has the plugin working , but the images still aren’t loading up, while there’s not such issue with displaying them in the html code.
I guess the problem is that I’m referencing the files incorrectly but changing this didn’t help either.