4 Columns

[Banhack]

Hi! How I can change the number of columns? Thx and Good job!

[AlexandreBulete]

Hi Adrián ! The displayed style of your gallery doesn't matter. But if you want to keep the example gallery I shown here you just have to change the column-count value (set at the .grid class).

Thanks a lot for your message ! :) You can find this plugin with its documentation at my website : Walker Spider You can also find other plugins.

Let me know if all is ok ;)

[Banhack]

Yes! I've already changed it. I've also created a responsive @media to change the number of columns :)

[AlexandreBulete]

Great ! I hope you will enjoy with this plugin and that will be useful for you :)

[Banhack]

Hello! Could you please help me with a little modification?

I want to put a layer with a background by hovering on each image. By css I have added it through a "Before" (as you can see in the attached code). What I don't know is how to now add the click event to this item for the lightBox.

li.img-galeria:hover::before {
  content:'';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgb(35, 140, 197,0.8);
}

I think it is in the following JS function:

function displayLightbox($app, options, $_THIS) {
    // conversVelocity(options);
    $_THIS.find('li img').click(function() {
        $('body').addClass('WS-lightbox--opened');
        let $getSrc = $(this).attr('src');
        let $getTitle = $(this).attr('title');
        let $getDescription = $(this).attr('data-description');
        let $getLength = $_THIS.find('li').length;
        let $getCurrentOrder = $(this).attr('data-item-order');
        $app.fadeIn( options.display_velocity ).css('display', 'grid');
        $app.find('.WS-lightbox--container img').attr('src', $getSrc)
            .attr('title', $getTitle)
            .attr('alt', $getTitle)
            .attr('description', $getDescription)
            .attr('data-item-order', $getCurrentOrder);
        currentBg($app, options, $getSrc);
    });
}

But I don't know how I could modify it. I would appreciate collaboration.

[AlexandreBulete]

Hello !

Thanks a lot for thinking about this feature. I added a new release for enable pseudo-elements on the images by adding a div tag with the img--container class to contain the img. You can now add your ::before pseudo-element on this div.img--container.

The plugin automatically wraps the img tag so you don't have to do anything on your html file. Just to load the new plugin version.

I recommend you to load the plugin js file directly from the cdn. You can find it on my website : https://walkerspider.com/plugins/ws-lisli It will be easier for you to have the latest version or to quickly switch between different versions.

Don't forget to define the type attribute at "module". Like this : <script src="https://cdn.jsdelivr.net/gh/alexandrebulete/WS-lisli@master/dist/js/lightbox.js" type="module"></script>

If you want the specific version you can define the version 1.1.0 : https://cdn.jsdelivr.net/gh/alexandrebulete/WS-lisli@1.1.0/dist/js/lightbox.js Here the release associated : (https://github.com/AlexandreBulete/WS-LiSli/releases/tag/1.1.0)

Let me know if that solves your problem well.

[Banhack]

Hi! Sorry but this latest version doesn't work properly for me. Would there be a possibility to display an icon (such as a "+") above the background?

[AlexandreBulete]

Can you tell me what is not working?

You can add a "+" with the fontawesome library. I tried that style :

.img--container {
    line-height: 0;
    // here your ::before style inside this element
    &::before {
        position: absolute;
        display: grid;
        align-content: center;
        justify-content: center;
        // the "+" icon 
        // don't forget to add fontawesome at your project to use it
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 24px;
        content:'\f067';
        //
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        color: white;
        background-color: rgba(35, 140, 197,0.8);
        opacity: 0;
        transition: opacity .8s ease;
    }
    &:hover::before {
        opacity: 1;
    }
}

Here the result :