CODEWITHSUNDEEP
javascriptjqueryhtmlcssbootstrap-4
user9817924
user9817924

Reputation:

SimpleLightBox wont run

I am unable to run SimpleLightBox (after click on image it opens as regular image on blank page) from this link http://dbrekalo.github.io/simpleLightbox/ . But i have problem. I added JS and CSS file (correctly i can open it in source code). Then i added HTML and JS in code.

  <div class="imageGallery1">
    <a href="images/5x5.jpg" title="Caption for gallery item 1" ><img style="width: 300px; height: 300px" src="images/5x5.jpg" alt="Gallery image 1"/></a>
    <a href="images/BG-BR5.jpg" title="Caption for gallery item 2"><img style="width: 300px; height: 300px" src="images/BG-BR5.jpg" alt="Gallery image 2" /></a>
    <a href="images/BG-BR6.jpg" title="Caption for gallery item 3"><img style="width: 300px; height: 300px"src="images/BG-BR6.jpg" alt="Gallery image 3" /></a>    
</div>
<script>$('.imageGallery1 a').simpleLightbox();</script>

Images are inserted correctly and i have jquery too because i am using bootstrap 4. Here is link with template i am working on https://vitas.sk/1/ (scroll down).

Upvotes: 0

Views: 2159

Answers (1)

pazcal
pazcal

Reputation: 938

When I check your template page I noticed the error in the console

"ReferenceError: jQuery is not defined".

Then I investigated your code and noticed that you are calling the SimpleLightBox plugin in the <head>, while the jquery library is called at the end of the page (just before the </body> tag).

What is happening is that the SimpleLightBox plugin is getting executed before the jQuery library is initialized.

Do the following to fix the issue:

1) This will fix the library being initialized after jQuery is loaded. Put the following line before the </body> tag.

<script src="js/simpleLightbox.js" ></script>

2) This will fix the method being executed after the simpleLightBox Plugin is loaded. Move the following code (and add the ready function) after the line above:

$(document).ready(function() {
    $('.imageGallery1 a').simpleLightbox();
});

I have added the $(document).ready(); around the code to make sure the code gets executed when the whole page and its scripts is done loading.

Upvotes: 2

Related Questions