I’m just starting out and this is my first time trying to make a website but I can’t use other people’s code. How do I fix this?
I want to use this plugin here: https://github.com/oriongunning/gridder
Here’s what I have in my work:
<!doctype html>
<html>
<head>
<Title>Thumbnail</Title>
<link rel="stylesheet" href="css/style.css">
</head>
<!-- Gridder navigation -->
<body>
<ul class="gridder">
<!-- You can load specify which content is loaded by specifying the #ID of the div where the content is -->
<li class="gridder-list" data-griddercontent="#content1">
<img src="https://www.thesprucepets.com/thmb/jbD_0GJnIVGmnLve7QDe9hCDbPU=/960x0/filters:no_upscale():max_bytes(150000):strip_icc()/Stocksy_txp33a24e10lxw100_Medium_214761-5af9d6d7875db900360440a7.jpg" />
</li>
<li class="gridder-list" data-griddercontent="#content2">
<img src="https://icatcare.org/app/uploads/2018/06/Layer-1704-1920x840.jpg" />
</li>
<li class="gridder-list" data-griddercontent="#content3">
<img src="https://icatcare.org/app/uploads/2018/06/Layer-1704-1920x840.jpg" />
</li>
<!-- You can also load html/ajax pages by replacing the #ID with a URL -->
<li class="gridder-list" data-griddercontent="/content.html">
<img src="https://icatcare.org/app/uploads/2018/06/Layer-1704-1920x840.jpg" />
</li>
</ul>
<div id="content1" class="gridder-content"> Content goes here... </div>
<div id="content2" class="gridder-content"> Content goes here... </div>
<div id="content3" class="gridder-content"> Content goes here... </div>
<script src="Files/jquery-3.4.1"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="dist/jquery.gridder.min.js"></script>
<script>
$(function() {
// Call Gridder
$('.gridder').gridderExpander({
scroll: true,
scrollOffset: 30,
scrollTo: "panel", // panel or listitem
animationSpeed: 400,
animationEasing: "easeInOutExpo",
showNav: true, // Show Navigation
nextText: "Next", // Next button text
prevText: "Previous", // Previous button text
closeText: "Close", // Close button text
onStart: function() {
//Gridder Inititialized
},
onContent: function() {
//Gridder Content Loaded
},
onClosed: function() {
//Gridder Closed
}
});
});
</script>
</body>
<!-- Gridder content --></html>
I have jquery downloaded on my computer as shown here: https://www.youtube.com/watch?v=kwb_YKRiq6c
I also used this tutorial as a guide: https://www.youtube.com/watch?v=MaEyWOI7Abs
I’m hoping it’ll look something like this in the end: http://oriongunning.github.io/gridder/
Here’s a picture of my code:
Any help would be really appreciated!