Uncaught TypeError: Object [object Object] has no method 'lightBox'

StackOverflow https://stackoverflow.com/questions/18081572

  •  23-06-2022
  •  | 
  •  

Question

I am getting this error when trying to use jQuery.LightBox:

Uncaught TypeError: Object [object Object] has no method 'lightBox'

Here is a live example (rebuilding a table design in divs, don't hate.):

http://www.builderpreviews32.com/photos.php

And YES, the jQuery file is referenced BEFORE the jQuery.LightBox file.

Here is my code:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta name='keywords' content=''>
<meta name='description' content=''>
<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>

    <link href="/common/styles/global.css" rel="stylesheet" type="text/css" />
<link href="/common/styles/lightbox.css" rel="stylesheet" type="text/css" />

<script src="/common/scripts/jquery-1.10.2.min.js"></script>
<script src="/common/scripts/lightbox-2.6.min.js"></script> 
<body>

    <div id="wrapper">
        <div id="header">
<a href="/"><img src="/common/images/lgo_lake.jpg" alt="Riss Lake Logo" /></a>
<div id="nav">
    <nav>
        <a href="/about.php">About Riss Lake</a>
        <a href="/developer.php">Developer</a>
        <a href="/developer.php">Communities</a>
        <a href="/awards.php">Awards</a>
        <a href="/areamap.php">Area Map</a>
        <a href="/developer.php">Inventory</a>
        <a href="/photos.php">Photos</a>
        <a href="/builders.php">Builders</a>
        <a href="/developer.php">Contact Us</a>
        <a href="/areainfo.php">Area Information</a>
    </nav>
</div> <!-- End Nav -->
</div> <!-- End Header -->          
        <div id="body">
            <!--MODULE:image_gallery.php|CACHE:main_photos-->

            <div class="lightbox">
                                <a href="/images/uploaded/115747639443725_poolside_sm.jpg"><img src="/images/uploaded/thumb_115747639443725_poolside_sm.jpg" alt=""

                                                            width="150" 
                                                    class="photo_edge" /></a>
                                <a href="/images/uploaded/115747639443725_poolside_sm.jpg"><img src="/images/uploaded/thumb_115747639443725_poolside_sm.jpg" alt=""

                                                            width="150" 
                                                    class="photo_edge" /></a>
                                <a href="/images/uploaded/115747639443725_poolside_sm.jpg"><img src="/images/uploaded/thumb_115747639443725_poolside_sm.jpg" alt=""

                                                            width="150" 
                                                    class="photo_edge" /></a>
                                <a href="/images/uploaded/960211759433150_002.jpg"><img src="/images/uploaded/thumb_960211759433150_002.jpg" alt=""

                                                            width="150" 
                                                    class="photo_edge" /></a>
                </div>
    <script type="text/javascript">$(function(){$('.lightbox a').lightBox();});</script>

        </div>

        <div id="footer">Copyright © 2003. <a href="/privacy.php">Privacy Policy</a> | <a href="/terms.php">Terms of Use</a></div>          
    </div> <!-- End Wrapper -->

</body>
</html>
Was it helpful?

Solution 2

You should put the script includes in the head section

<link href="/common/styles/global.css" rel="stylesheet" type="text/css" />
<link href="/common/styles/lightbox.css" rel="stylesheet" type="text/css" />

<script src="/common/scripts/jquery-1.10.2.min.js"></script>
<script src="/common/scripts/lightbox-2.6.min.js"></script>

OTHER TIPS

Few things to resolve the issue

  1. Check your script is loaded or not by using source tab in browser debugger.
  2. Try putting the script immediately below jQuery include as it is dependent.

Ensure your script tags are closed.

My initial guess is, it must be due to not proper ordering of scripts, if script is properly included and loading when you debug using browsers debugger. I have also faced this issue earlier.

Good luck buddy and let me know if it works out.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top