CODEWITHSUNDEEP
javascriptcssfeatherlight.js
Pepe
Pepe

Reputation: 1002

featherlight.js background & close button css?

I want to use a simple js to deactivate and activate the overflow of the html "body" like this:

$('.my_link').click(function(){
    $('body').css('overflow-y', 'hidden');
});

$('.featherlight_background & featherlight_close_button').click(function(){
    $('body').css('overflow-y', 'scroll');
});

But I dont finde out the css name of the "featherlight_background" and the "featherlight_close_button" - ... ".featherlight:last-of-type" and ".featherlight-close-icon" dont work ;(.

That´s the script I work with: featherlight

Can anybody help me?

Upvotes: 1

Views: 4334

Answers (1)

ckuijjer
ckuijjer

Reputation: 13814

I would suggest solving it using the configuration options of Featherlight instead of adding jQuery events to its elements.

Looking at the Configuration section of Featherlights documentation it seems you can define a function to be called when the lightbox is opened or closed, see beforeOpen, afterOpen, beforeClose and afterClose.

You can either define those functions using a data attribute on the element, e.g. data-featherlight-before-open, by overriding the global defaults, e.g. $.featherlight.defaults. beforeOpen, or by adding them as a parameter to your featherlight call, e.g. $.featherlight('#element', { beforeClose: ... });

I've added a small example that uses the global configuration method to change the text Lightbox is closed into Lightbox is open when opening the lightbox.

$(function() {
  $('#btn').featherlight('#lightbox');
  
  $.featherlight.defaults.beforeOpen = setLightboxOpen;
  $.featherlight.defaults.afterClose = setLightboxClosed;
});

function setLightboxOpen() {
  $('#text').text('Lightbox is open');
}

function setLightboxClosed() {
  $('#text').text('Lightbox is closed');
}
.hidden {
  display: none;
}
<link href="https://cdn.rawgit.com/noelboss/featherlight/master/release/featherlight.min.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://cdn.rawgit.com/noelboss/featherlight/master/release/featherlight.min.js"></script>

<button id="btn">Open lightbox</button>
<p id="text">Lightbox is closed</p>

<div id="lightbox" class="hidden">
  Lightbox contents
</div>

Upvotes: 5

Related Questions