treehouse : what would you like to learn today?
Web Design Web Development iOS Development

One JS plug in working but another is not?

  • I'm trying to add a lightbox image gallery to a website, and each time I click on the thumb nail image, the larger image that should open in the lightbox opens in a new window. I know my jquery lib is working because I have a image cycle plug in working, just each time the page loads I get a error saying lightbox line of javascript code is not a function. Here is my scripts code:

    $(document).ready(function(){
    $(\"#featured-slider\").cycle('fade');
    $('#gallery a').lightBox();
    });


    Here is my head.php code:

    <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
    <html xmlns=\"http://www.w3.org/1999/xhtml\">
    <head>
    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
    <title><?php echo $pageTitle ?></title>
    <link href=\"css/style.css\" rel=\"stylesheet\" type=\"text/css\" />
    <link href=\"css/jquery.lightbox-0.5.css\" rel=\"stylesheet\" type=\"text/css\" />
    <script src=\"js/jquery-1.2.6.min.js\" type=\"text/javascript\"></script>
    <script src=\"js/jquery.cycle.all.min.js\" type=\"text/javascript\"></script>
    <script src=\"js/jquery.easing.min.js\" type=\"text/javascript\"></script>
    <script src=\"js/jquery.lightbox-0.5.min.js\" type=\"text/javascript\"></script>
    <script src=\"js/scripts.js\" type=\"text/javascript\"></script>
    </head>
    <body id=\"<?php echo $thisPage ?>\">
    <div id=\"wrap\">
    <div id=\"header\">


    and here is my html:

    <div id=\"gallery\">

    <a href=\"images/boxingMachine/fullSize/boxingMachineAttachmentTop.png\" title=\"Boxing Machine Attachment\"><img src=\"images/boxingMachine/thumb/boxingMachineAttachmentTop.png\" alt=\"Boxing Machine\" /></a>

    <a href=\"images/boxingMachine/fullSize/boxingMachineDown.png\" title=\"Boxing Machine\"><img src=\"images/boxingMachine/thumb/boxingMachineDown.png\" alt=\"Boxing Machine\" /></a>

    </div>


    I have been looking at this code all day and I think it is something simple, and I just need a fresh set of eyes to check it out.

    Thanks in advance.