Why is the lightbox jQuery plugin not working for me?

后端未结

关注

 2  2005

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 a

相关标签:

2条回答

抹茶落季

2020-12-21 13:50

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>

enter image description here

0 讨论(0)

萌比男神i

2020-12-21 13:56

Sometimes It is not also working, when you have other .js libraries included before lightbox. Put it just after jquery.

0 讨论(0)
发布评论:

提交评论
- 加载中...