Unable to close a photo from the media gallery when enlarged or go back about bootscore

[crftwrk]

Hi,

if you using an image block, there is an option to enable the lightbox. See https://dev.bootscore.me/theme/blocks/

Your images are in a hcf-isotope-item and I do not know if it's custom coded or a plugin, but this has nothing to do with the theme.

<div class="col-12 col-md-6 hcf-isotope-item">
  <a class="hcf-masonry-card" href="http://etsak.cloud/wp-content/uploads/2023/12/masonry-1.jpg">
    <img class="card-img img-fluid" loading="lazy" src="http://etsak.cloud/wp-content/uploads/2023/12/masonry-1.jpg" alt="">
  </a>
</div>

You should check if code/plugin supports lightbox gallery.

Edit: Console throws a lot of JS errors in your child's custom.js:

custom.js?ver=6.4.2:8 Uncaught TypeError: Cannot set properties of null (setting 'src') at updateImage (custom.js?ver=6.4.2:8:13)

Think bug is somewhere there...

[crftwrk]

It's raw html code I got from a snippet in order... happens in all my Bootscore projects and I think it makes sense because when clicked it takes the visitor to the image

Does this snippet work with other themes?

[crftwrk]

This is a HTML site and images do not open in a lightbox. WordPress links all media files to the library by default, that is different to HTML sites. If you want that images open in a lightbox you need a script which supports this for example http://feimosi.github.io/baguetteBox.js/.

Question: Does your code work well with a default WP theme like https://wordpress.org/themes/twentytwentyone/?

[crftwrk]

Not sure I understand what you mean if the code is working with another theme

I am asking this, because we have to check if this is a bug in Bootscore theme or not. If something works fine with other themes and not working here, we have to fix this.

BTW, coming back to your code. The image src is linked, that's why click on image leads to the media source:

<div class="col-12 col-md-6 hcf-isotope-item">
  <a class="hcf-masonry-card" href="http://etsak.cloud/wp-content/uploads/2023/12/masonry-1.jpg">
    <img class="card-img img-fluid" loading="lazy" src="http://etsak.cloud/wp-content/uploads/2023/12/masonry-1.jpg" alt="">
  </a>
</div>

Why not simply remove the link?

<div class="col-12 col-md-6 hcf-isotope-item">
  <div class="hcf-masonry-card">
    <img class="card-img img-fluid" loading="lazy" src="http://etsak.cloud/wp-content/uploads/2023/12/masonry-1.jpg" alt="">
  </div>
</div>

[akvrmvlakis]

Thank you very much for taking the taking the time to look into this Basti I will definitely use the Lightbox script you recommended.

[akvrmvlakis]

Hello Basti, It's raw html code I got from a snippet in order to create a quick masonry effect I am not using any plugins as of yet and not using gutenberg blocks either but it happens in all my Bootscore projects and I think it makes sense because when clicked it takes the visitor to the image url and there shouldn't be anything there. I will consider using either Gutenberg blocks (I suck at php and will have to find a way to add it within the page templates..) or a lightbox plugin. Yes the child is complaining due to some custom JS code for the image slider on the main page I haven't found a way around it yet but the fullscreen slider is working so I am leaving it for last :) Thanks for your time and the help I will go with either of the above discussed options. I wish you a happy new year my friend!

[akvrmvlakis]

Btw the lightbox on https://dev.bootscore.me/theme/blocks/ looks awesome! :))) This is exactly what I am looking for. I can't wait for the next Bootscore release. Thanks

[akvrmvlakis]

Yeah definitely I suppose especially with static sites and other Bootstrap-based themes I got it from here: https://htmlcssfreebies.com/demo/?id=850

[akvrmvlakis]

Thank you very much Basti the Lightbox JS script looks like a lifesaver! I will def use it :) Not sure I understand what you mean if the code is working with another theme It is endless Bootstrap classes meant to work only on Bootscore. What I do is just create page templates from scratch I just include the get_header() and get_footer(), I leave the #content# #primary and #main and all the rest is pure Bootstrap. All of this thanks to you guys and the excellent piece of work you've put out that's called Bootscore! :)))