Image lightbox?

ckubs

I need an image lightbox on my site. None of the available plugins seem to work as they weren't updated in a while. I'd be fine to do basic resizing of the img tag in CSS and open the link with a lightbox.

Unfortunatelly I have to add the lightbox class to link instead of the img tag and I found this piece of jquery, but it doesn't work.

jQuery( document ).ready( function(){
  jQuery( 'a[href$=".gif"], a[href$=".jpg"], a[href$=".png"]' ).addClass( 'lightbox' );
} );

If someone has any clue about this, thank you.

PitaJ

@ckubs can you share more details, like how you're including the lightbox code? You might need to listen for more events, try doing:

$(window).on('load action:posts.loaded action:ajaxify.end', function () {

Instead of

jQuery( document ).ready( function(){

ckubs

@PitaJ Sorry for the late reply, the problem being mine.

I managed to have a simple lightbox - maybe too simple but it does what I need - on my images using this script, and your method to add the required class on the images.

The only problem I have now is the script requires only the <img> whithout the link wrap. In wich case the bug prior to 1.11.1 could have helped me.

Is there any way to deactivate the images.wrapImagesInLinks(posts); other than delete it from public/src/client/topic/posts.js?

PitaJ

Well, you could try putting this in your custom js:

require(['forum/topic/images'], function (images) {
  images.wrapImagesInLinks = function () {};
});

Which essentially disables that function.

If that doesn't work, you have a couple options:

comment out or remove the call to that function, as you already suggested
remove the wrapping <a> from around the <img> element when you apply the lightbox class, instead

Combining the function override and option #2 should work pretty well (if using just the function override doesn't work).

Huỳnh Phúc Huy

@ckubs I use this lighweight lightbox for my site & it's pretty good: https://www.jqueryscript.net/lightbox/Responsive-Image-Lightbox-Modal-jQuery.html

Demo: https://vgolang.com/topic/48/xây-dựng-server-restful-api-với-golang-sử-dụng-gin-gonic-framework

ckubs

@PitaJ Thank you!

ckubs

@Huỳnh-Phúc-Huy Thanks! I'll take a look at that one too.

azeus

@PitaJ @ckubs I've managed to get https://github.com/psychobunny/nodebb-plugin-gallery to work with the help of @sosojni

It was working just fine by changing the trigger in main.js of gallery plugin from:
$(window).on('action:ajaxify.end', function() {
to:
$(window).on('action:images.loaded', function() {

Now after the upgrade of Nodebb to v1.11.1 it's not working anymore

Any idea guys?

667

https://github.com/june07/nodebb-plugin-lightgallery
https://www.npmjs.com/package/nodebb-plugin-lightgallery

Also available in the NodeBB plugin menu under find.

azeus

@667 said in Image lightbox?:

https://github.com/june07/nodebb-plugin-lightgallery
https://www.npmjs.com/package/nodebb-plugin-lightgallery

Also available in the NodeBB plugin menu under find.

Awsome