Help with an image slider & load();

Help with an image slider & load();

Hi I'm new to jquery and am trying to figure out a problem. I've spent the last couple of days scratching my head over it, and figured maybe an expert can help me.

My Goal: to load pages of content into the main page when a link is clicked, THEN create an image slider based on the content that was loaded.

So far I've got this tutorial: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/

It uses the load(); function. It seems to work fine for loading other html pages. Great!

And I've used easySlider 1.7 plug-in (http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider)

It creates a slider from an unordered list of images. And it works on a page by itself.

The 'gotcha' is I can't get the easySlider to run after the load(); does it's thing.

  1. $(document).ready(function() { 
  2.  
  3.     // Check for hash value in URL 
  4.     var hash = window.location.hash.substr(1); 
  5.     var href = $('#nav li a').each(function(){ 
  6.         var href = $(this).attr('href'); 
  7.         if(hash==href.substr(0,href.length-5)){ 
  8.             var toLoad = hash+'.html #content'; 
  9.             $('#content').load(toLoad) 
  10.         } 
  11.     }); 
  12.      
  13.       // when a link is clicked
  14.     $('#nav li a').click(function(){
  15.         var toLoad = $(this).attr('href')+' #content'; 
  16.         $('#content').hide('fast',loadContent); 
  17.         $('#load').remove(); 
  18.         $('#wrapper').append('<span id="load">LOADING...</span>'); 
  19.         $('#load').fadeIn('normal');
  20.         window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
  21.        
  22.         function loadContent() {
  23.             $('#content').load(toLoad,'',showNewContent()) 
  24.         }
  25.         function showNewContent() { 
  26.             $('#content').show('normal',hideLoader()); 
  27.         }
  28.         function hideLoader() { 
  29.             $('#load').fadeOut('normal',slideme());
  30.         }
  31.        
  32.         // This easySlider works on it's own,
  33.         // but not when it's called in here after content is loaded
  34.         $("#portfolio-slider").easySlider({
  35.             auto: true, continuous: true, numeric: true,
  36.             speed: 900, pause: 2200
  37.         });
  38.        
  39.        
  40.         return false;
  41.     });
   
Can someone please advise me on how to call the easySlider after the content is finished loading.

Thanks!