Lightbox script: Can't figure out what I'm getting wrong

JavaScript
1

Hi there everyone!

I’m trying to implement this seemingly very simple lightbox script: https://github.com/jbutz/bootstrap-lightbox

According to the readme, implementation consists of nothing more than including the css, jss and then utilizing the following to implement on page:

[code]Open Lightbox

Your caption here
[/code]

Which I’ve done but all my attempts have ended in either no image showing at all, page image showing but no lightbox or a text link which shows the page’s images. I can’t get an image you click to bring up the lightbox version, as his demo does: https://www.jasonbutz.info/bootstrap-lightbox/#demo

Here’s my attempt. Only the first smaller image at the bottom of the page is wrapped in the lightbox code: http://schwim.net/personal/hd/

Could someone tell me where I’m going wrong with this?

Thanks for your time!

2

Are you using the right versions of boostrap, lightbox and jquery?

If I use the files from the lightbox site the lightbox works fine.

3

Paul, forgive my ignorance in the matter. It looks like I’m calling a much newer version of bootstrap, the bootstrap-lightbox.js is the file that came from the author’s zip file and I can’t tell what version of jquery he’s using as it doesn’t seem to be included in the file.

Should I just take all three of those files from his site to use? I don’t know yet if that would mess up other aspects of the page.

EDIT: I tried calling the same three files as on the author’s page, but my problem persists. No lightbox popup is appearing, regardless of what I try.

4

Have you got the latest version of the lightbox (* bootstrap-lightbox.js v0.7.0 )?

5

I replaced the bootstrap-lightbox.js with the file located at your link. FIle size was almost ten times larger, so vastly different file but the problem persists: No lightbox showing.

6

Progress!

I messed up the lightbox js file. Once I fixed that, I got to the point where it now brings up a shadow background, but the image is not showing.

Here’s my file. First thumbnail on the bottom of the page is coded to bring up lightbox.

http://schwim.net/personal/hd

7

Remove the ‘hide’ class that you added. It wasn’t in the original.

8

Do you mean here? It’s in his demo code:

1149×406 111 KB

I tried removing it but then it pushes the second image way down the page as if the invisible lightbox version is hiding between the two.

9

It’s not in the demo of the newly downloaded zip.

I suggest you download the whole zip from that link I gave and test the index file that comes with it.

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

I have your page working locally with the updated files. It may be that you haven’t updated the lightbox css file.

I have to go out now so not back until tomorrow.

10

I took all of the js and css files from bootstrap-lightbox-master/docs/assets/ and replaced what I had with them. The problem persists with being unable to show the lightbox image(background darkens).

If anyone else sees where I’m going wrong, any help would be greatly appreciated!

Updated page: http://schwim.net/personal/hd

11

We can retire this topic. I couldn’t take the hassles anymore and went with another lightbox solution.

Thanks very much for all your help, Paul!

12

No worrries :slight_smile:

I did have your page working locally but I think you are better off with a newer lightbox version anyway as the one you were using is no longer being updated.

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.