javascript - Uncaught TypeError: data[option] is not a function bootstrap.js:1215 - Stack Overflow

admin管理员组

文章数量:1320661

I'm getting the following error using the bootstrap lightbox from here:

Uncaught TypeError: data[option] is not a function bootstrap.js:1215

I've copied all files directory and haven't altered any parameters.

This is my code:

JS Linking:

 <script src=".0.3/jquery.min.js"></script>
 <script src=".11.4/jquery-ui.js"></script>
 <script src="/js/bootstrap.js"></script>
 <script src="/js/bootstrap-lightbox.js"></script>

 <link rel="stylesheet" href="/css/bootstrap.css">
 <link rel="stylesheet" href="/css/bootstrap-theme.css">
 <link rel="stylesheet" href="/css/bootstrap-social.css">
 <link rel="stylesheet" href="/css/bootstrap-lightbox.css">
 <link rel="stylesheet" href="/css/font-awesome.css">
 <link rel="stylesheet" href="/css/bootstrap-override.css">
 <link rel="stylesheet" href=".css">

Gallery:

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <h1 class="page-header">Portfolio</h1>
    </div><?php
         $images = glob($_SERVER['DOCUMENT_ROOT'].'/img/gallery/*.{jpg,png,gif}', GLOB_BRACE);
         $imageCount = count($images);
          if($imageCount == 0) {
             echo "There are currently no images in this gallery.";
             }
             else if($imageCount !== 0) {
             $counter = 1;
         foreach($images as $image) {
          echo "<div class='col-lg-3 col-md-4 col-xs-6 thumb'> \n\r";
         echo "<a data-toggle='lightbox' data-title='A random title' data-footer='A custom footer text' href='/".basename($image)."' class='thumbnail'><img src='.php?src=" . basename($image) . "&w=400&h=300&a=c' alt='Jolly Roger PCS Gallery Image' title='One Call Does It All' class='img-responsive'></a> \n\r";
         echo "</div> \n\r \n\r \r\n";
         }
       }
    ?>
  </div>
</div>

And the output of the gallery script for an image:

<div class='col-lg-3 col-md-4 col-xs-6 thumb'> 

<a data-toggle='lightbox' data-title='A random title' data-footer='A custom footer text' href='.jpg' class='thumbnail'><img src='.php?src=10177464_1495074060751956_373648277891171115_n.jpg&w=400&h=300&a=c' alt='Jolly Roger PCS Gallery Image' title='One Call Does It All' class='img-responsive'></a> 

</div> 

And finally the JS at the end of page:

<script type="text/javascript">
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
    event.preventDefault();
    $(this).ekkoLightbox();
});
        </script>

The script is working to an extent. When I click a thumbnail image the lightbox fires and the loading image appears, but the full size image of the icon never does.

The data-types all appear to be in the right spot so I don't know what is causing this error. I tried a search and didn't e up with any results.

I'm getting the following error using the bootstrap lightbox from here:

Uncaught TypeError: data[option] is not a function bootstrap.js:1215

I've copied all files directory and haven't altered any parameters.

This is my code:

JS Linking:

 <script src="https://ajax.googleapis./ajax/libs/jquery/2.0.3/jquery.min.js"></script>
 <script src="https://code.jquery./ui/1.11.4/jquery-ui.js"></script>
 <script src="/js/bootstrap.js"></script>
 <script src="/js/bootstrap-lightbox.js"></script>

 <link rel="stylesheet" href="/css/bootstrap.css">
 <link rel="stylesheet" href="/css/bootstrap-theme.css">
 <link rel="stylesheet" href="/css/bootstrap-social.css">
 <link rel="stylesheet" href="/css/bootstrap-lightbox.css">
 <link rel="stylesheet" href="/css/font-awesome.css">
 <link rel="stylesheet" href="/css/bootstrap-override.css">
 <link rel="stylesheet" href="http://fonts.example./custom-font.css">

Gallery:

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <h1 class="page-header">Portfolio</h1>
    </div><?php
         $images = glob($_SERVER['DOCUMENT_ROOT'].'/img/gallery/*.{jpg,png,gif}', GLOB_BRACE);
         $imageCount = count($images);
          if($imageCount == 0) {
             echo "There are currently no images in this gallery.";
             }
             else if($imageCount !== 0) {
             $counter = 1;
         foreach($images as $image) {
          echo "<div class='col-lg-3 col-md-4 col-xs-6 thumb'> \n\r";
         echo "<a data-toggle='lightbox' data-title='A random title' data-footer='A custom footer text' href='http://img.example./gallery/".basename($image)."' class='thumbnail'><img src='http://img.example./gallery/thumb.php?src=" . basename($image) . "&w=400&h=300&a=c' alt='Jolly Roger PCS Gallery Image' title='One Call Does It All' class='img-responsive'></a> \n\r";
         echo "</div> \n\r \n\r \r\n";
         }
       }
    ?>
  </div>
</div>

And the output of the gallery script for an image:

<div class='col-lg-3 col-md-4 col-xs-6 thumb'> 

<a data-toggle='lightbox' data-title='A random title' data-footer='A custom footer text' href='http://img.example./gallery/10177464_1495074060751956_373648277891171115_n.jpg' class='thumbnail'><img src='http://img.example./gallery/thumb.php?src=10177464_1495074060751956_373648277891171115_n.jpg&w=400&h=300&a=c' alt='Jolly Roger PCS Gallery Image' title='One Call Does It All' class='img-responsive'></a> 

</div> 

And finally the JS at the end of page:

<script type="text/javascript">
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
    event.preventDefault();
    $(this).ekkoLightbox();
});
        </script>

The script is working to an extent. When I click a thumbnail image the lightbox fires and the loading image appears, but the full size image of the icon never does.

The data-types all appear to be in the right spot so I don't know what is causing this error. I tried a search and didn't e up with any results.

• javascript
• php
• jquery
• twitter-bootstrap
• bootstrap-lightbox

Share Improve this question Follow asked Sep 27, 2016 at 22:05 Jesse ElserJesse Elser 97622 gold badges1313 silver badges4141 bronze badges 3

• Can you put it in jsfiddle or codepen – norcal johnny Commented Oct 4, 2016 at 23:37
• What do you mean? That's the order everything has to be in to my knowledge. – Jesse Elser Commented Oct 4, 2016 at 23:39
• Load the lightbox js before jquery – norcal johnny Commented Oct 4, 2016 at 23:39

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4 +50

The reason behind the error is inpatibility between versions of bootstrap and bootstrap lightbox plugin.

Check working demo here:

$(document).on('click', '[data-toggle="lightbox"]', function(event) {
    event.preventDefault();
    $(this).ekkoLightbox();
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox">
    <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">
</a>

If you are using bootstrap version 3.x.x then include the following assets:

If you are using bootstrap version 4.x.x then include the following assets:

Change your order.

<script src="/js/bootstrap-lightbox.js"></script>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://code.jquery./ui/1.11.4/jquery-ui.js"></script>
<script src="/js/bootstrap.js"></script>

本文标签： javascriptUncaught TypeError dataoption is not a function bootstrapjs1215Stack Overflow