jQuery v1.4 required to have multiple sliders on one page.

I managed to upgrade to jQuery 1.3.2 with the jQuery module. The slider works now.

I still have an issue, but I don't think it's jQuery related. I have a views set up were I want to set up multiple sliders on one page. The demo learned me that I could call the slider multiple times if I called different id's. I did this, but it does not work yet. When I use the navigation of one nivo-slider, it will also change the image on the other slider.

I made a views template based on views-view-unformatted.tpl.php:

<?php
	$i = 0;
?>
<?php if (!empty($title)): ?>
  <h3><?php print $title; ?></h3>
<?php endif; ?>
<?php foreach ($rows as $id => $row): ?>

<?php
	//set an empty class. later to be used in image field for nivo.
	$nivo_class = 'nivo-'.$i;
	//increment $i
	$i++
?>
	
  <div class="<?php print $classes[$id];?>" id="<?php print $nivo_class; ?>">
    <?php print $row; ?>
  </div>
  
  <?php

   $nivo_class = '#'.$nivo_class; 	
  	//$function_add = 'nivoslider("'.$nivo_class.'")';
    // This add inline JS to the head of the document
	//drupal_add_js($function_add, 'inline');  	

  ?>
  <script type="text/javascript">
  
  nivoslider('<?php print $nivo_class;?>');
  
  </script>
  
<?php endforeach; ?>

With a javascript line that calls this javascript function:

function nivoslider(nivoclass) {
$(nivoclass+' .views-field-field-project-img-fid .field-content').nivoSlider({
		effect:'fade',
		slices:15,
		animSpeed:200,
		pauseTime:3000,
		manualAdvance:true,
		directionNav:true, //Next & Prev
		directionNavHide:true, //Only show on hover
		controlNav:true, //1,2,3...
		pauseOnHover:true, //Stop animation while hovering
		beforeChange: function(){},
		afterChange: function(){}
	});
};

I don't see what I'm doing wrong yet.

I tried the following, but it doesn't fix it either. I thought this would be a better method because I could just use a clean '#nivo-0' as an id. The counter works nicely though. I receive a function call for both 'nivo-0' and 'nivo-1'.

I don't see the big difference between http://dev.dannyjoris.ca/portfolio and http://dannyjoris.ca/nivo-test/index.html ... (sorry for the messy images, its just meant to differentiate... :)

Based on: template file: views-view-field--portfolio--field-project-img-fid.tpl.php

<?php
	//set variable
	$nivo_class = '';	
	global $i;
	//set a counter
	if(!isset($i)) $i = 0;
	
	//set an empty class. later to be used in image field for nivo.
	$nivo_class = 'nivo-'.$i;
	//increment $i
	$i++;
?>
<div id="<?php print $nivo_class;?>">
<?php print $output; ?>
</div>

<?php
	$nivo_class = '#'.$nivo_class;
?>

  <script type="text/javascript">
  $(window).load(function() { 
  nivoslider('<?php print $nivo_class;?>');
  });
  </script>

function nivoslider(nivoclass) {
$(nivoclass).nivoSlider({
		effect:'fade',
		slices:15,
		animSpeed:200,
		pauseTime:3000,
		manualAdvance:true,
		directionNav:true, //Next & Prev
		directionNavHide:true, //Only show on hover
		controlNav:true, //1,2,3...
		pauseOnHover:true, //Stop animation while hovering
		beforeChange: function(){},
		afterChange: function(){}
	});

};

While the updated version of jQuery is enabled with the 'jQuery update' module, I call the nivo library with theme.info: scripts[] = ../../libraries/nivo-1.7/jquery.nivo.slider.pack.js

Gilbert Pellegrom of dev7studios.com could not help me as he said he is not experienced with Drupal. He told that the many div's won't help to solve the issue. I can totally see his point. There is an overload of div's and span's. But how do I get rid of them?

@escsco : Thanks for your input. I manage to get 1 nivo slider work perfect on a page, but multiple sliders on one page fail. If you press next on one of the sliders, the others will flip images as well.

I just figured it out that for multiple nivo sliders to work on one page, I need at least jQuery v1.4.0. Drupal comes with jQuery v1.2.6 in core and the jQuery update module can upgrade it to v1.3.2 . I tried to use jQuery v1.3.2 on my working demo page, and it gave the same result as my dev. drupal site.

Unfortunately I read that an upgrade to v1.4.0 isn't possible yet because it conflicts with views 2. The issue queue for v1.4.0 is located here: #685060: Get ready for 1.4 .