jQuery Running 2 jquery items simultaneously

anthgav · 11-02-2011, 11:51 PM

Hello everyone at Coding Forums, this is my first post!

I am relatively new to web design but I feel I am now mastering basic HTML and CSS. I have started to venture into adding some jquery elements into my website but have no coding skills in javascript or jquery. I am just taking code from the web which is free to use and alter for my own use.

The problem I am having is I am trying to implement a "Kwicks" slider into my site which I have managed to achieve with no problems. I also want to implement a "Nivo" slideshow onto the same page, but when I do that the "Kwicks" slider stops working and only the slideshow is working.

Here is a sample of my code. I have only included code from the page that is relevant to "Kwicks" and "Nivo".

Does anyone have any idea what I have to do to make them both work simultaneously?

Thanks.

Code:

<head>
<link rel="stylesheet" type="text/css" href="css/kwicks.css" />
<link rel="stylesheet" href="nivo/themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo/themes/pascal/pascal.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo/themes/orman/orman.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo/demo/style.css" type="text/css" media="screen" />

<!-- Start of Kwicks head script -->
		<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
		<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
		<script src="js/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>
		
		<script type="text/javascript">
			$().ready(function() {
				$('.kwicks').kwicks({
					max : 220,
					spacing : 2,
					isVertical : true
				});
			});
		</script>
<!-- End of Kwicks head script -->
</head>



<body>




<!-- Start of Nivo -->
    <div id="wrapper">
            <div class="slider-wrapper theme-default">
                   <div id="slider" class="nivoSlider">
                	<img src="nivo/demo/images/toystory.jpg" alt="" />
                        <a href="http://dev7studios.com"><img src="images/up.jpg" alt="" title="This is an example of a caption" /></a>
                        <img src="nivo/demo/images/walle.jpg" alt="" />
                        <img src="nivo/demo/images/nemo.jpg" alt="" title="#htmlcaption" />
                   </div>
                   <div id="htmlcaption" class="nivo-html-caption">
                        <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
                   </div>
            </div>

    </div>
    <script type="text/javascript" src="nivo/demo/scripts/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="nivo/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
<!-- End of Nivo -->




<!-- Start of Kwicks -->
         <div id="kwicks">    
                <ul class="kwicks horizontal" >
                    <li id="kwick_1"><img src="images/kwicks-ballet.jpg" width="250" height="220" alt="ballet" /></li>
                    <li id="kwick_2"><img src="images/kwicks-tap.jpg" width="250" height="220" alt="tap" /></li>
                    <li id="kwick_3"><img src="images/kwicks-modern-jazz.jpg" width="250" height="220" alt="modern jazz" /></li>
                    <li id="kwick_4"><img src="images/kwicks-acrobatics.jpg" width="250" height="220" alt="acrobatics" /></li>
                    <li id="kwick_5"><img src="images/kwicks-lyrical.jpg" width="250" height="220" alt="lyrical" /></li>
                    <li id="kwick_6"><img src="images/kwicks-hip-hop-street.jpg" width="250" height="220" alt="hip hop street" /></li>
                    <li id="kwick_7"><img src="images/kwicks-performance.jpg" width="250" height="220" alt="performance" /></li>
                    <li id="kwick_8"><img src="images/kwicks-parent-&-toddler.jpg" width="250" height="220" alt="parent and toddler" /></li>
                </ul>
         </div>    
<!-- End of Kwicks -->    

</body>

marilynn.fowler · 11-03-2011, 07:00 AM

Your Kwiks pack and your Nivo pack may have duplicate function names, or the CSS might have duplicate class/id names. Either scenario will create conflicts that will keep one or both from running properly. It's hard to know what to change since some scripts rely on CSS of a certain name being there, but most likely it's a naming conflict.

SB65 · 11-03-2011, 01:14 PM

You alos have jQuery loaded twice. Here:

Code:

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

and here

Code:

<script type="text/javascript" src="nivo/demo/scripts/jquery-1.6.1.min.js"></script>

That can quite frequently cause problems.

anthgav · 11-04-2011, 06:54 PM

Quote:

Originally Posted by SB65

You alos have jQuery loaded twice. Here:

Code:

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

and here

Code:

<script type="text/javascript" src="nivo/demo/scripts/jquery-1.6.1.min.js"></script>

That can quite frequently cause problems.

What you told me was the problem. As "Kwicks" and "Nivo" had been created with different versions of jquery I thought I had to keep both versions in the page to allow them to work. I deleted

Code:

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

out of the <head> and moved

Code:

<script type="text/javascript" src="nivo/demo/scripts/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="nivo/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>

from the <body> into the <head> and everything worked. So thanks very much.