html - Why is the lightbox jQuery plugin not working for me?

Question

Going by the instructions both here: http://lokeshdhakar.com/projects/lightbox2/ and in the book "Murach's JavaScript and jQuery" (on pages 320 and 321), I'm trying to add lightbox functionality to my site.

I added lightbox.css (and screen.css, thtinking that might also be required) to my Content folder, and both lightbox.js and jquery.smooth-scroll.min.js (because it was included in the lightbox download, and I figured lightbox needed it) to my Scripts folder.

I also added to my Images folder the following images included in the lightbox download: close.png, loading.gif, next.png, and prev.png.

I've got this html and jQuery code (this is the entire Default.cshtml at this point):

@{
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "el Garrapata - Spoon!!!";
}

<div id="tabs">
    <ul>
    <li><a href="#tabs-1">Spring</a></li>
    <li><a href="#tabs-2">Summer</a></li>
    <li><a href="#tabs-3">Fall</a></li>
    <li><a href="#tabs-4">Winter</a></li>
    </ul>
    <div id="tabs-1">
        <a href="Images/Fullsize/Landscapes/Spring_2013 04 06_2293.jpg" rel="lightbox" ><img src="Images/Thumbnails/Landscapes/Spring_2013 04 06_2293_th.jpg" width="300" height="200"></a>
    </div>

    <div id="tabs-2">
    </div>

    <div id="tabs-3">
    </div>

    <div id="tabs-4">
    </div>

</div>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#tabs").tabs();
        });
    </script>

...but it doesn't work: although that one thumbnail image displays in the "Spring" tab, clicking it simply causes the screen to go mostly dark - it becomes "grayed out" to the point of almost opaqueness.

The lightbox download also includes jquery-1.7.2.min.js and jquery-ui-1.8.18.custom.min.js

I'm referencing newer versions in _SiteLayout.cshtml:

<script src="~/Scripts/jquery-2.0.0.min.js"></script>
<script src="~/Scripts/jquery-ui-1.9.2.min.js"></script>

Could this be the problem? Am I "stuck" using older versions of jQuery and jQueryUI if I want to use lightbox?

BTW, I tried to post this at lightbox's internal forum, but was unable to log in, neither with Fakebook or Google (although I have (reluctantly in the case of the former) accounts with both; also the OpenID jazz I tried, but it seems to expect an URL...???)

UPDATE

Note: I am going to bountify this question for 100 points ASAP. If I get an answer prior to that, I will award the bounty post-answer.

UPDATE 2

I've switched to fancyBox, but the large (href) image still hugs the left side of the page when clicking on the "thumbnail", not the center. Here's all the Razor, HTML, and jQuery (some of the image code elided for brevity):

selected from _SiteLayout.cshtml:

<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.4" type="text/css" media="screen" />
<script src="~/Scripts/jquery-2.0.0.min.js"></script>
<!-- May want to replace the above before deploying with use of a CDN:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
OR: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
..and similar for jquery-ui -->
<script src="~/Scripts/jquery-ui-1.9.2.min.js"></script>
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script>

from Default.cshtml:

@{
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "Garrapata";
}

<div id="tabs">
    <ul>
    <li><a href="#tabs-1">Spring</a></li>
    <li><a href="#tabs-2">Summer</a></li>
    <li><a href="#tabs-3">Fall</a></li>
    <li><a href="#tabs-4">Winter</a></li>
    </ul>
    <div id="tabs-1">
        <a class="fancybox" rel="group" href="Images/Fullsize/Landscapes/Spring_2013 04 06_2293.jpg"><img src="Images/Thumbnails/Landscapes/Spring_2013 04 06_2293_th.jpg" width="294" height="196" alt="" /></a>
        <a class="fancybox" rel="group" href="Images/Fullsize/Landscapes/Spring_2013 04 06_2295.jpg"><img src="Images/Thumbnails/Landscapes/Spring_2013 04 06_2295_th.jpg" width="294" height="196" alt="" /></a>
    </div>

    <div id="tabs-2">
    </div>

    <div id="tabs-3">
    </div>

    <div id="tabs-4">
    </div>

</div>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#tabs").tabs();
            $(".fancybox").fancybox({
                openEffect  : 'elastic',
                closeEffect : 'elastic'
            });
        });
    </script>

Also, I don't see the "Close" button in the NE corner - perhaps because the large image, taking up all the "top" space, has not left room for it to be visible.

UPDATE 3

Now I see that the .css and .js files I was referencing in _SiteLayout.cshtml are supposed to be in /fancybox/source

It seems like instead of what I have now, namely:

<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.4" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script>

...what should work would be:

<link rel="stylesheet" href="~/Content/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="~/Scripts/jquery.fancybox.js"></script>

...as I have copied those files into those locations.

Does it really have to be that particular (and, it seems to me, rather peculiar) way you mentioned?

Since it would seem based on what I've got that the css and js would not be found at all, I'm surprised it even works as well as it does...

Answer 1

The lightbox you're trying to implement only works with jQuery jquery-1.7.2 or below and also you don't need jquery-ui-1.9.2.min.js in order for the Lightbox to work.

For this version of lightbox to work, you need lightbox.css, jquery-1.7.2.js and lightbox.js.

Shown below is a sample code similar to your one where the Lightbox is working. ( Paste this code on a Text editor, save it as a HTML page and open it using your Web Browser )

<html>
<head>
    <!-- 
         **** Things you need to do****
         1. SPECIFY LIGHTBOX CSS FILE
         2. SPECIFY JQUERY JS (jquery-1.7.2) FILE
         3. SPECIFY LIGHTBOX JS FILE 
    -->

    <link rel="stylesheet" href="http://lokeshdhakar.com/projects/lightbox2/css/lightbox.css" type="text/css" media="screen" /> 
    <script src="http://lokeshdhakar.com/projects/lightbox2/js/jquery-1.7.2.min.js"></script> 
    <script src="http://lokeshdhakar.com/projects/lightbox2/js/lightbox.js"></script> 
</head>
<body>
<div id="tabs">
    <ul>
    <li><a href="#tabs-1">Spring</a></li>
    <li><a href="#tabs-2">Summer</a></li>
    <li><a href="#tabs-3">Fall</a></li>
    <li><a href="#tabs-4">Winter</a></li>
    </ul>
    <div id="tabs-1">
        <a href="http://pages.swcp.com/~jamii/OtherCats/coco.jpg" rel="lightbox" >
            <img src="http://pages.swcp.com/~jamii/OtherCats/coco.jpg" width="300" height="200">
        </a>
    </div>
</div>
</body>
</html>

You can use fancybox instead of lightbox, which works with the latest jQuery versions. The latest version of Fancybox is Fancybox 2, You can download it from this Site - http://fancyapps.com/fancybox/

Code for implementing Fancybox 2

<html>
<head>
    <!-- Add jquery library -->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 

    <!-- Add fancyBox main JS and CSS files -->
    <script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" media="screen" />

    <script>
        $(document).ready(function(){
            $(".fancybox").fancybox({
                openEffect  : 'elastic',
                closeEffect : 'elastic'
            });
        });
    </script>
</head>
<body>
<div id="tabs">
    <ul>
    <li><a href="#tabs-1">Spring</a></li>
    <li><a href="#tabs-2">Summer</a></li>
    <li><a href="#tabs-3">Fall</a></li>
    <li><a href="#tabs-4">Winter</a></li>
    </ul>
    <div id="tabs-1">
        <a class="fancybox" href="http://pages.swcp.com/~jamii/OtherCats/coco.jpg" rel="lightbox" > <!--Add class "fancybox"-->
            <img src="http://pages.swcp.com/~jamii/OtherCats/coco.jpg" width="300" height="200">
        </a>
    </div>
</div>
</body>
</html>

UPDATE #1

You need all the files in the source folder to implement fancybox (helpers folder is optional). You need to keep the fancybox css, js and images in one location. What you can do is copy the source folder into your web app directory and rename it to fancybox. Then you can call the css file, js files from your html page. eg:

<link rel="stylesheet" href="../fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="../fancybox/jquery.fancybox.pack.js"></script>