Why Is my copy and paste bootstrap lightbox not working?

Question

I tried to copy and paste the Bootstrap Lightbox example from: http://bootsnipp.com/snippets/featured/bootstrap-lightbox, into a website I am working on: http://www.redfuryrevenge.com

It looks the same as the example, but when I click on a pic (in the Images section), it just jumps me to the top of the page, instead of opening a modal.

I have been working on this for over 5 hours. Figured it was time to ask for help.

Answer 1

I tried doing the same thing and I had the same result, because I was not importing Bootstrap css and JS.

Try again by importing bootstrap JS after you import jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

In the head section import bootstrap css as,

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

After importing above 2 files you will get the desired output.

Answer 2

You don't have jquery library available in your project, it gets 404 HTTP status code when trying to open it.

Everytime you develop, use your chrome console to test your network.

Answer 3

Failed to load resource: the server responded with a status of 404 (Not Found)

That is the first error then the second error that follows says:

Uncaught Error: Bootstrap's JavaScript requires jQuery

That means you couldn't load Jquery files. your file path should be right or simply use the link

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Instead of simply loading Jquery from the link, you might want to do a cdn call back which simply means in case jquery fails to load from the Google host, then load the version on your server.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>if (!window.jQuery) { document.write('<script src="/path/to/your/jquery"><\/script>'); }
</script>

---

I guess if it was working before you copied the lightbox code then you probably had the file order right. Which means, you were loading Jquery file before bootstrap js files. If not you might want to do since Bootstrap wouldn't function properly without that file order.