Bootstrap Lightbox?

1

Hello, I am kind of newbie to wordpress and I can’t live without roots any more :wink:

I was looking at Bootstrap Lightbox (http://jbutz.github.io/bootstrap-lightbox/) plugin and i think it’s very nice for the project I’m in, is there a way to intregrate it to Roots?

Thanks

2

How are you planing to use it? if the plan includes something like a lightbox gallery it requires hacking the gallery short code included in roots.

If all you need is to use it in your contents, just include bootstrap-lightbox.js in the /roots/assets/js/vendor folder and don’t forget to include it in /roots/lib/scripts.php by adding something like this:

wp_register_script('lightbox', get_template_directory_uri() . '/assets/js/vendor/bootstrap-lightbox.js', false, null, false);
wp_enqueue_script('lightbox');
3

Thank you garrik, I did that but it does’nt work yet.

By the moment I only want to use it on my content, so the image attachments have the lightbox effect. Any other advice?

thanks

4

You must be sure that the library is being loaded, so check if everything is ok by using some inspector like Firebug.

Are you using the right HTML code to trigger the Lightbox:

The Button:

<a data-toggle="lightbox" href="#demoLightbox">Open Lightbox</a>

The lightBox:

<div id="demoLightbox" class="lightbox hide fade"  tabindex="-1" role="dialog" aria-hidden="true">
	<div class='lightbox-content'>
		<img src="image.png">
		<div class="lightbox-caption"><p>Your caption here</p></div>
	</div>
</div>
5

I try to see the lightbox in action in a fresh installation of roots, now I can see what’s going on.
Here are some new thoughts on this.
First: stop editing scripts.php as suggested early. just drop the library on: /roots/assets/js/plugins and run the grunt command to get it available on your site.
Second: because the new CSS code for the hide class on BS3 you don’t see the lightbox content, so stop adding it to the lightbox as suggested, It should looks now:

<div id="demoLightbox" class="lightbox fade"  tabindex="-1" role="dialog" aria-hidden="true">
<div class='lightbox-content'>
    <img src="image.png">
    <div class="lightbox-caption"><p>Your caption here</p></div>
</div>

Finally in order to get the lightbox hidden at initial page load you must add the following:

.lightbox {
  position: relative;
  top: 70px;
  z-index: 1050;
  line-height: 0;
  text-align: center;
  background-color: transparent;
  outline: 0;
  display: none;
}

Note the display: none; added to the default class definition from bootstrap-lightbox.css v0.6.1. The JavaScript will change it when the lightbox get triggered.
This is just a hacky fix, the best one would be to modify the base LESS file in order to support BS3.