First image doesn’t load until the next arrow is pressed

Hi @vikysrnkova,

please provide a link where the issue happens.

Uncaught TypeError: Node.removeChild: Argument 1 is not an object.
onload https://localhost/canarexreal/wp-content/plugins/gallery-block-lightbox/dist/baguetteBox.min.js?ver=1.12.0:7
Y https://localhost/canarexreal/wp-content/plugins/gallery-block-lightbox/dist/baguetteBox.min.js?ver=1.12.0:7
I https://localhost/canarexreal/wp-content/plugins/gallery-block-lightbox/dist/baguetteBox.min.js?ver=1.12.0:7
n https://localhost/canarexreal/wp-content/plugins/gallery-block-lightbox/dist/baguetteBox.min.js?ver=1.12.0:7
U https://localhost/canarexreal/wp-content/plugins/gallery-block-lightbox/dist/baguetteBox.min.js?ver=1.12.0:7
K https://localhost/canarexreal/wp-content/plugins/gallery-block-lightbox/dist/baguetteBox.min.js?ver=1.12.0:7
K https://localhost/canarexreal/wp-content/plugins/gallery-block-lightbox/dist/baguetteBox.min.js?ver=1.12.0:7
r https://localhost/canarexreal/wp-content/plugins/gallery-block-lightbox/dist/baguetteBox.min.js?ver=1.12.0:7
K https://localhost/canarexreal/wp-content/plugins/gallery-block-lightbox/dist/baguetteBox.min.js?ver=1.12.0:7
https://localhost/canarexreal/2024/09/30/i1/:1666
EventListener.handleEvent* https://localhost/canarexreal/2024/09/30/i1/:1666
baguetteBox.min.js:7:5441
onload https://localhost/canarexreal/wp-content/plugins/gallery-block-lightbox/dist/baguetteBox.min.js?ver=1.12.0:7
(Async: EventHandlerNonNull)
Y https://localhost/canarexreal/wp-content/plugins/gallery-block-lightbox/dist/baguetteBox.min.js?ver=1.12.0:7
I https://localhost/canarexreal/wp-content/plugins/gallery-block-lightbox/dist/baguetteBox.min.js?ver=1.12.0:7
n https://localhost/canarexreal/wp-content/plugins/gallery-block-lightbox/dist/baguetteBox.min.js?ver=1.12.0:7
(Async: EventListener.handleEvent)
U https://localhost/canarexreal/wp-content/plugins/gallery-block-lightbox/dist/baguetteBox.min.js?ver=1.12.0:7
K https://localhost/canarexreal/wp-content/plugins/gallery-block-lightbox/dist/baguetteBox.min.js?ver=1.12.0:7
forEach self-hosted:160
K https://localhost/canarexreal/wp-content/plugins/gallery-block-lightbox/dist/baguetteBox.min.js?ver=1.12.0:7
forEach self-hosted:160
r https://localhost/canarexreal/wp-content/plugins/gallery-block-lightbox/dist/baguetteBox.min.js?ver=1.12.0:7
K https://localhost/canarexreal/wp-content/plugins/gallery-block-lightbox/dist/baguetteBox.min.js?ver=1.12.0:7
https://localhost/canarexreal/2024/09/30/i1/:1666
(Async: EventListener.handleEvent)
https://localhost/canarexreal/2024/09/30/i1/:1666

@goaroundagain is this what you’re looking for? my site is still on localhost

• This reply was modified 2 weeks, 4 days ago by Yui.
• This reply was modified 2 weeks, 4 days ago by vikysrnkova.

@goaroundagain so i was trying to use the plugin while creating my own custom theme. Now i wanted to add a download button to my gallery that I created in the meantime. I noticed that if I displayed the gallery in my theme by just adding
<?php
? ? ? the_content();
??>
it will not display the first clicked image in the light-box the way I described previously. Now however I added a download button in <a> tag and suddenly it kinda works and no errors are displayed (the button for download itself doesn’t work since it’s overlayed by the light-box and the first clicked image displays without issues problem is that its now duplicated). I included my code where it works but displays the first picture twice (as in 1st and 2nd slide are the same picture) but if you comment out the whole <a> tag section it will not display the first image in the light-box.

<div class="gallery">
? ? <a id="download-button">
? ? </a>
? ? <button class="arrow arrow-left">?</button>
? ? <?php
? ? ? the_content();
? ? ?>
? ? <button class="arrow arrow-right">?</button>
? </div>

is there a specific way i should bring out the_content (which only has the gallery in it) in my theme so i don’t encounter this issue and don’t have a questionable behavior like the <a> tag making it suddenly work but duplicating the first image?
this is my css for the a tag

#download-button {
? position: absolute;
? top: 50%;
? transform: translateY(-50%);
? font-size: 28px;
? filter: white;
? border: none;
? padding: 20px;
? cursor: pointer;
? z-index: 6;
? background-color: transparent;
}

thank you
Viky Srnkova

• This reply was modified 2 weeks, 2 days ago by vikysrnkova.
• This reply was modified 2 weeks, 2 days ago by vikysrnkova.
• This reply was modified 2 weeks, 2 days ago by vikysrnkova.

additional information would be that im trying to call it on dynamic page that the posts go to but it still is the original posts page in wordpress and the content there is only inserted original gallery from wordpress that has the link to media

Hi @vikysrnkova,

I need a live site to help you here. On my site, the Gallery works as expected.

Hello @goaroundagain

unfortunatelly my site won’t be live for a couple months. i need to first finish the template, i just wanted to know if there was a specific way i should include the_context() from wordpress in my theme for it to function properly. If not then i will be back once i put the site live if the issue persists.

thank you

Viky Srnkova

It doesn’t really matter how you include the_content for my plugin. It just looks for the corresponding CSS classes on the page.

ok i will keep that in mind maybe i used some keyword that was reserved i will check over my template. thank you

Viky Srnkova

Thank you @goaroundagain
thanks to you i managed to find what was causing the issue. i had the_content inside a div with the class name "gallery" it seems that this name is a reserved word somewhere either in your plugin or wordpress itself so when i renamed it to "canarex-gallery" your plugin now works wonderfully just as intended. Your comment made me realize that that might be the issue so thank you very much for the help.
with best regards Viky

Hi @vikysrnkova,

Great that you figured that out!