For the life of me I can NOT get this to load any kind of thumbnail or anything. Please help #417

Lowcivicman99 · 2024-10-26T19:42:10Z

Lowcivicman99
Oct 26, 2024

No idea what I am missing or any this isn't working but I have gone over the documentation, Struggled with ChatGPT for 2 days and I am just not seeing what I am missing.
I have verified that the images load and they are in the right location. I have a

above my JS to at least put something on the screen so I can see something.
I've disabled my own CSS to make sure I am not hiding anything. Anyone see anything missing from my page here?

<head>
    <style>
        #nanogallery2 .nGY2GThumbnail {
            width: 150px;
            height: 150px;
            margin: 10px;
            border: 2px solid #ec0000;
            overflow: hidden;
        }


        #nanogallery2 img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }

        #nanogallery2 {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }
    </style>

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/nanogallery2.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/jquery.nanogallery2.js"></script>
</head>

<body>
 <!-- TEST TO SHOW SOMETHING ON THE SCREEN. -->
    <div>
        <img src="./images/freedomfarm/hope/1.jpg" alt="Image 1" style="width:150px; height:150px; margin:10px; border:2px solid #000;">
        <img src="./images/freedomfarm/hope/2.jpg" alt="Image 2" style="width:150px; height:150px; margin:10px; border:2px solid #000;">
        <img src="./images/freedomfarm/hope/3.jpg" alt="Image 3" style="width:150px; height:150px; margin:10px; border:2px solid #000;">
    </div>


    <div id="nanogallery2" data-nanogallery2> My Gallery Here! </div>

    <script>
        $(document).ready(function () {
            $("#nanogallery2").nanoGallery2({
                itemsBaseURL: './images/freedomfarm/hope/',
                items: [
                    { src: '1.jpg', srct: '1-thumb.jpg', title: 'Image 1' },
                    { src: '2.jpg', srct: '2-thumb.jpg', title: 'Image 2' },
                    { src: '3.jpg', srct: '3-thumb.jpg', title: 'Image 3' }
                ],
                thumbnailWidth: 150,
                thumbnailHeight: 150
            });
        });
    </script>

    <script>
        console.log("Checking nanoGallery2 function:", typeof $.fn.nanoGallery2);
    </script>



</body>
`

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

For the life of me I can NOT get this to load any kind of thumbnail or anything. Please help #417

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

For the life of me I can NOT get this to load any kind of thumbnail or anything. Please help #417

Lowcivicman99 Oct 26, 2024

Replies: 0 comments

Lowcivicman99
Oct 26, 2024