CODEWITHSUNDEEP
jquerycssfeatherlight.js
Eric Wood
Eric Wood

Reputation: 589

Lightbox content appears on page

I'm trying to set up a few lightboxes on a website and it's my first time working with featherlight.

Under Installation it says to link to jQuery, as well as featherlight.js and featherlight.css

Under Usage it says that this link should open the content in a lightbox:

<a href="#" data-featherlight="#mylightbox">Open element in lightbox</a>
<div id="mylightbox">This div will be opened in a lightbox</div>

It seems to work, except the div appears on the page even before the button is clicked. I don't see anything about adding manual CSS/jQuery to override this, but maybe I'm missing something?

I've included a fiddle here: https://jsfiddle.net/5p506at0/

Upvotes: 1

Views: 468

Answers (2)

jcuenod
jcuenod

Reputation: 58385

On the demo page the technique you are using is also used. The difference is that they give their lightbox div the class lightbox and then set that class to display: none so your code would look like this:

.lightbox {
  display: none;
}
<link href="https://cdn.rawgit.com/noelboss/featherlight/1.5.0/release/featherlight.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/noelboss/featherlight/1.5.0/release/featherlight.min.js"></script>

<a href="#" data-featherlight="#mylightbox">Open element in lightbox</a>
<div id="mylightbox" class="lightbox">This div will be opened in a lightbox</div>

Explanation: display: none is still actually present on the displayed lightbox (check with dev tools). It just doesn't have priority (which it would have if you used id selectors in your css).

Upvotes: 1

will
will

Reputation: 2007

You'll want to do something like this

<div id="lightboxes">
  <div id="mylightbox">This div will be opened in a lightbox</div>
</div>

Then just set the lightboxes div to display:none in your css

#lightboxes{
  display: none;
}

The plugin basically pulls the div you specify and duplicates it for a lightbox, so as long as you aren't hiding what you're cloning itself you shouldn't have any problems, even if its wrapper is hidden.

Upvotes: 1

Related Questions