locked
Lightbox for Bootstrap problem RRS feed

  • Question

  • User-909867351 posted

    Hi

    I can't put the code for Lightox for Bootstrap to work (http://ashleydw.github.io/lightbox/).

    Please look at my code and tell me what I'm doing wrong.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="teste.aspx.cs" Inherits="entrada" %>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Urupema informática, consumiveis, impressoras</title>
        <script src="https://use.fontawesome.com/16fd3f51f9.js"></script>
       <link href="css/footer.css" rel="stylesheet" />   
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" />     
    </head>
    <body>
        <form id="form1" runat="server">       
    <div class="container-fluid">
        <div class="row m-1">
        <div class="card-deck"> 
                <div class="card">
                    <div class="card-header">
                        <h3>Hewllet Packard</h3>
                    </div>
                    <div class="card-body">
                        <a href="imagens_marcas/hp.png" data-toggle="lightbox">
                            <img src="imagens_marcas/hp.png" class="img-thumbnail" />
                        </a>
                    </div>
                    <div class="card-footer">
                        Impressoras Jato de Tinta, Laser, consumíveis...
                    </div>
                </div>
       </div>  
        </div>
    </div>                 
        </form>
    <!-- jQuery library -->   
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>   
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>     
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>    
         <script type="text/javascript"> 
             $(document).on('click', '[data-toggle="lightbox"]', function (event) {
                 event.preventDefault();
                 $(this).ekkoLightbox();
             });
          </script>
    </body>
    </html>


    Thank you 

    Monday, January 29, 2018 10:00 AM

Answers

  • User-474980206 posted

    you still have the wrong order. also notice from their site, it also depends on paper, so it should come before lightbox. try:

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>       
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>     
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script>
    
        <script type="text/javascript"> 
           $(document).on('click', '[data-toggle="lightbox"]', function (event) {
               event.preventDefault();
               $(this).ekkoLightbox();
           });
        </script>
        

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 29, 2018 3:54 PM

All replies

  • User-474980206 posted

    the lightbox script include should come after the jquery, and bootstrap includes. a quick look at the browser console, would have have jquery undefined errors.

    Monday, January 29, 2018 3:12 PM
  • User-909867351 posted

    Hi Bruce

    No luck

    <!-- jQuery library -->   
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>       
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>    
        <script type="text/javascript"> 
           $(document).on('click', '[data-toggle="lightbox"]', function (event) {
               event.preventDefault();
               $(this).ekkoLightbox();
           });
          </script>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>     
        

    Got 

    ekko-lightbox.js:669 Uncaught ReferenceError: jQuery is not defined
    at ekko-lightbox.js:669

    Monday, January 29, 2018 3:30 PM
  • User-474980206 posted

    you still have the wrong order. also notice from their site, it also depends on paper, so it should come before lightbox. try:

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>       
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>     
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script>
    
        <script type="text/javascript"> 
           $(document).on('click', '[data-toggle="lightbox"]', function (event) {
               event.preventDefault();
               $(this).ekkoLightbox();
           });
        </script>
        

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 29, 2018 3:54 PM
  • User-909867351 posted

    Perfect Bruce.

    Many thanks for your help. I have one masterpage and for that reason it's not easy for me to understand what happened. You pointed me on the right track.

    Monday, January 29, 2018 4:04 PM