Two different jQuery functions in the same HTML

Question

I am working on a HTML page and I want to use jQuery for my slide-show and pop-out image (The jQuery-lightbox) on a same page. However, when I active these two function at the same time, the pop-out image function works, but the slide-show section stopped working. Maybe I wrote the function in a wrong way....

I appreciate your help!

Here is my code:

<head>
<!--slideshow-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
    $(window).load(function() {
      $('#slider').nivoSlider({

        effect:'random',

    });
});
</script>

<!--Lighbox-popout-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
    $(function() {
      $('#photo a').lightBox();
});
</script>
</head>

Breton · Accepted Answer · 2011-06-25 01:39:20Z

2

you're loading two different versions of jquery that are interfering with each other. get rid of this line:

<script type="text/javascript" src="js/jquery.js"></script>

and see if that helps.

answered Jun 25, 2011 at 1:39

Breton

15.6k4 gold badges61 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniel A. White · Accepted Answer · 2011-06-25 01:39:55Z

1

Don't use window.load use $(function() { ... }). Also, the DOM isn't ready when your are calling for lightbox.

answered Jun 25, 2011 at 1:39

Daniel A. White

192k49 gold badges389 silver badges473 bronze badges

Comments

Björn · Accepted Answer · 2011-06-25 01:40:37Z

1

You're including 2 versions of jQuery it seems, disable one or the other and see if will work then.

Also, lose the trailing comma in the line effect:'random',, some browser will choke on that.

answered Jun 25, 2011 at 1:40

Björn

2,64817 silver badges18 bronze badges

Comments

user546305 · Accepted Answer · 2011-06-25 03:42:16Z

1

Use this

<head>
<!--slideshow-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<!--Lighbox-popout-->
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
    $(function() {
      $('#photo a').lightBox();
              $('#slider').nivoSlider({effect:'random'});
});
</script>
</head>

answered Jun 25, 2011 at 3:42

user546305

Collectives™ on Stack Overflow

Two different jQuery functions in the same HTML

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related